chore: Update ADS button min width (#37338)
## Description Sets the min width of an ADS button (expect icon buttons) to be 60px Fixes #`Issue Number` _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.All" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!CAUTION] > 🔴 🔴 🔴 Some tests have failed. > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/11809774671> > Commit: 224483d356083468d27acc5bb6a3d2b059ba8146 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11809774671&attempt=1&selectiontype=test&testsstatus=failed&specsstatus=fail" target="_blank">Cypress dashboard</a>. > Tags: @tag.All > Spec: > The following are new failures, please fix them before merging the PR: <ol> > <li>cypress/e2e/Regression/ClientSide/Widgets/ListV2/Childwigets/List_Inputs_spec.js</ol> > <a href="https://internal.appsmith.com/app/cypress-dashboard/identified-flaky-tests-65890b3c81d7400d08fa9ee3?branch=master" target="_blank">List of identified flaky tests</a>. > <hr>Wed, 13 Nov 2024 04:12:40 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Enhanced button styles to include minimum width constraints: 60 pixels for small buttons and 80 pixels for medium buttons, improving layout consistency for non-icon buttons. - Introduced a new property `isIconButton` in the `Button` component to adjust button presentation. - Added functionality to refresh the workspace list immediately after creating a new workspace. - Implemented improved error handling by checking for `workspace.id` before rendering workspace items. - Added a new state variable to manage the visibility of the import application modal. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
parent
81c6a1ea8d
commit
df7521e93a
|
|
@ -29,6 +29,7 @@ const getSizes = (size: ButtonSizes, isIconButton?: boolean) => {
|
|||
? "var(--ads-v2-spaces-2)"
|
||||
: "var(--ads-v2-spaces-2) var(--ads-v2-spaces-3)"};
|
||||
--button-gap: var(--ads-v2-spaces-2);
|
||||
--button-min-width: 60px;
|
||||
`,
|
||||
md: css`
|
||||
--button-font-weight: 600;
|
||||
|
|
@ -37,6 +38,7 @@ const getSizes = (size: ButtonSizes, isIconButton?: boolean) => {
|
|||
? "var(--ads-v2-spaces-3)"
|
||||
: "var(--ads-v2-spaces-3) var(--ads-v2-spaces-4)"};
|
||||
--button-gap: var(--ads-v2-spaces-3);
|
||||
--button-min-width: 80px;
|
||||
`,
|
||||
};
|
||||
|
||||
|
|
@ -175,6 +177,8 @@ export const ButtonContent = styled.div<{
|
|||
box-sizing: border-box;
|
||||
padding: var(--button-padding);
|
||||
border-radius: inherit;
|
||||
min-width: ${({ isIconButton }) =>
|
||||
isIconButton ? "unset" : "var(--button-min-width)"};
|
||||
|
||||
& > .${ButtonContentChildrenClassName} {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -318,6 +318,7 @@ export function LeftPaneSection(props: {
|
|||
<Button
|
||||
data-testid="t--workspace-new-workspace-auto-create"
|
||||
isDisabled={props.isFetchingWorkspaces}
|
||||
isIconButton
|
||||
kind="tertiary"
|
||||
onClick={createNewWorkspace}
|
||||
startIcon="add-line"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user