SelectList: VR fixes to standardize form fields and match them to Fig…

…ma spacing (#3847)
pinterest · Nov 5, 2024 · fdf4393 · fdf4393
1 parent 5797ca1
commit fdf4393
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 76 deletions.
diff --git a/packages/gestalt/src/SelectList/IconEnd.tsx b/packages/gestalt/src/SelectList/IconEnd.tsx
@@ -14,9 +14,9 @@ export default function IconEnd({ disabled, size }: Props) {
 
   return (
     <div
-      className={classnames(styles.iconEnd, {
-        [styles.md_iconEnd]: isMD,
-        [styles.lg_iconEnd]: isLG,
+      className={classnames(styles.endIconContainer, {
+        [styles.md_endIconContainer]: isMD,
+        [styles.lg_endIconContainer]: isLG,
       })}
     >
       <Box

diff --git a/packages/gestalt/src/SelectList/VRSelectList.css b/packages/gestalt/src/SelectList/VRSelectList.css
@@ -1,11 +1,8 @@
-.input {
-  composes: md mdDefault from "../Text.css";
+/* style */
+
+.inputStyle {
   appearance: none;
   background-color: var(--base-color-transparent);
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-  width: 100%;
 }
 
 .placeholderText {
@@ -54,14 +51,19 @@
   border: 1px solid var(--sema-color-border-disabled);
 }
 
+/* input / label / end icon positioning */
+
 .inputParent {
   border-radius: var(--sema-rounding-300);
   isolation: isolate;
   position: relative;
 }
 
-.visuallyHidden {
+.input {
+  box-sizing: border-box;
+  display: block;
   position: relative;
+  width: 100%;
 }
 
 .label {
@@ -70,110 +72,165 @@
   z-index: 1;
 }
 
-.iconEnd {
+.visuallyHidden {
+  position: relative;
+}
+
+.endIconContainer {
   bottom: var(--sema-space-0);
   position: absolute;
   top: var(--sema-space-0);
 }
 
 /* md */
 
+/* md input */
+
 .md_input {
+  composes: md mdDefault from "../Text.css";
   border-radius: var(--sema-rounding-300);
   min-height: 36px;
-  padding-bottom: var(--sema-space-200);
-}
-
-.md_label {
-  top: calc(var(--sema-space-200) + var(--sema-space-50));
 }
 
 .md_inputLabelPadding {
+  padding-bottom: calc(var(--sema-space-200) - var(--sema-space-25));
   padding-top: calc(
-    var(--sema-space-200) + var(--sema-space-50) +
-      var(--sema-font-lineheight-ui-xs)
+    var(--sema-space-100) + var(--sema-space-150) +
+      var(--sema-font-lineheight-ui-xs) - var(--sema-space-25)
   );
 }
 
 .md_inputNoLabelPadding {
-  padding-top: var(--sema-space-200);
+  padding-bottom: calc(
+    var(--sema-space-100) + var(--sema-space-50) - var(--sema-space-25)
+  );
+  padding-top: calc(
+    var(--sema-space-100) + var(--sema-space-50) - var(--sema-space-25)
+  );
 }
 
-html[dir="rtl"] .md_inputPadding {
-  padding-left: var(--sema-space-900);
+html[dir="rtl"] .md_inputStartPadding {
   padding-right: var(--sema-space-300);
 }
 
-html:not([dir="rtl"]) .md_inputPadding {
+html:not([dir="rtl"]) .md_inputStartPadding {
   padding-left: var(--sema-space-300);
-  padding-right: var(--sema-space-900);
 }
 
-html:not([dir="rtl"]) .md_labelPadding {
-  padding-left: var(--sema-space-300);
-  padding-right: var(--sema-space-900);
+html[dir="rtl"] .md_inputEndButtonEndPadding {
+  padding-left: calc(var(--sema-space-200) + var(--sema-space-600));
 }
 
-html[dir="rtl"] .md_labelPadding {
-  padding-left: var(--sema-space-900);
-  padding-right: var(--sema-space-300);
+html:not([dir="rtl"]) .md_inputEndButtonEndPadding {
+  padding-right: calc(var(--sema-space-200) + var(--sema-space-600));
+}
+
+/* md label */
+
+.md_labelTopPosition {
+  top: calc(
+    var(--sema-space-100) + var(--sema-space-150) - var(--sema-space-25)
+  );
+}
+
+html[dir="rtl"] .md_labelPosition {
+  left: calc(
+    var(--sema-space-200) + var(--sema-space-600) + var(--sema-space-25)
+  );
+  right: calc(var(--sema-space-300) + var(--sema-space-25));
 }
 
-html:not([dir="rtl"]) .md_iconEnd {
+html:not([dir="rtl"]) .md_labelPosition {
+  left: calc(var(--sema-space-300) + var(--sema-space-25));
+  right: calc(
+    var(--sema-space-200) + var(--sema-space-600) + var(--sema-space-25)
+  );
+}
+
+/* md icon end */
+
+html:not([dir="rtl"]) .md_endIconContainer {
   right: var(--sema-space-300);
 }
 
-html[dir="rtl"] .md_iconEnd {
+html[dir="rtl"] .md_endIconContainer {
   left: var(--sema-space-300);
 }
 
 /* lg */
 
+/* lg input */
+
 .lg_input {
+  composes: md mdDefault from "../Text.css";
   border-radius: var(--sema-rounding-400);
   min-height: 48px;
-  padding-bottom: var(--sema-space-300);
-}
-
-.lg_label {
-  top: calc(var(--sema-space-300) + var(--sema-space-100));
 }
 
 .lg_inputLabelPadding {
+  padding-bottom: calc(
+    var(--sema-space-300) + var(--sema-space-50) - var(--sema-space-25)
+  );
   padding-top: calc(
-    var(--sema-space-300) + var(--sema-space-100) + var(--sema-space-100) +
-      var(--sema-font-lineheight-ui-xs)
+    var(--sema-space-300) + var(--sema-space-100) +
+      var(--sema-font-lineheight-ui-xs) + var(--sema-space-100) -
+      var(--sema-space-25)
   );
 }
 
 .lg_inputNoLabelPadding {
-  padding-top: var(--sema-space-300);
+  padding-bottom: calc(
+    var(--sema-space-300) + var(--sema-space-25) - var(--sema-space-25)
+  );
+  padding-top: calc(
+    var(--sema-space-300) + var(--sema-space-25) - var(--sema-space-25)
+  );
 }
 
-html[dir="rtl"] .lg_inputPadding {
-  padding-left: var(--sema-space-1000);
+html[dir="rtl"] .lg_inputStartPadding {
   padding-right: var(--sema-space-400);
 }
 
-html:not([dir="rtl"]) .lg_inputPadding {
+html:not([dir="rtl"]) .lg_inputStartPadding {
   padding-left: var(--sema-space-400);
-  padding-right: var(--sema-space-1000);
 }
 
-html:not([dir="rtl"]) .lg_labelPadding {
-  padding-left: var(--sema-space-400);
-  padding-right: var(--sema-space-1000);
+html[dir="rtl"] .lg_inputEndButtonEndPadding {
+  padding-left: calc(var(--sema-space-300) + var(--sema-space-600));
 }
 
-html[dir="rtl"] .lg_labelPadding {
-  padding-left: var(--sema-space-1000);
-  padding-right: var(--sema-space-400);
+html:not([dir="rtl"]) .lg_inputEndButtonEndPadding {
+  padding-right: calc(var(--sema-space-300) + var(--sema-space-600));
+}
+
+/* md label */
+
+.lg_labelTopPosition {
+  top: calc(
+    var(--sema-space-300) + var(--sema-space-100) - var(--sema-space-25)
+  );
 }
 
-html:not([dir="rtl"]) .lg_iconEnd {
+html[dir="rtl"] .lg_labelPosition {
+  left: calc(
+    var(--sema-space-300) + var(--sema-space-600) + var(--sema-space-25)
+  );
+  right: calc(var(--sema-space-400) + var(--sema-space-25));
+}
+
+html:not([dir="rtl"]) .lg_labelPosition {
+  left: calc(var(--sema-space-400) + var(--sema-space-25));
+  right: calc(
+    var(--sema-space-300) + var(--sema-space-600) + var(--sema-space-25)
+  );
+}
+
+/* lg icon end */
+
+html:not([dir="rtl"]) .lg_endIconContainer {
   right: var(--sema-space-400);
 }
 
-html[dir="rtl"] .lg_iconEnd {
+html[dir="rtl"] .lg_endIconContainer {
   left: var(--sema-space-400);
 }
diff --git a/packages/gestalt/src/SelectList/VRSelectList.tsx b/packages/gestalt/src/SelectList/VRSelectList.tsx
@@ -122,11 +122,11 @@ const SelectListWithForwardRef = forwardRef<HTMLSelectElement, Props>(function I
             className={classnames(styles.label, {
               [boxStyles.visuallyHidden]: !isLabelVisible,
               // md
-              [styles.md_label]: isMD,
-              [styles.md_labelPadding]: isMD,
+              [styles.md_labelTopPosition]: isMD,
+              [styles.md_labelPosition]: isMD,
               // lg
-              [styles.lg_label]: isLG,
-              [styles.lg_labelPadding]: isLG,
+              [styles.lg_labelTopPosition]: isLG,
+              [styles.lg_labelPosition]: isLG,
             })}
             htmlFor={id}
             title={ellipsisActive ? label : ''}
@@ -146,7 +146,7 @@ const SelectListWithForwardRef = forwardRef<HTMLSelectElement, Props>(function I
         <select
           aria-describedby={focused ? ariaDescribedby : undefined}
           aria-invalid={hasErrorMessage ? 'true' : 'false'}
-          className={classnames(styles.input, typographyStyle.truncate, {
+          className={classnames(styles.input, styles.inputStyle, typographyStyle.truncate, {
             [styles.placeholderText]: !disabled && placeholder && !value,
             [styles.enabledText]:
               (!disabled && placeholder && value) || (!disabled && !placeholder),
@@ -157,11 +157,15 @@ const SelectListWithForwardRef = forwardRef<HTMLSelectElement, Props>(function I
             // md
             [styles.md_input]: isMD,
             [styles.md_inputPadding]: isMD,
+            [styles.md_inputStartPadding]: isMD,
+            [styles.md_inputEndButtonEndPadding]: isMD,
             [styles.md_inputLabelPadding]: isMD && label && isLabelVisible,
             [styles.md_inputNoLabelPadding]: isMD && (!label || (label && !isLabelVisible)),
             // lg
             [styles.lg_input]: isLG,
             [styles.lg_inputPadding]: isLG,
+            [styles.lg_inputStartPadding]: isLG,
+            [styles.lg_inputEndButtonEndPadding]: isLG,
             [styles.lg_inputLabelPadding]: isLG && label && isLabelVisible,
             [styles.lg_inputNoLabelPadding]: isLG && (!label || (label && !isLabelVisible)),
           })}

diff --git a/packages/gestalt/src/TextField/VRInternalTextField.css b/packages/gestalt/src/TextField/VRInternalTextField.css
@@ -206,16 +206,6 @@ html:not([dir="rtl"]) .md_inputEndButtonEndPadding {
   padding-right: calc(var(--sema-space-200) + var(--sema-space-600));
 }
 
-/* md icon end */
-
-html:not([dir="rtl"]) .md_endIconContainer {
-  right: var(--sema-space-300);
-}
-
-html[dir="rtl"] .md_endIconContainer {
-  left: var(--sema-space-300);
-}
-
 /* md label */
 
 .md_labelTopPosition {
@@ -238,6 +228,16 @@ html:not([dir="rtl"]) .md_labelPosition {
   );
 }
 
+/* md icon end */
+
+html:not([dir="rtl"]) .md_endIconContainer {
+  right: var(--sema-space-300);
+}
+
+html[dir="rtl"] .md_endIconContainer {
+  left: var(--sema-space-300);
+}
+
 /* lg */
 
 /* lg input */
@@ -292,16 +292,6 @@ html:not([dir="rtl"]) .lg_inputEndButtonEndPadding {
   padding-right: calc(var(--sema-space-300) + var(--sema-space-600));
 }
 
-/* lg icon end */
-
-html:not([dir="rtl"]) .lg_endIconContainer {
-  right: var(--sema-space-300);
-}
-
-html[dir="rtl"] .lg_endIconContainer {
-  left: var(--sema-space-300);
-}
-
 /* lg label */
 
 .lg_labelTopPosition {
@@ -323,3 +313,13 @@ html:not([dir="rtl"]) .lg_labelPosition {
     var(--sema-space-300) + var(--sema-space-600) + var(--sema-space-25)
   );
 }
+
+/* lg icon end */
+
+html:not([dir="rtl"]) .lg_endIconContainer {
+  right: var(--sema-space-300);
+}
+
+html[dir="rtl"] .lg_endIconContainer {
+  left: var(--sema-space-300);
+}