Padding Quiet select input (#2658)

* build: change padding for select input when the appearance is Quiet * chore: changeset * chore: updating changeset
commercetools · Dec 4, 2023 · e7981d9 · e7981d9 · vercel · Dec 4, 2023
1 parent 237f5bd
commit e7981d9
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 1 deletion.
diff --git a/.changeset/lemon-keys-double.md b/.changeset/lemon-keys-double.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/select-utils': patch
+'@commercetools-uikit/design-system': patch
+---
+
+Use smaller padding for `SelectInput` component when the appearance is `quiet`.
diff --git a/design-system/materials/custom-properties.css b/design-system/materials/custom-properties.css
@@ -585,6 +585,7 @@
   --padding-for-collapsible-panel-section-description-as-condensed: 0 0
     var(--spacing-40);
   --padding-for-input: 16px;
+  --padding-for-input-as-quiet: 8px;
   --padding-for-multiline-input: 8px;
   --padding-for-localized-rich-text-input-label: var(--spacing-20) 12px;
   --padding-for-localized-rich-text-dropdown-button: 5px var(--spacing-20);

diff --git a/design-system/materials/custom-properties.json b/design-system/materials/custom-properties.json
@@ -469,6 +469,7 @@
   "--padding-for-collapsible-panel-section-description": "0 0 var(--spacing-40)",
   "--padding-for-collapsible-panel-section-description-as-condensed": "0 0 var(--spacing-40)",
   "--padding-for-input": "16px",
+  "--padding-for-input-as-quiet": "8px",
   "--padding-for-multiline-input": "8px",
   "--padding-for-localized-rich-text-input-label": "var(--spacing-20) 12px",
   "--padding-for-localized-rich-text-dropdown-button": "5px var(--spacing-20)",

diff --git a/design-system/materials/internals/definition.yaml b/design-system/materials/internals/definition.yaml
@@ -1188,6 +1188,8 @@ decisionGroupsByTheme:
           choice: '0 0 var(--spacing-40)'
         padding-for-input:
           choice: spacing-30
+        padding-for-input-as-quiet:
+          choice: spacing-20
         padding-for-multiline-input:
           choice: spacing-20
         padding-for-localized-rich-text-input-label:

diff --git a/design-system/src/design-tokens.ts b/design-system/src/design-tokens.ts
@@ -503,6 +503,7 @@ export const themes = {
     paddingForCollapsiblePanelSectionDescriptionAsCondensed:
       '0 0 var(--spacing-40)',
     paddingForInput: '16px',
+    paddingForInputAsQuiet: '8px',
     paddingForMultilineInput: '8px',
     paddingForLocalizedRichTextInputLabel: 'var(--spacing-20) 12px',
     paddingForLocalizedRichTextDropdownButton: '5px var(--spacing-20)',
@@ -1281,6 +1282,7 @@ const designTokens = {
   paddingForCollapsiblePanelSectionDescriptionAsCondensed:
     'var(--padding-for-collapsible-panel-section-description-as-condensed, 0 0 var(--spacing-40))',
   paddingForInput: 'var(--padding-for-input, 16px)',
+  paddingForInputAsQuiet: 'var(--padding-for-input-as-quiet, 8px)',
   paddingForMultilineInput: 'var(--padding-for-multiline-input, 8px)',
   paddingForLocalizedRichTextInputLabel:
     'var(--padding-for-localized-rich-text-input-label, var(--spacing-20) 12px)',

diff --git a/packages/components/inputs/select-utils/src/create-select-styles.ts b/packages/components/inputs/select-utils/src/create-select-styles.ts
@@ -136,7 +136,10 @@ const controlStyles = (props: TProps) => (base: TBase, state: TState) => {
       if (props.isReadOnly) return 'default';
       return 'pointer';
     })(),
-    padding: `0 ${designTokens.paddingForInput}`,
+    padding:
+      props.appearance === 'quiet'
+        ? `0 ${designTokens.paddingForInputAsQuiet}`
+        : `0 ${designTokens.paddingForInput}`,
     transition: `border-color ${designTokens.transitionStandard},
     box-shadow ${designTokens.transitionStandard}`,
     outline: 0,