From ba6262ffe69fc4d21c46236d2953a87493790e1f Mon Sep 17 00:00:00 2001 From: Valera Melnikov Date: Fri, 22 Mar 2024 16:53:29 +0300 Subject: [PATCH] chore: widgets alignment (#31923) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description Plenty changes related to widgets alignment 1. Paragraph, button, inputs, single checkbox and switch widgets are aligned along the baseline of the text content 2. The icons in the buttons and the single checkbox and switch are now positioned absolutely so as not to affect the height of the components. The height of the components now depends on text content. 3. All unnecessary paddings and borders in the layout have been removed: - Canvas padding: `--outer-spacing-4` - Gap between sections and zones: `--outer-spacing-4` - Zone padding: `--outer-spacing-3` - Gap between widgets: `--outer-spacing-3` 4. In widget selection styles replace `border` with `outline`, since the `outline` one does not take space. 5. Add Changes to the flex-basis calculation method. Now the gap between the zones is taken into account there. 6. Add a lot of small fixes related to the changes described above. https://github.com/appsmithorg/appsmith/assets/11555074/b7c220eb-3e27-4039-9c15-6281bafe8008 Fixes #29364 ## Automation /ok-to-test tags="@tag.Anvil" ### :mag: Cypress test results > [!IMPORTANT] > Workflow run: > Commit: `f85b63c0a49f30b9762379c2f8c3bd38c7a8355f` > Cypress dashboard url: Click here! > All cypress tests have passed 🎉🎉🎉 ## Summary by CodeRabbit ## Summary by CodeRabbit - **New Features** - Improved handling of CSS variable values in Flex components. - Enhanced styling and layout configurations for a better user experience. - **Bug Fixes** - Fixed label positioning and styling issues in Checkbox and Switch components. - Adjusted padding, margin, and sizing for consistency and alignment. - **Refactor** - Enhanced flex layout handling and space distribution logic for improved layout flexibility. - **Style** - Updated component styles for refined user interface aesthetics. - **Chores** - Updated feature flags and configurations for widgets and components to enable new functionalities. --- .../Anvil/AnvilWidgetClicking_spec.ts | 2 +- .../src/components/Checkbox/src/Checkbox.tsx | 2 +- .../headless/src/components/Switch/Switch.tsx | 2 +- .../theming/src/hooks/src/useCssTokens.tsx | 3 + .../ActionGroup/src/ActionGroup.tsx | 95 ++++++++---------- .../ActionGroup/src/styles.module.css | 16 ++- .../src/components/Button/src/Button.tsx | 16 ++- .../components/Button/src/styles.module.css | 98 +++++++++++-------- .../ButtonGroup/src/styles.module.css | 7 +- .../components/Checkbox/src/styles.module.css | 33 ++++++- .../Checkbox/stories/Checkbox.stories.mdx | 12 +-- .../src/components/Flex/src/flexCss.ts | 9 +- .../components/Modal/src/styles.module.css | 29 ++++-- .../components/Radio/src/styles.module.css | 13 ++- .../src/components/Switch/src/Switch.tsx | 6 +- .../components/Switch/src/styles.module.css | 45 +++++++-- .../Switch/stories/Switch.stories.mdx | 12 +-- .../src/components/TextArea/src/TextArea.tsx | 2 +- .../components/TextInput/src/TextInput.tsx | 2 +- .../widgets/src/styles/src/field.module.css | 16 ++- .../src/styles/src/inline-label.module.css | 12 --- .../src/styles/src/text-input.module.css | 9 +- app/client/src/WidgetProvider/constants.ts | 3 + app/client/src/index.css | 8 +- .../anvil/common/AnvilFlexComponent.tsx | 15 ++- .../anvil/common/hooks/detachedWidgetHooks.ts | 3 +- .../common/hooks/useWidgetBorderStyles.ts | 3 +- .../components/FlexLayout.tsx | 8 +- .../components/alignedWidgetRow/index.tsx | 1 + .../components/section/index.tsx | 1 + .../layoutComponents/presets/ModalPreset.tsx | 1 - .../utils/spaceDistributionEditorUtils.ts | 9 +- .../anvil/utils/AnvilDSLTransformer.ts | 3 +- .../WidgetNamesCanvas/WidgetNameConstants.ts | 3 +- .../common/WidgetNamesCanvas/utils.ts | 2 + app/client/src/widgets/anvil/Container.tsx | 6 +- .../wds/WDSButtonWidget/config/anvilConfig.ts | 2 +- .../WDSCheckboxWidget/config/anvilConfig.ts | 2 + .../WDSIconButtonWidget/config/anvilConfig.ts | 2 +- .../WDSParagraphWidget/config/anvilConfig.ts | 2 + .../config/propertyPaneConfig/styleConfig.ts | 8 -- .../wds/WDSParagraphWidget/widget/index.tsx | 1 - .../wds/WDSStatBoxWidget/component/index.tsx | 1 - .../component/styles.module.css | 2 - .../wds/WDSSwitchWidget/config/anvilConfig.ts | 2 + .../WDSSwitchWidget/config/defaultsConfig.ts | 2 +- .../propertyPaneConfig/contentConfig.ts | 4 +- .../wds/WDSTableWidget/config/anvilConfig.ts | 2 +- 48 files changed, 336 insertions(+), 201 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Anvil/AnvilWidgetClicking_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Anvil/AnvilWidgetClicking_spec.ts index 6da554cda3..0bbf3fa43a 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Anvil/AnvilWidgetClicking_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Anvil/AnvilWidgetClicking_spec.ts @@ -97,7 +97,7 @@ describe( cy.get(".anvil-widget-wrapper").each(($widget) => { cy.wrap($widget).should( "have.css", - "border-color", + "outline-color", "rgba(0, 0, 0, 0)", ); }); diff --git a/app/client/packages/design-system/headless/src/components/Checkbox/src/Checkbox.tsx b/app/client/packages/design-system/headless/src/components/Checkbox/src/Checkbox.tsx index 3c6908bae2..f3ba579417 100644 --- a/app/client/packages/design-system/headless/src/components/Checkbox/src/Checkbox.tsx +++ b/app/client/packages/design-system/headless/src/components/Checkbox/src/Checkbox.tsx @@ -50,7 +50,7 @@ const _Checkbox = (props: CheckboxProps, ref: CheckboxRef) => { // it should be safe in this case since the checkbox is not expected to be added or removed from the group. const context = useContext(CheckboxGroupContext) as CheckboxGroupContextType; const isDisabled = isDisabledProp || context?.isDisabled; - const labelPosition = labelPositionProp ?? context?.optionsLabelPosition; + const labelPosition = context?.optionsLabelPosition ?? labelPositionProp; const { hoverProps, isHovered } = useHover({ isDisabled }); const { inputProps } = Boolean(context?.state) ? // eslint-disable-next-line react-hooks/rules-of-hooks diff --git a/app/client/packages/design-system/headless/src/components/Switch/Switch.tsx b/app/client/packages/design-system/headless/src/components/Switch/Switch.tsx index ef460d900b..dc207b935b 100644 --- a/app/client/packages/design-system/headless/src/components/Switch/Switch.tsx +++ b/app/client/packages/design-system/headless/src/components/Switch/Switch.tsx @@ -43,7 +43,7 @@ const _Switch = (props: SwitchProps, ref: SwitchRef) => { // it should be safe in this case since the switch is not expected to be added or removed from the group. const context = useContext(CheckboxGroupContext) as CheckboxGroupContextType; const isDisabled = isDisabledProp || context?.isDisabled; - const labelPosition = labelPositionProp ?? context?.optionsLabelPosition; + const labelPosition = context?.optionsLabelPosition ?? labelPositionProp; const { hoverProps, isHovered } = useHover({ isDisabled }); const { inputProps } = Boolean(context?.state) diff --git a/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx b/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx index a8dc9c76e3..912c974018 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx @@ -36,6 +36,9 @@ const getTypographyCss = (typography: Typography) => { margin-top: ${after.marginTop}; } } + --${currentKey}-line-height: ${lineHeight}; + --${currentKey}-margin-start: ${after.marginTop}; + --${currentKey}-margin-end: ${before.marginBottom}; ` ); }, "")} diff --git a/app/client/packages/design-system/widgets/src/components/ActionGroup/src/ActionGroup.tsx b/app/client/packages/design-system/widgets/src/components/ActionGroup/src/ActionGroup.tsx index 9d5c9e59bb..e329d6a113 100644 --- a/app/client/packages/design-system/widgets/src/components/ActionGroup/src/ActionGroup.tsx +++ b/app/client/packages/design-system/widgets/src/components/ActionGroup/src/ActionGroup.tsx @@ -28,7 +28,7 @@ const _ActionGroup = ( } = props; const domRef = useDOMRef(ref); const state = useListState({ ...props, suppressTextValueWarning: true }); - const { actionGroupProps, isMeasuring, visibleItems } = useActionGroup( + const { actionGroupProps, visibleItems } = useActionGroup( props, state, domRef, @@ -38,63 +38,52 @@ const _ActionGroup = ( const menuChildren = children.slice(visibleItems); children = children.slice(0, visibleItems); - const style = { - flexBasis: isMeasuring ? "100%" : undefined, - display: "flex", - }; - return (
-
- {children.map((item) => { - if (Boolean(item.props.isSeparator)) { - return
; - } + {children.map((item) => { + if (Boolean(item.props.isSeparator)) { + return
; + } - return ( - onAction?.(item.key)} - size={Boolean(size) ? size : undefined} - state={state} - variant={variant} - /> - ); - })} - {menuChildren?.length > 0 && ( - - - - {menuChildren.map((item) => ( - - {item.rendered} - - ))} - - - )} -
+ return ( + onAction?.(item.key)} + size={Boolean(size) ? size : undefined} + state={state} + variant={variant} + /> + ); + })} + {menuChildren?.length > 0 && ( + + + + {menuChildren.map((item) => ( + + {item.rendered} + + ))} + + + )}
); diff --git a/app/client/packages/design-system/widgets/src/components/ActionGroup/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/ActionGroup/src/styles.module.css index 6a62976e63..242280c12d 100644 --- a/app/client/packages/design-system/widgets/src/components/ActionGroup/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/ActionGroup/src/styles.module.css @@ -6,20 +6,28 @@ & :is([data-separator]) { inline-size: var(--sizing-5); + block-size: var(--sizing-5); } [data-button]:not(:last-of-type) { - min-inline-size: fit-content; + /* + We use !important here to be sure that button width and the logic of useActionGroup hook will not be changed from the outside + */ + min-inline-size: fit-content !important; } &:has([data-icon-button]) [data-button]:nth-last-child(2) { - min-inline-size: var(--sizing-14); + min-inline-size: var(--sizing-14) !important; } &[data-orientation="vertical"] { flex-direction: column; } + &[data-orientation="vertical"] :is([data-button]) { + max-inline-size: none; + } + &[data-overflow="collapse"] { flex-wrap: nowrap; } @@ -51,6 +59,10 @@ * Horizontal orientation *----------------------------------------------------------------------------- */ + &[data-orientation="horizontal"] { + width: 100%; + } + &[data-orientation="horizontal"] [data-button]:not(:last-of-type) { border-right-width: var(--border-width-1); } diff --git a/app/client/packages/design-system/widgets/src/components/Button/src/Button.tsx b/app/client/packages/design-system/widgets/src/components/Button/src/Button.tsx index 5843f65e1d..8e7c6c6afd 100644 --- a/app/client/packages/design-system/widgets/src/components/Button/src/Button.tsx +++ b/app/client/packages/design-system/widgets/src/components/Button/src/Button.tsx @@ -1,7 +1,5 @@ -import clsx from "clsx"; import React, { forwardRef } from "react"; import { useVisuallyHidden } from "@react-aria/visually-hidden"; -import { getTypographyClassName } from "@design-system/theming"; import { Button as HeadlessButton } from "@design-system/headless"; import type { ButtonRef as HeadlessButtonRef } from "@design-system/headless"; import type { SIZES } from "../../../shared"; @@ -37,10 +35,20 @@ const _Button = (props: ButtonProps, ref: HeadlessButtonRef) => { {icon && } {Boolean(children) && ( - + {children} )} + {/* + To align buttons in the case when we don't have text content, we create an empty block with the appropriate size. + See the styles for data-empty-text attribute. + */} + {!Boolean(children) && ​} {isLoading && ( @@ -59,7 +67,7 @@ const _Button = (props: ButtonProps, ref: HeadlessButtonRef) => { aria-disabled={ visuallyDisabled || isLoading || isDisabled ? true : undefined } - className={clsx(styles.button, getTypographyClassName("body"))} + className={styles.button} data-button="" data-color={color} data-icon-position={iconPosition === "start" ? "start" : "end"} diff --git a/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css index e18bed296a..48ff7df52d 100644 --- a/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css @@ -4,16 +4,11 @@ display: flex; justify-content: center; align-items: center; - outline: 0; cursor: pointer; user-select: none; position: relative; + border: none; font-family: inherit; - border-style: solid; - border-width: var(--border-width-1); - padding-inline: var(--inner-spacing-3); - padding-block: var(--inner-spacing-2); - min-inline-size: var(--sizing-14); max-inline-size: var(--sizing-70); border-radius: var(--border-radius-elevation-3); @@ -21,7 +16,6 @@ &[data-variant="filled"][data-color="$(color)"] { background-color: var(--color-bg-$(color)); color: var(--color-fg-on-$(color)); - border-color: transparent; &[data-hovered]:not([aria-disabled]) { background-color: var(--color-bg-$(color)-hover); @@ -35,7 +29,9 @@ &[data-variant="outlined"][data-color="$(color)"] { background-color: transparent; color: var(--color-fg-$(color)); - border-color: var(--color-bd-$(color)); + /** We use !important here to override the disabled outline styles in the main app. */ + outline: var(--border-width-1) solid var(--color-bd-$(color)) !important; + outline-offset: calc(-1 * var(--border-width-1)) !important; &[data-hovered]:not([aria-disabled]) { background-color: var(--color-bg-$(color)-subtle-hover); @@ -49,7 +45,6 @@ &[data-variant="ghost"][data-color="$(color)"] { background: transparent; color: var(--color-fg-$(color)); - border-color: transparent; &[data-hovered]:not([aria-disabled]) { background: var(--color-bg-$(color)-subtle-hover); @@ -61,45 +56,29 @@ } } - /* Note: adding important here as ADS is overriding the color of blueprint icon globally */ - /* TODO(pawan): Remove this once ADS team removes the global override */ - &[data-button] [data-icon], - &[data-button] [icon] { - color: inherit !important; - } - /** * ---------------------------------------------------------------------------- * CONTENT *----------------------------------------------------------------------------- */ & [data-content] { + position: relative; display: flex; justify-content: center; align-items: center; } - &[data-icon-position="start"] { - [data-content] *:not([data-hidden]) + *:not([data-hidden]) { - margin-inline-start: var(--inner-spacing-1); - } - } - - &[data-icon-position="end"] { - [data-content] *:not([data-hidden]) + *:not([data-hidden]) { - margin-inline-end: var(--inner-spacing-1); - } - } - &[data-icon-position="end"] [data-content] { flex-direction: row-reverse; } - /** Note: adding direct selector ">" here because blueprint also has data-icon attribute on their icons */ - & [data-content] > [data-icon] { - display: flex; - justify-content: center; - align-items: center; + & [data-empty-text] { + block-size: var(--body-line-height); + margin-block-start: var(--body-margin-start); + margin-block-end: var(--body-margin-end); + inline-size: var(--body-line-height); + margin-inline-start: var(--body-margin-start); + margin-inline-end: var(--body-margin-end); } /** @@ -156,10 +135,22 @@ * ICON BUTTON *----------------------------------------------------------------------------- */ - &[data-icon-button] { - text-align: center; - padding: 0; - aspect-ratio: 1; + & [data-icon] { + /** + Icons are positioned absolutely because we need to align the elements along the baseline + but icons takes more space than the text content. + */ + position: absolute; + } + + &[data-icon-position="start"]:has([data-text]):not(:has([data-loader])) + [data-icon] { + left: 0; + } + + &[data-icon-position="end"]:has([data-text]):not(:has([data-loader])) + [data-icon] { + right: 0; } /** @@ -169,13 +160,42 @@ */ &[data-size="small"] { min-inline-size: var(--sizing-7); - block-size: var(--sizing-7); padding-inline: var(--inner-spacing-2); + padding-block: var(--inner-spacing-2); + } + + &[data-size="small"]:has([data-icon]):has([data-text]) { + min-inline-size: var(--sizing-12); + } + + &[data-icon-position="end"][data-size="small"] + [data-content]:has([data-icon]):has([data-text]) { + padding-inline-end: calc(var(--icon-size-1) + var(--inner-spacing-1)); + } + + &[data-icon-position="start"][data-size="small"] + [data-content]:has([data-icon]):has([data-text]) { + padding-inline-start: calc(var(--icon-size-1) + var(--inner-spacing-1)); } &[data-size="medium"] { min-inline-size: var(--sizing-9); - block-size: var(--sizing-9); + padding-inline: var(--inner-spacing-3); + padding-block: var(--inner-spacing-3); + } + + &[data-size="medium"]:has([data-icon]):has([data-text]) { + min-inline-size: var(--sizing-22); + } + + &[data-icon-position="end"][data-size="medium"] + [data-content]:has([data-icon]):has([data-text]) { + padding-inline-end: calc(var(--icon-size-2) + var(--inner-spacing-1)); + } + + &[data-icon-position="start"][data-size="medium"] + [data-content]:has([data-icon]):has([data-text]) { + padding-inline-start: calc(var(--icon-size-2) + var(--inner-spacing-1)); } } diff --git a/app/client/packages/design-system/widgets/src/components/ButtonGroup/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/ButtonGroup/src/styles.module.css index b79a07c395..d66743fdf2 100644 --- a/app/client/packages/design-system/widgets/src/components/ButtonGroup/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/ButtonGroup/src/styles.module.css @@ -15,11 +15,16 @@ } &[data-orientation="vertical"] :is([data-button]) { - min-inline-size: 100%; + /* + We use !important here to be sure that button width and the logic of useButtonGroup hook will not be changed from the outside + */ + min-inline-size: 100% !important; max-inline-size: none; } & :is([data-separator]) { flex-grow: 1; + inline-size: var(--sizing-5); + block-size: var(--sizing-5); } } diff --git a/app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css index 6793ae5522..06da0adfa5 100644 --- a/app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Checkbox/src/styles.module.css @@ -1,4 +1,6 @@ .checkbox { + position: relative; + [data-icon] { --checkbox-border-width: var(--border-width-2); --checkbox-border-color: var(--color-bd-neutral); @@ -7,8 +9,13 @@ --checkbox-box-shadow: 0px 0px 0px var(--checkbox-border-width) var(--checkbox-border-color) inset; - width: var(--sizing-4); - height: var(--sizing-4); + /** + Checkbox icon are positioned absolutely because we need to align the elements along the baseline + but icon takes more space than the text content. + */ + position: absolute; + width: var(--sizing-5); + height: var(--sizing-5); box-shadow: var(--checkbox-box-shadow); border-radius: clamp(0px, var(--border-radius-elevation-3), 25%); color: transparent; @@ -23,6 +30,28 @@ --checkbox-border-color: var(--color-bd-neutral-hover); } + /** + * ---------------------------------------------------------------------------- + * LABEL POSITION + *----------------------------------------------------------------------------- + */ + &[data-label-position="end"] { + padding-inline-start: calc(var(--sizing-5) + var(--inner-spacing-2)); + justify-content: flex-end; + } + + &[data-label-position="end"] [data-icon] { + left: 0; + } + + &[data-label-position="start"] { + padding-inline-end: calc(var(--sizing-5) + var(--inner-spacing-2)); + } + + &[data-label-position="start"] [data-icon] { + right: 0; + } + /** * ---------------------------------------------------------------------------- * CHECKED AND INDETERMINATE - BUT NOT DISABLED diff --git a/app/client/packages/design-system/widgets/src/components/Checkbox/stories/Checkbox.stories.mdx b/app/client/packages/design-system/widgets/src/components/Checkbox/stories/Checkbox.stories.mdx index a484a49599..96d9c64162 100644 --- a/app/client/packages/design-system/widgets/src/components/Checkbox/stories/Checkbox.stories.mdx +++ b/app/client/packages/design-system/widgets/src/components/Checkbox/stories/Checkbox.stories.mdx @@ -96,10 +96,10 @@ Checkbox is a component that allows the user to select one or more options from parameters={{ width: 250, }} - name="Label Position - Left" + name="Label Position - Start" args={{ - labelPosition: "left", - children: "Label Position - Left", + labelPosition: "start", + children: "Label Position - Start", }} > {Template.bind({})} @@ -108,10 +108,10 @@ Checkbox is a component that allows the user to select one or more options from parameters={{ width: 250, }} - name="Label Position - Right" + name="Label Position - End" args={{ - labelPosition: "right", - children: "Label Position - Right", + labelPosition: "end", + children: "Label Position - End", }} > {Template.bind({})} diff --git a/app/client/packages/design-system/widgets/src/components/Flex/src/flexCss.ts b/app/client/packages/design-system/widgets/src/components/Flex/src/flexCss.ts index 039d562bfc..d1f81e4d94 100644 --- a/app/client/packages/design-system/widgets/src/components/Flex/src/flexCss.ts +++ b/app/client/packages/design-system/widgets/src/components/Flex/src/flexCss.ts @@ -138,6 +138,9 @@ export const flexWrapValue = (value: FlexCssProps["wrap"]) => { return value; }; +const sizingRegexp = new RegExp("^sizing"); +const spacingRegexp = new RegExp("^spacing"); + const cssVarValue = ( value: CssVarValues, extraProps?: Pick, @@ -146,15 +149,15 @@ const cssVarValue = ( if (value == null) return; - if ((value as string).includes("sizing")) { + if (sizingRegexp.test(value as string)) { return `var(--${value})`; } - if ((value as string).includes("spacing") && !isInner) { + if (spacingRegexp.test(value as string) && !isInner) { return `var(--outer-${value})`; } - if ((value as string).includes("spacing") && isInner) { + if (spacingRegexp.test(value as string) && isInner) { return `var(--inner-${value})`; } diff --git a/app/client/packages/design-system/widgets/src/components/Modal/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Modal/src/styles.module.css index c94576448a..9e80a71f9e 100644 --- a/app/client/packages/design-system/widgets/src/components/Modal/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Modal/src/styles.module.css @@ -8,33 +8,41 @@ } .overlay .content { - background: var(--color-bg); + background: var(--color-bg-elevation-3); border-radius: var(--border-radius-elevation-3); box-shadow: var(--box-shadow-1); outline: none; display: flex; flex-direction: column; - gap: var(--inner-spacing-3); - padding-inline: var(--inner-spacing-4); - padding-block: var(--inner-spacing-3); + padding-inline: var(--outer-spacing-4); + padding-block: var(--outer-spacing-4); + gap: var(--outer-spacing-2); flex: 1; } .overlay .content .header { - padding-inline: 0 calc(var(--inner-spacing-2)); - margin-inline: 0 calc(-1 * var(--inner-spacing-4)); + /* Needed to align the close button */ + padding-inline: 0 calc(var(--outer-spacing-2)); + margin-inline: 0 calc(-1 * var(--outer-spacing-4)); } .overlay .content .body { overflow: auto; - padding-inline: var(--inner-spacing-4); - margin-inline: calc(var(--inner-spacing-4) * -1); + padding-block: var(--outer-spacing-2); + padding-inline: var(--outer-spacing-4); + margin-inline: calc(var(--outer-spacing-4) * -1); + flex: 1; + + /* Needed to remove the height from the child element so that Scrollbar is displayed correctly */ + & > *:last-child { + height: auto; + } } .overlay [role="dialog"] { display: flex; - max-inline-size: calc(100% - var(--inner-spacing-8)); - max-block-size: calc(100% - var(--inner-spacing-8)); + max-inline-size: calc(100% - var(--outer-spacing-8)); + max-block-size: calc(100% - var(--outer-spacing-8)); } .overlay [role="dialog"][data-size="small"] { @@ -48,6 +56,7 @@ .overlay [role="dialog"][data-size="large"], .overlay [role="dialog"][data-size="large"] .content { inline-size: 100%; + min-block-size: 50%; } .overlay, diff --git a/app/client/packages/design-system/widgets/src/components/Radio/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Radio/src/styles.module.css index 5da0dc267f..8e43021eae 100644 --- a/app/client/packages/design-system/widgets/src/components/Radio/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Radio/src/styles.module.css @@ -1,4 +1,7 @@ .radio { + position: relative; + padding-inline-start: calc(var(--sizing-5) + var(--inner-spacing-2)); + [data-icon] { --radio-border-width: var(--border-width-2); --radio-border-color: var(--color-bd-neutral); @@ -7,8 +10,14 @@ --radio-box-shadow: 0px 0px 0px var(--radio-border-width) var(--radio-border-color) inset; - width: var(--sizing-4); - height: var(--sizing-4); + /** + Checkbox icon are positioned absolutely because we need to align the elements along the baseline + but icon takes more space than the text content. + */ + position: absolute; + left: 0; + width: var(--sizing-5); + height: var(--sizing-5); box-shadow: var(--radio-box-shadow); border-radius: 100%; color: transparent; diff --git a/app/client/packages/design-system/widgets/src/components/Switch/src/Switch.tsx b/app/client/packages/design-system/widgets/src/components/Switch/src/Switch.tsx index 524143c5df..a487e47eda 100644 --- a/app/client/packages/design-system/widgets/src/components/Switch/src/Switch.tsx +++ b/app/client/packages/design-system/widgets/src/components/Switch/src/Switch.tsx @@ -14,7 +14,7 @@ import { inlineLabelStyles } from "../../../styles"; export type SwitchProps = Omit; const _Switch = (props: SwitchProps, ref: HeadlessSwitchRef) => { - const { children, labelPosition, ...rest } = props; + const { children, labelPosition = "start", ...rest } = props; return ( { ref={ref} {...rest} > - {Boolean(children) && {children}} + {Boolean(children) && ( + {children} + )} ); }; diff --git a/app/client/packages/design-system/widgets/src/components/Switch/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Switch/src/styles.module.css index bc8d2f1fed..251cf7a631 100644 --- a/app/client/packages/design-system/widgets/src/components/Switch/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Switch/src/styles.module.css @@ -1,15 +1,18 @@ .switch { - &[data-label-position="start"] { - width: 100%; - } + position: relative; + width: auto; [data-icon] { --gutter: 2px; - --knob-size: var(--sizing-3); + --knob-size: var(--sizing-4); - position: relative; + /** + Checkbox icon are positioned absolutely because we need to align the elements along the baseline + but icon takes more space than the text content. + */ + position: absolute; width: var(--sizing-8); - height: var(--sizing-4); + height: var(--sizing-5); background-color: var(--color-bd-neutral); border-radius: var(--knob-size); color: var(--color-bg); @@ -35,6 +38,36 @@ background-color: var(--color-bd-neutral-hover); } + /** + * ---------------------------------------------------------------------------- + * LABEL POSITION + *----------------------------------------------------------------------------- + */ + &[data-label-position="end"] { + padding-inline-start: calc(var(--sizing-8) + var(--inner-spacing-2)); + justify-content: flex-end; + } + + &[data-label-position="end"] [data-icon] { + left: 0; + } + + &[data-label-position="end"] .text { + margin-inline-start: auto; + } + + &[data-label-position="start"] { + padding-inline-end: calc(var(--sizing-8) + var(--inner-spacing-2)); + } + + &[data-label-position="start"] [data-icon] { + right: 0; + } + + &[data-label-position="start"] .text { + margin-inline-end: auto; + } + /** * ---------------------------------------------------------------------------- * CHECKED - BUT NOT DISABLED diff --git a/app/client/packages/design-system/widgets/src/components/Switch/stories/Switch.stories.mdx b/app/client/packages/design-system/widgets/src/components/Switch/stories/Switch.stories.mdx index cc21da42c6..73c791a5d4 100644 --- a/app/client/packages/design-system/widgets/src/components/Switch/stories/Switch.stories.mdx +++ b/app/client/packages/design-system/widgets/src/components/Switch/stories/Switch.stories.mdx @@ -69,10 +69,10 @@ Switch is a component that allows the user to select one or more options from a parameters={{ width: 250, }} - name="Label Position - Left" + name="Label Position - Start" args={{ - labelPosition: "left", - children: "Label Position - Left", + labelPosition: "start", + children: "Label Position - Start", }} > {Template.bind({})} @@ -82,10 +82,10 @@ Switch is a component that allows the user to select one or more options from a parameters={{ width: 250, }} - name="Label Position - Right" + name="Label Position - End" args={{ - labelPosition: "right", - children: "Label Position - Right", + labelPosition: "end", + children: "Label Position - End", }} > {Template.bind({})} diff --git a/app/client/packages/design-system/widgets/src/components/TextArea/src/TextArea.tsx b/app/client/packages/design-system/widgets/src/components/TextArea/src/TextArea.tsx index 958a30563a..9964aa720d 100644 --- a/app/client/packages/design-system/widgets/src/components/TextArea/src/TextArea.tsx +++ b/app/client/packages/design-system/widgets/src/components/TextArea/src/TextArea.tsx @@ -43,7 +43,7 @@ const _TextArea = (props: TextAreaProps, ref: HeadlessTextAreaRef) => { inputClassName={getTypographyClassName("body")} isRequired={isRequired} label={label} - labelClassName={getTypographyClassName("body")} + labelClassName={getTypographyClassName("caption")} ref={ref} {...rest} /> diff --git a/app/client/packages/design-system/widgets/src/components/TextInput/src/TextInput.tsx b/app/client/packages/design-system/widgets/src/components/TextInput/src/TextInput.tsx index 48e68dd888..efd2dcb3ee 100644 --- a/app/client/packages/design-system/widgets/src/components/TextInput/src/TextInput.tsx +++ b/app/client/packages/design-system/widgets/src/components/TextInput/src/TextInput.tsx @@ -110,7 +110,7 @@ const _TextInput = (props: TextInputProps, ref: HeadlessTextInputRef) => { inputClassName={getTypographyClassName("body")} isRequired={isRequired} label={label} - labelClassName={getTypographyClassName("body")} + labelClassName={getTypographyClassName("caption")} ref={ref} startIcon={renderStartIcon()} type={showPassword ? "text" : type} diff --git a/app/client/packages/design-system/widgets/src/styles/src/field.module.css b/app/client/packages/design-system/widgets/src/styles/src/field.module.css index 88380d166e..f9e25224dc 100644 --- a/app/client/packages/design-system/widgets/src/styles/src/field.module.css +++ b/app/client/packages/design-system/widgets/src/styles/src/field.module.css @@ -68,7 +68,17 @@ flex-direction: column; } - &[data-disabled] [data-field-group] [data-label] { + & [data-field-group] [data-icon] { + /** In the group components, the checkbox, radio and switch icons are positioned relatively */ + position: relative; + } + + & [data-field-group] [data-label] { + padding: 0; + gap: var(--inner-spacing-2); + } + + &[data-disabled] [data-field-group] { cursor: default; } @@ -77,6 +87,10 @@ flex-direction: row; } + & [data-field-group] [data-label-position="start"] { + flex-direction: row-reverse; + } + /** * ---------------------------------------------------------------------------- * FIELD WRAPPER diff --git a/app/client/packages/design-system/widgets/src/styles/src/inline-label.module.css b/app/client/packages/design-system/widgets/src/styles/src/inline-label.module.css index afd32c13d4..ef34c54a6b 100644 --- a/app/client/packages/design-system/widgets/src/styles/src/inline-label.module.css +++ b/app/client/packages/design-system/widgets/src/styles/src/inline-label.module.css @@ -2,8 +2,6 @@ .inline-label { display: flex; align-items: center; - gap: var(--inner-spacing-2); - min-height: var(--sizing-4); position: relative; cursor: pointer; width: fit-content; @@ -15,16 +13,6 @@ -webkit-box-orient: vertical; } - /** - * ---------------------------------------------------------------------------- - * LABEL POSITION - *----------------------------------------------------------------------------- - */ - &[data-label-position="start"] { - flex-direction: row-reverse; - justify-content: space-between; - } - /** * ---------------------------------------------------------------------------- * DISABLED diff --git a/app/client/packages/design-system/widgets/src/styles/src/text-input.module.css b/app/client/packages/design-system/widgets/src/styles/src/text-input.module.css index 73790bd299..96656afb29 100644 --- a/app/client/packages/design-system/widgets/src/styles/src/text-input.module.css +++ b/app/client/packages/design-system/widgets/src/styles/src/text-input.module.css @@ -7,10 +7,11 @@ gap: var(--inner-spacing-1); border-radius: var(--border-radius-elevation-3); background-color: var(--color-bg-neutral-subtle); - padding-inline: var(--inner-spacing-1); + padding-inline: var(--inner-spacing-2); flex: 1; max-inline-size: 100%; isolation: isolate; + padding-block: var(--inner-spacing-3); } & [data-field-input] :is(input, textarea) { @@ -22,6 +23,8 @@ text-overflow: ellipsis; padding: 0; max-inline-size: 100%; + margin-block-start: var(--body-margin-start); + margin-block-end: var(--body-margin-end); &:autofill, &:autofill:hover, @@ -167,7 +170,7 @@ *----------------------------------------------------------------------------- */ &:has(input[data-size="small"]) [data-field-input] { - block-size: var(--sizing-7); + padding-block: var(--inner-spacing-2); & [data-icon] { inline-size: var(--sizing-5); @@ -176,8 +179,6 @@ } &:has(input[data-size="medium"]) [data-field-input] { - block-size: var(--sizing-9); - & [data-icon] { inline-size: var(--sizing-7); aspect-ratio: 1; diff --git a/app/client/src/WidgetProvider/constants.ts b/app/client/src/WidgetProvider/constants.ts index 882d92a9c3..49457b2021 100644 --- a/app/client/src/WidgetProvider/constants.ts +++ b/app/client/src/WidgetProvider/constants.ts @@ -2,6 +2,7 @@ * TODO: (Balaji) Move all the types to different file */ import { IconNames } from "@blueprintjs/icons"; +import type { SpacingDimension } from "@design-system/widgets"; import type { Responsive, SizingDimension } from "@design-system/widgets"; import type { Theme } from "constants/DefaultTheme"; import type { PropertyPaneConfig } from "constants/PropertyControlConstants"; @@ -61,6 +62,8 @@ export interface SizeConfig { maxWidth?: Responsive; minHeight?: Responsive; minWidth?: Responsive; + paddingTop?: Responsive; + paddingBottom?: Responsive; } export interface AnvilConfig { diff --git a/app/client/src/index.css b/app/client/src/index.css index 0b567f24be..58617770c9 100755 --- a/app/client/src/index.css +++ b/app/client/src/index.css @@ -257,14 +257,14 @@ div.bp3-popover-arrow { /** Conditional vertical margin applied to widgets. If in a row of widgets (.aligned-widget-row), one of the widgets has a label ([data-field-label-wrapper]), then - all widgets (.anvil-widget-wrapper) in the row other than the widget with the label, will shift down using the + all widgets (.anvil-widget-wrapper) in the row other than the widget with the label, will shift down using the margin-block-start property. This is to ensure that the widgets are aligned vertically. The value of the margin-block-start property is calculated based on the spacing tokens used by the labels in input like components */ .aligned-widget-row:has(.anvil-widget-wrapper [data-field-label-wrapper]) .anvil-widget-wrapper:not(:has([data-field-label-wrapper])) { - margin-block-start: calc(var(--inner-spacing-2) + var(--sizing-3)); + margin-block-start: calc(var(--inner-spacing-3) + var(--sizing-3)); } /** Asymmetric Padding @@ -273,7 +273,7 @@ div.bp3-popover-arrow { elevation="1" is used to denote that the section has elevation. */ div.anvil-widget-wrapper:has(div[data-elevation="false"][elevation="1"]) { - padding: var(--outer-sizing-0); + padding: var(--outer-spacing-0); } /** Asymmetric Padding @@ -287,5 +287,5 @@ div.anvil-widget-wrapper:has(div[data-elevation="false"][elevation="1"]) { */ div.anvil-widget-wrapper:not(:has(div[data-elevation="true"][elevation="2"])) div.anvil-widget-wrapper:has(div[data-elevation]) { - padding-block: var(--outer-sizing-0); + padding-block: var(--outer-spacing-0); } diff --git a/app/client/src/layoutSystems/anvil/common/AnvilFlexComponent.tsx b/app/client/src/layoutSystems/anvil/common/AnvilFlexComponent.tsx index 21fbb322bc..b7f53efd47 100644 --- a/app/client/src/layoutSystems/anvil/common/AnvilFlexComponent.tsx +++ b/app/client/src/layoutSystems/anvil/common/AnvilFlexComponent.tsx @@ -17,8 +17,6 @@ import { convertFlexGrowToFlexBasis } from "../sectionSpaceDistributor/utils/spa const anvilWidgetStyleProps: CSSProperties = { position: "relative", - // overflow is set to make sure widgets internal components/divs don't overflow this boundary causing scrolls - overflow: "hidden", zIndex: Layers.positionedWidget, // add transition ease-in animation when there is a flexgrow value change transition: "flex-grow 0.1s ease-in", @@ -82,16 +80,24 @@ export const AnvilFlexComponent = forwardRef( flexGrow: isFillWidget ? 1 : 0, flexShrink: isFillWidget ? 1 : 0, flexBasis, - padding: "spacing-1", alignItems: "center", width: "max-content", }; if (widgetSize) { - const { maxHeight, maxWidth, minHeight, minWidth } = widgetSize; + const { + maxHeight, + maxWidth, + minHeight, + minWidth, + paddingBottom, + paddingTop, + } = widgetSize; data.maxHeight = maxHeight; data.maxWidth = maxWidth; data.minHeight = minHeight; data.minWidth = minWidth; + data.paddingTop = paddingTop; + data.paddingBottom = paddingBottom; } return data; }, [widgetConfigProps, widgetSize, flexGrow]); @@ -99,6 +105,7 @@ export const AnvilFlexComponent = forwardRef( // Render the Anvil Flex Component using the Flex component from WDS return ( ; + gap?: Responsive; padding?: Responsive; width?: Responsive; className?: string; @@ -73,6 +73,7 @@ export const FlexLayout = React.memo((props: FlexLayoutProps) => { flexBasis, flexGrow, flexShrink, + gap, height, isContainer, isDropTarget, @@ -88,7 +89,6 @@ export const FlexLayout = React.memo((props: FlexLayoutProps) => { parentDropTarget, position, renderMode, - rowGap, width, wrap, } = props; @@ -124,7 +124,7 @@ export const FlexLayout = React.memo((props: FlexLayoutProps) => { minHeight: minHeight || "unset", minWidth: minWidth || "unset", padding: padding || "spacing-0", - rowGap: rowGap || "0px", + gap: gap || "spacing-3", width: width || "auto", wrap: wrap || "nowrap", className: className || "", @@ -144,7 +144,7 @@ export const FlexLayout = React.memo((props: FlexLayoutProps) => { minHeight, minWidth, padding, - rowGap, + gap, width, wrap, ]); diff --git a/app/client/src/layoutSystems/anvil/layoutComponents/components/alignedWidgetRow/index.tsx b/app/client/src/layoutSystems/anvil/layoutComponents/components/alignedWidgetRow/index.tsx index 50abb014c2..c669ba73aa 100644 --- a/app/client/src/layoutSystems/anvil/layoutComponents/components/alignedWidgetRow/index.tsx +++ b/app/client/src/layoutSystems/anvil/layoutComponents/components/alignedWidgetRow/index.tsx @@ -25,6 +25,7 @@ class AlignedWidgetRow extends BaseLayoutComponent { alignSelf: "stretch", direction: "row", wrap: "wrap", + gap: "spacing-3", className: "aligned-widget-row", }; } diff --git a/app/client/src/layoutSystems/anvil/layoutComponents/components/section/index.tsx b/app/client/src/layoutSystems/anvil/layoutComponents/components/section/index.tsx index 20c1f90aa8..cb95a62686 100644 --- a/app/client/src/layoutSystems/anvil/layoutComponents/components/section/index.tsx +++ b/app/client/src/layoutSystems/anvil/layoutComponents/components/section/index.tsx @@ -26,6 +26,7 @@ class Section extends WidgetRow { ...super.getFlexLayoutProps(), alignSelf: "stretch", direction: "row", + gap: "spacing-4", }; } diff --git a/app/client/src/layoutSystems/anvil/layoutComponents/presets/ModalPreset.tsx b/app/client/src/layoutSystems/anvil/layoutComponents/presets/ModalPreset.tsx index d4a095f3dc..d23af89b10 100644 --- a/app/client/src/layoutSystems/anvil/layoutComponents/presets/ModalPreset.tsx +++ b/app/client/src/layoutSystems/anvil/layoutComponents/presets/ModalPreset.tsx @@ -14,7 +14,6 @@ export const modalPreset = (): LayoutProps[] => { border: "none", height: "100%", minHeight: "sizing-16", - padding: "spacing-1", }, isDropTarget: true, isPermanent: true, diff --git a/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/utils/spaceDistributionEditorUtils.ts b/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/utils/spaceDistributionEditorUtils.ts index a05daae267..79595cbce2 100644 --- a/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/utils/spaceDistributionEditorUtils.ts +++ b/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/utils/spaceDistributionEditorUtils.ts @@ -19,11 +19,10 @@ import { * This is because when representing on the UI, we show column values which add up to SectionColumns * Also space distribution algorithm(redistributeSpaceWithDynamicMinWidth) works with the flex-grow values. */ -export const convertFlexGrowToFlexBasis = ( - flexGrow: number, - columns = SectionColumns, -) => { - return `${(flexGrow / columns) * 100}%`; +export const convertFlexGrowToFlexBasis = (flexGrow: number) => { + const columns = SectionColumns / flexGrow; + // We calculate the total gap count and distribute it proportionally between the zones. + return `calc(100% / ${columns} - (${columns} - 1) * var(--outer-spacing-4) / ${columns})`; }; /** diff --git a/app/client/src/layoutSystems/anvil/utils/AnvilDSLTransformer.ts b/app/client/src/layoutSystems/anvil/utils/AnvilDSLTransformer.ts index 3d033fb242..021f5bcb12 100644 --- a/app/client/src/layoutSystems/anvil/utils/AnvilDSLTransformer.ts +++ b/app/client/src/layoutSystems/anvil/utils/AnvilDSLTransformer.ts @@ -22,7 +22,8 @@ export function anvilDSLTransformer(dsl: DSLWidget) { layoutStyle: { border: "none", height: "100%", - padding: "spacing-1", + padding: "spacing-4", + gap: "spacing-4", }, isDropTarget: true, isPermanent: true, diff --git a/app/client/src/layoutSystems/common/WidgetNamesCanvas/WidgetNameConstants.ts b/app/client/src/layoutSystems/common/WidgetNamesCanvas/WidgetNameConstants.ts index 57d6e7fecb..0f9fb5c14a 100644 --- a/app/client/src/layoutSystems/common/WidgetNamesCanvas/WidgetNameConstants.ts +++ b/app/client/src/layoutSystems/common/WidgetNamesCanvas/WidgetNameConstants.ts @@ -6,8 +6,9 @@ export const WIDGET_NAME_FONT_SIZE = 14; export const WIDGET_NAME_LINE_HEIGHT = Math.floor(WIDGET_NAME_FONT_SIZE * 1.2); export const WIDGET_NAME_VERTICAL_PADDING = 4; export const WIDGET_NAME_HORIZONTAL_PADDING = 6; -export const WIDGET_OUTLINE_OFFSET = 1; +export const WIDGET_OUTLINE_OFFSET = 7; export const WIDGET_NAME_ICON_PADDING = 16; +export const WIDGET_NAME_OFFSET = 6; // 4px — outline-offset and 2px outline-width of selection border export const DEFAULT_WIDGET_NAME_CANVAS_HEIGHT = 600; export const WIDGET_NAME_CANVAS_PADDING = 20; diff --git a/app/client/src/layoutSystems/common/WidgetNamesCanvas/utils.ts b/app/client/src/layoutSystems/common/WidgetNamesCanvas/utils.ts index 120be24d48..9a17406e65 100644 --- a/app/client/src/layoutSystems/common/WidgetNamesCanvas/utils.ts +++ b/app/client/src/layoutSystems/common/WidgetNamesCanvas/utils.ts @@ -12,6 +12,7 @@ import { WIDGET_NAME_TEXT_COLOR, WIDGET_NAME_VERTICAL_PADDING, WIDGET_OUTLINE_OFFSET, + WIDGET_NAME_OFFSET, } from "./WidgetNameConstants"; /** @@ -109,6 +110,7 @@ export const getWidgetNameComponent = ( width: componentWidth, x: left, y: top, + offsetY: WIDGET_NAME_OFFSET, }); groupEl.add(rectEl); diff --git a/app/client/src/widgets/anvil/Container.tsx b/app/client/src/widgets/anvil/Container.tsx index 4b86b7032a..693490a989 100644 --- a/app/client/src/widgets/anvil/Container.tsx +++ b/app/client/src/widgets/anvil/Container.tsx @@ -19,7 +19,6 @@ const StyledContainerComponent = styled.div< outline: none; border: none; position: relative; - border-radius: var(--border-radius-1); /* If the elevatedBackground is true, then apply the elevation styles */ ${(props) => { if (props.elevatedBackground) { @@ -32,8 +31,9 @@ const StyledContainerComponent = styled.div< /* Add padding to the container to maintain the visual spacing rhythm */ /* This is based on the hypothesis of asymmetric padding */ - padding-block: var(--inner-spacing-1); - padding-inline: var(--inner-spacing-1); + padding-block: + ${props.elevation === 1 ? 0 : "var(--outer-spacing-3)"}; + padding-inline: ${props.elevation === 1 ? 0 : "var(--outer-spacing-3)"}; `; } }} diff --git a/app/client/src/widgets/wds/WDSButtonWidget/config/anvilConfig.ts b/app/client/src/widgets/wds/WDSButtonWidget/config/anvilConfig.ts index 169db7b31b..e7869c9a47 100644 --- a/app/client/src/widgets/wds/WDSButtonWidget/config/anvilConfig.ts +++ b/app/client/src/widgets/wds/WDSButtonWidget/config/anvilConfig.ts @@ -5,6 +5,6 @@ export const anvilConfig = { base: "100%", "280px": "sizing-70", }, - minWidth: "sizing-14", + minWidth: "sizing-9", }, }; diff --git a/app/client/src/widgets/wds/WDSCheckboxWidget/config/anvilConfig.ts b/app/client/src/widgets/wds/WDSCheckboxWidget/config/anvilConfig.ts index dc7fe21e10..7e39007129 100644 --- a/app/client/src/widgets/wds/WDSCheckboxWidget/config/anvilConfig.ts +++ b/app/client/src/widgets/wds/WDSCheckboxWidget/config/anvilConfig.ts @@ -3,6 +3,8 @@ import type { AnvilConfig } from "WidgetProvider/constants"; export const anvilConfig: AnvilConfig = { isLargeWidget: false, widgetSize: { + paddingTop: "spacing-3", + paddingBottom: "spacing-3", minWidth: { base: "100%", "180px": "sizing-30", diff --git a/app/client/src/widgets/wds/WDSIconButtonWidget/config/anvilConfig.ts b/app/client/src/widgets/wds/WDSIconButtonWidget/config/anvilConfig.ts index 7e98f5c5d2..776547d87e 100644 --- a/app/client/src/widgets/wds/WDSIconButtonWidget/config/anvilConfig.ts +++ b/app/client/src/widgets/wds/WDSIconButtonWidget/config/anvilConfig.ts @@ -1,6 +1,6 @@ export const anvilConfig = { isLargeWidget: false, widgetSize: { - minWidth: "sizing-10", + minWidth: "sizing-9", }, }; diff --git a/app/client/src/widgets/wds/WDSParagraphWidget/config/anvilConfig.ts b/app/client/src/widgets/wds/WDSParagraphWidget/config/anvilConfig.ts index dc7fe21e10..7e39007129 100644 --- a/app/client/src/widgets/wds/WDSParagraphWidget/config/anvilConfig.ts +++ b/app/client/src/widgets/wds/WDSParagraphWidget/config/anvilConfig.ts @@ -3,6 +3,8 @@ import type { AnvilConfig } from "WidgetProvider/constants"; export const anvilConfig: AnvilConfig = { isLargeWidget: false, widgetSize: { + paddingTop: "spacing-3", + paddingBottom: "spacing-3", minWidth: { base: "100%", "180px": "sizing-30", diff --git a/app/client/src/widgets/wds/WDSParagraphWidget/config/propertyPaneConfig/styleConfig.ts b/app/client/src/widgets/wds/WDSParagraphWidget/config/propertyPaneConfig/styleConfig.ts index 0655215929..75380a1ee0 100644 --- a/app/client/src/widgets/wds/WDSParagraphWidget/config/propertyPaneConfig/styleConfig.ts +++ b/app/client/src/widgets/wds/WDSParagraphWidget/config/propertyPaneConfig/styleConfig.ts @@ -12,14 +12,6 @@ export const propertyPaneStyleConfig = [ controlType: "DROP_DOWN", defaultValue: "body", options: [ - { - label: "Footnote", - value: "footnote", - }, - { - label: "Caption", - value: "caption", - }, { label: "Body", value: "body", diff --git a/app/client/src/widgets/wds/WDSParagraphWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSParagraphWidget/widget/index.tsx index 907c2b82de..61ae72a837 100644 --- a/app/client/src/widgets/wds/WDSParagraphWidget/widget/index.tsx +++ b/app/client/src/widgets/wds/WDSParagraphWidget/widget/index.tsx @@ -65,7 +65,6 @@ class WDSParagraphWidget extends BaseWidget { getWidgetView() { return ( { direction={iconAlign === "end" ? "row-reverse" : "row"} gap="spacing-2" isInner - padding="spacing-3 " > {iconName && iconName !== "(none)" && ( diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/component/styles.module.css b/app/client/src/widgets/wds/WDSStatBoxWidget/component/styles.module.css index 56a5e81f12..f53c111b09 100644 --- a/app/client/src/widgets/wds/WDSStatBoxWidget/component/styles.module.css +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/component/styles.module.css @@ -1,6 +1,4 @@ .statbox { - border: 1px solid var(--color-bd); border-radius: var(--border-radius-elevation-3); width: 100%; - background: var(--color-bg-elevation-2); } diff --git a/app/client/src/widgets/wds/WDSSwitchWidget/config/anvilConfig.ts b/app/client/src/widgets/wds/WDSSwitchWidget/config/anvilConfig.ts index dc7fe21e10..7e39007129 100644 --- a/app/client/src/widgets/wds/WDSSwitchWidget/config/anvilConfig.ts +++ b/app/client/src/widgets/wds/WDSSwitchWidget/config/anvilConfig.ts @@ -3,6 +3,8 @@ import type { AnvilConfig } from "WidgetProvider/constants"; export const anvilConfig: AnvilConfig = { isLargeWidget: false, widgetSize: { + paddingTop: "spacing-3", + paddingBottom: "spacing-3", minWidth: { base: "100%", "180px": "sizing-30", diff --git a/app/client/src/widgets/wds/WDSSwitchWidget/config/defaultsConfig.ts b/app/client/src/widgets/wds/WDSSwitchWidget/config/defaultsConfig.ts index 284b57a0ea..cb1e9af783 100644 --- a/app/client/src/widgets/wds/WDSSwitchWidget/config/defaultsConfig.ts +++ b/app/client/src/widgets/wds/WDSSwitchWidget/config/defaultsConfig.ts @@ -5,7 +5,7 @@ export const defaultsConfig = { label: "Label", defaultSwitchState: true, widgetName: "Switch", - labelPosition: "left", + labelPosition: "start", version: 1, isDisabled: false, animateLoading: true, diff --git a/app/client/src/widgets/wds/WDSSwitchWidget/config/propertyPaneConfig/contentConfig.ts b/app/client/src/widgets/wds/WDSSwitchWidget/config/propertyPaneConfig/contentConfig.ts index e55c6902b2..99836d1c4a 100644 --- a/app/client/src/widgets/wds/WDSSwitchWidget/config/propertyPaneConfig/contentConfig.ts +++ b/app/client/src/widgets/wds/WDSSwitchWidget/config/propertyPaneConfig/contentConfig.ts @@ -21,8 +21,8 @@ export const propertyPaneContentConfig = [ controlType: "ICON_TABS", fullWidth: true, options: [ - { label: "Left", value: "left" }, - { label: "Right", value: "right" }, + { label: "Start", value: "start" }, + { label: "End", value: "end" }, ], defaultValue: "left", isBindProperty: false, diff --git a/app/client/src/widgets/wds/WDSTableWidget/config/anvilConfig.ts b/app/client/src/widgets/wds/WDSTableWidget/config/anvilConfig.ts index 0d4e411ad7..a149763257 100644 --- a/app/client/src/widgets/wds/WDSTableWidget/config/anvilConfig.ts +++ b/app/client/src/widgets/wds/WDSTableWidget/config/anvilConfig.ts @@ -3,7 +3,7 @@ export const anvilConfig = { widgetSize: { minWidth: { base: "100%", - [`280px`]: "sizing-70", + [`280px`]: "sizing-60", }, }, };