DateField: VR fixes to standardize form fields and match them to Figm…

…a spacing (#3855)
pinterest · Nov 6, 2024 · 23f12b8 · 23f12b8
1 parent e442122
commit 23f12b8
Show file tree

Hide file tree

Showing 2 changed files with 144 additions and 85 deletions.
diff --git a/packages/gestalt-datepicker/src/DateField/VRInternalDateField.css b/packages/gestalt-datepicker/src/DateField/VRInternalDateField.css
@@ -1,25 +1,4 @@
-.outerWrapper {
-  width: 100%;
-}
-
-.inputParent {
-  isolation: isolate;
-  position: relative;
-  width: 100%;
-}
-
-.input {
-  box-sizing: border-box;
-  display: block;
-  font-family: var(--sema-font-family-body-md);
-  font-size: var(--sema-font-size-body-md);
-  font-weight: var(--sema-font-weight-body-md-default);
-  letter-spacing: var(--sema-font-letterspacing-body-md);
-  line-height: var(--sema-font-lineheight-body-md);
-  position: relative;
-  text-decoration: var(--sema-font-textdecoration-body-md-default);
-  width: 100%;
-}
+/* style */
 
 .enabledText {
   color: var(--sema-color-text-default);
@@ -63,8 +42,29 @@
   border: 1px solid var(--sema-color-border-disabled);
 }
 
-.visuallyHidden {
+/* input / label / end icon positioning */
+
+.outerWrapper {
+  width: 100%;
+}
+
+.inputParent {
+  isolation: isolate;
   position: relative;
+  width: 100%;
+}
+
+.input {
+  box-sizing: border-box;
+  display: block;
+  font-family: var(--sema-font-family-body-md);
+  font-size: var(--sema-font-size-body-md);
+  font-weight: var(--sema-font-weight-body-md-default);
+  letter-spacing: var(--sema-font-letterspacing-body-md);
+  line-height: var(--sema-font-lineheight-body-md);
+  position: relative;
+  text-decoration: var(--sema-font-textdecoration-body-md-default);
+  width: 100%;
 }
 
 .label {
@@ -73,7 +73,11 @@
   z-index: 1;
 }
 
-.clearButtonContainer {
+.visuallyHidden {
+  position: relative;
+}
+
+.endIconContainer {
   align-items: center;
   bottom: var(--sema-space-0);
   display: flex;
@@ -84,116 +88,167 @@
 
 /* md */
 
+/* md input */
+
 .md_input {
   border-radius: var(--sema-rounding-300);
   min-height: 36px;
-  padding-bottom: var(--sema-space-200);
 }
 
 .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_inputHorizontalPadding {
-  padding-left: calc(
-    var(--sema-space-200) + var(--sema-space-400) + var(--sema-space-100)
-  );
+html[dir="rtl"] .md_inputStartPadding {
   padding-right: var(--sema-space-300);
 }
 
-html:not([dir="rtl"]) .md_inputHorizontalPadding {
+html:not([dir="rtl"]) .md_inputStartPadding {
   padding-left: var(--sema-space-300);
-  padding-right: calc(
-    var(--sema-space-200) + var(--sema-space-400) + var(--sema-space-100)
-  );
 }
 
-.md_label {
-  top: calc(var(--sema-space-200) + var(--sema-space-50));
+html[dir="rtl"] .md_inputNoEndButtonEndPadding {
+  padding-left: var(--sema-space-200);
+}
+
+html:not([dir="rtl"]) .md_inputNoEndButtonEndPadding {
+  padding-right: var(--sema-space-200);
+}
+
+html[dir="rtl"] .md_inputEndButtonEndPadding {
+  padding-left: calc(var(--sema-space-200) + var(--sema-space-600));
 }
 
-html[dir="rtl"] .md_label {
+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-400) + var(--sema-space-100)
+    var(--sema-space-200) + var(--sema-space-600) + var(--sema-space-25)
   );
-  right: var(--sema-space-300);
+  right: calc(var(--sema-space-300) + var(--sema-space-25));
 }
 
-html:not([dir="rtl"]) .md_label {
-  left: var(--sema-space-300);
+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-400) + var(--sema-space-100)
+    var(--sema-space-200) + var(--sema-space-600) + var(--sema-space-25)
   );
 }
 
-html:not([dir="rtl"]) .md_clearButtonContainer {
+/* md icon end */
+
+html:not([dir="rtl"]) .md_endIconContainer {
   right: calc(var(--sema-space-200) + var(--sema-space-100));
 }
 
-html[dir="rtl"] .md_clearButtonContainer {
+html[dir="rtl"] .md_endIconContainer {
   left: calc(var(--sema-space-200) + var(--sema-space-100));
 }
 
 /* lg */
 
+/* lg input */
+
 .lg_input {
   border-radius: var(--sema-rounding-400);
   min-height: 48px;
-  padding-bottom: var(--sema-space-300);
 }
 
 .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-font-lineheight-ui-xs) + 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_inputHorizontalPadding {
-  padding-left: calc(
-    var(--sema-space-300) + var(--sema-space-400) + var(--sema-space-100)
-  );
+html[dir="rtl"] .lg_inputStartPadding {
   padding-right: var(--sema-space-400);
 }
 
-html:not([dir="rtl"]) .lg_inputHorizontalPadding {
+html:not([dir="rtl"]) .lg_inputStartPadding {
   padding-left: var(--sema-space-400);
-  padding-right: calc(
-    var(--sema-space-300) + var(--sema-space-400) + var(--sema-space-100)
-  );
 }
 
-.lg_label {
-  top: calc(var(--sema-space-300) + var(--sema-space-100));
+html[dir="rtl"] .lg_inputNoEndButtonEndPadding {
+  padding-left: var(--sema-space-300);
+}
+
+html:not([dir="rtl"]) .lg_inputNoEndButtonEndPadding {
+  padding-right: var(--sema-space-300);
+}
+
+html[dir="rtl"] .lg_inputEndButtonEndPadding {
+  padding-left: calc(var(--sema-space-300) + var(--sema-space-600));
 }
 
-html[dir="rtl"] .lg_label {
-  left: var(--sema-space-300) + var(--sema-space-400) + var(--sema-space-100);
-  right: var(--sema-space-400);
+html:not([dir="rtl"]) .lg_inputEndButtonEndPadding {
+  padding-right: calc(var(--sema-space-300) + var(--sema-space-600));
 }
 
-html:not([dir="rtl"]) .lg_label {
-  left: var(--sema-space-400);
+/* lg label */
+
+.lg_labelTopPosition {
+  top: calc(
+    var(--sema-space-300) + var(--sema-space-100) - var(--sema-space-25)
+  );
+}
+
+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-400) + var(--sema-space-100)
+    var(--sema-space-300) + var(--sema-space-600) + var(--sema-space-25)
   );
 }
 
-html:not([dir="rtl"]) .lg_clearButtonContainer {
-  right: calc(var(--sema-space-300) + var(--sema-space-100));
+/* lg icon end */
+
+html:not([dir="rtl"]) .lg_endIconContainer {
+  right: var(--sema-space-300);
 }
 
-html[dir="rtl"] .lg_clearButtonContainer {
-  left: calc(var(--sema-space-300) + var(--sema-space-100));
+html[dir="rtl"] .lg_endIconContainer {
+  left: var(--sema-space-300);
 }
diff --git a/packages/gestalt-datepicker/src/DateField/VRInternalDateField.tsx b/packages/gestalt-datepicker/src/DateField/VRInternalDateField.tsx
@@ -94,20 +94,21 @@ const CustomTextField = forwardRef(
     const isLabelVisible = ownerState?.passthroughProps?.labelDisplay === 'visible';
     const hasErrorMessage = Boolean(ownerState?.passthroughProps?.errorMessage);
 
-    const isMd = ownerState?.passthroughProps?.size === 'md';
-    const isLg = ownerState?.passthroughProps?.size === 'lg';
+    const isMD = ownerState?.passthroughProps?.size === 'md';
+    const isLG = ownerState?.passthroughProps?.size === 'lg';
 
     return (
       <div className={classnames(stylesTextfield.inputParent)}>
         {ownerState?.passthroughProps?.label && (
           <label
             className={classnames(stylesTextfield.label, {
               [stylesTextfield.visuallyHidden]: !isLabelVisible,
-
               // md
-              [stylesTextfield.md_label]: isMd,
+              [stylesTextfield.md_labelTopPosition]: isMD,
+              [stylesTextfield.md_labelPosition]: isMD,
               // lg
-              [stylesTextfield.lg_label]: isLg,
+              [stylesTextfield.lg_labelTopPosition]: isLG,
+              [stylesTextfield.lg_labelPosition]: isLG,
             })}
             htmlFor={ownerState?.passthroughProps?.id}
           >
@@ -128,22 +129,25 @@ const CustomTextField = forwardRef(
             [stylesTextfield.disabledText]: disabled,
             [stylesTextfield.disabledBorder]: disabled,
             // md
-            [stylesTextfield.md_input]: isMd,
-            [stylesTextfield.md_inputHorizontalPadding]: isMd,
+            [stylesTextfield.md_input]: isMD,
+            [stylesTextfield.md_inputEndButtonEndPadding]: isMD,
             [stylesTextfield.md_inputLabelPadding]:
-              isMd && ownerState?.passthroughProps?.label && isLabelVisible,
+              isMD && ownerState?.passthroughProps?.label && isLabelVisible,
             [stylesTextfield.md_inputNoLabelPadding]:
-              isMd &&
+              isMD &&
               (!ownerState?.passthroughProps?.label ||
                 (ownerState?.passthroughProps?.label && !isLabelVisible)),
-            [stylesTextfield.lg_input]: isLg,
-            [stylesTextfield.lg_inputHorizontalPadding]: isLg,
+            [stylesTextfield.md_inputStartPadding]: isMD,
+            // lg
+            [stylesTextfield.lg_input]: isLG,
+            [stylesTextfield.lg_inputEndButtonEndPadding]: isLG,
             [stylesTextfield.lg_inputLabelPadding]:
-              isLg && ownerState?.passthroughProps?.label && isLabelVisible,
+              isLG && ownerState?.passthroughProps?.label && isLabelVisible,
             [stylesTextfield.lg_inputNoLabelPadding]:
-              isLg &&
+              isLG &&
               (!ownerState?.passthroughProps?.label ||
                 (ownerState?.passthroughProps?.label && !isLabelVisible)),
+            [stylesTextfield.lg_inputStartPadding]: isLG,
           })}
           disabled={disabled}
           enterKeyHint={ownerState?.passthroughProps?.enterKeyHint}
@@ -162,9 +166,9 @@ const CustomTextField = forwardRef(
         />
         {!disabled && !readOnly && ownerState?.passthroughProps?.onClearInput ? (
           <div
-            className={classnames(stylesTextfield.clearButtonContainer, {
-              [stylesTextfield.md_clearButtonContainer]: isMd,
-              [stylesTextfield.lg_clearButtonContainer]: isLg,
+            className={classnames(stylesTextfield.endIconContainer, {
+              [stylesTextfield.md_endIconContainer]: isMD,
+              [stylesTextfield.lg_endIconContainer]: isLG,
             })}
           >
             <TapArea