fix(Label): consistent gutter spacing

lumada-design · Dec 12, 2024 · 1623164 · 1623164
1 parent 75efe8d
commit 1623164
Show file tree

Hide file tree

Showing 31 changed files with 35 additions and 35 deletions.
diff --git a/packages/core/src/CheckBoxGroup/CheckBoxGroup.styles.tsx b/packages/core/src/CheckBoxGroup/CheckBoxGroup.styles.tsx
@@ -8,7 +8,7 @@ export const { staticClasses, useClasses } = createClasses("HvCheckBoxGroup", {
     overflowClipMargin: 4,
     verticalAlign: "top",
   },
-  label: { marginBottom: theme.space.xs },
+  label: {},
   group: { display: "flex" },
   vertical: {
     flexDirection: "column",

diff --git a/packages/core/src/CheckBoxGroup/CheckBoxGroup.tsx b/packages/core/src/CheckBoxGroup/CheckBoxGroup.tsx
@@ -362,6 +362,7 @@ export const HvCheckBoxGroup = forwardRef<HTMLDivElement, HvCheckBoxGroupProps>(
       >
         {label && (
           <HvLabel
+            showGutter
             id={setId(elementId, "label")}
             label={label}
             className={classes.label}

diff --git a/packages/core/src/ColorPicker/ColorPicker.styles.tsx b/packages/core/src/ColorPicker/ColorPicker.styles.tsx
@@ -6,11 +6,7 @@ export const { staticClasses, useClasses } = createClasses("HvColorPicker", {
     display: "flex",
     alignItems: "flex-start",
   },
-  label: {
-    paddingBottom: "6px",
-    display: "block",
-    cursor: "pointer",
-  },
+  label: {},
   description: {},
   headerColorValue: {
     textTransform: "uppercase",

diff --git a/packages/core/src/ColorPicker/ColorPicker.tsx b/packages/core/src/ColorPicker/ColorPicker.tsx
@@ -229,6 +229,7 @@ export const HvColorPicker = forwardRef<HTMLDivElement, HvColorPickerProps>(
           <div className={classes.labelContainer}>
             {hasLabel && (
               <HvLabel
+                showGutter
                 id={setId(elementId, "label")}
                 label={label}
                 className={classes.label}

diff --git a/packages/core/src/DatePicker/DatePicker.styles.tsx b/packages/core/src/DatePicker/DatePicker.styles.tsx
@@ -15,10 +15,7 @@ export const { staticClasses, useClasses } = createClasses("HvDatePicker", {
     display: "flex",
     alignItems: "flex-start",
   },
-  label: {
-    paddingBottom: "6px",
-    display: "block",
-  },
+  label: {},
   description: {},
   error: {},
 

diff --git a/packages/core/src/DatePicker/DatePicker.tsx b/packages/core/src/DatePicker/DatePicker.tsx
@@ -449,6 +449,7 @@ export const HvDatePicker = forwardRef<HTMLDivElement, HvDatePickerProps>(
           <div className={classes.labelContainer}>
             {hasLabel && (
               <HvLabel
+                showGutter
                 id={setId(elementId, "label")}
                 label={label}
                 className={classes.label}

diff --git a/packages/core/src/Dropdown/Dropdown.styles.tsx b/packages/core/src/Dropdown/Dropdown.styles.tsx
@@ -8,7 +8,7 @@ export const { staticClasses, useClasses } = createClasses("HvDropdown", {
     display: "inline-block",
   },
   labelContainer: { display: "flex", alignItems: "flex-start" },
-  label: { paddingBottom: "6px", display: "block" },
+  label: {},
   description: {},
   error: {},
   placeholder: {

diff --git a/packages/core/src/Dropdown/Dropdown.tsx b/packages/core/src/Dropdown/Dropdown.tsx
@@ -462,6 +462,7 @@ export const HvDropdown = fixedForwardRef(function HvDropdown<
         <div className={classes.labelContainer}>
           {hasLabel && (
             <HvLabel
+              showGutter
               id={setId(elementId, "label")}
               label={label}
               className={classes.label}

diff --git a/packages/core/src/FileUploader/DropZone/DropZone.styles.tsx b/packages/core/src/FileUploader/DropZone/DropZone.styles.tsx
@@ -79,9 +79,7 @@ export const { staticClasses, useClasses } = createClasses("HvDropZone", {
     margin: "auto",
     marginRight: theme.space.xs,
   },
-  dropZoneLabel: {
-    paddingBottom: 6,
-  },
+  dropZoneLabel: {},
   dragText: {
     ...(theme.typography.body as React.CSSProperties),
   },

diff --git a/packages/core/src/FileUploader/DropZone/DropZone.tsx b/packages/core/src/FileUploader/DropZone/DropZone.tsx
@@ -185,6 +185,7 @@ export const HvDropZone = (props: HvDropZoneProps) => {
       {!hideLabels && (
         <div id={id} className={classes.dropZoneLabelsGroup}>
           <HvLabel
+            showGutter
             id={setId(id, "input-file-label")}
             htmlFor={setId(id, "input-file")}
             label={labels?.dropzone}

diff --git a/packages/core/src/FilterGroup/FilterGroup.styles.tsx b/packages/core/src/FilterGroup/FilterGroup.styles.tsx
@@ -2,10 +2,7 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 
 export const { staticClasses, useClasses } = createClasses("HvFilterGroup", {
   root: {},
-  label: {
-    display: "flex",
-    alignItems: "flex-start",
-  },
+  label: {},
   labelContainer: { display: "flex", alignItems: "flex-start" },
   description: {},
   error: {},

diff --git a/packages/core/src/FilterGroup/FilterGroup.tsx b/packages/core/src/FilterGroup/FilterGroup.tsx
@@ -181,6 +181,7 @@ export const HvFilterGroup = forwardRef<HTMLDivElement, HvFilterGroupProps>(
           <div className={classes.labelContainer}>
             {hasLabel && (
               <HvLabel
+                showGutter
                 id={setId(elementId, "label")}
                 htmlFor={setId(elementId, "input")}
                 label={label}

diff --git a/packages/core/src/FormElement/Label/Label.styles.tsx b/packages/core/src/FormElement/Label/Label.styles.tsx
@@ -4,5 +4,5 @@ import { theme } from "@hitachivantara/uikit-styles";
 export const { staticClasses, useClasses } = createClasses("HvLabel", {
   root: { fontWeight: theme.fontWeights.normal, display: "inline-block" },
   labelDisabled: { color: theme.colors.secondary_60 },
-  childGutter: { paddingBottom: "6px" },
+  childGutter: { paddingBottom: 4 },
 });
diff --git a/packages/core/src/FormElement/Label/Label.tsx b/packages/core/src/FormElement/Label/Label.tsx
@@ -19,6 +19,8 @@ export interface HvLabelProps extends HvTypographyProps<"label"> {
   id?: string;
   /** The text to be shown by the label. */
   label?: React.ReactNode;
+  /** Whether to give label gutter spacing */
+  showGutter?: boolean;
   /** The id of the form element the label is bound to. */
   htmlFor?: string;
   /** If `true` the label is displayed with a disabled style. */
@@ -39,6 +41,7 @@ export const HvLabel = (props: HvLabelProps) => {
     className,
     children,
     label,
+    showGutter,
     disabled: disabledProp,
     required: requiredProp,
     htmlFor: htmlForProp,
@@ -62,8 +65,8 @@ export const HvLabel = (props: HvLabelProps) => {
         className={cx(
           classes.root,
           {
-            [classes.labelDisabled]: !!disabled,
-            [classes.childGutter]: !!(children && label),
+            [classes.labelDisabled]: disabled,
+            [classes.childGutter]: showGutter || (children && label),
           },
           className,
         )}

diff --git a/packages/core/src/Input/Input.styles.tsx b/packages/core/src/Input/Input.styles.tsx
@@ -6,7 +6,7 @@ import { suggestionsClasses } from "../FormElement/Suggestions";
 export const { staticClasses, useClasses } = createClasses("HvInput", {
   root: { display: "block" },
   labelContainer: { display: "flex", alignItems: "flex-start" },
-  label: { paddingBottom: "6px", display: "block" },
+  label: {},
   description: {},
   adornmentsBox: {
     display: "flex",

diff --git a/packages/core/src/Input/Input.tsx b/packages/core/src/Input/Input.tsx
@@ -787,6 +787,7 @@ export const HvInput = fixedForwardRef(function HvInput<
         <div className={classes.labelContainer}>
           {hasLabel && (
             <HvLabel
+              showGutter
               id={setId(elementId, "label")}
               className={classes.label}
               htmlFor={setId(elementId, "input")}

diff --git a/packages/core/src/RadioGroup/RadioGroup.styles.tsx b/packages/core/src/RadioGroup/RadioGroup.styles.tsx
@@ -8,7 +8,7 @@ export const { staticClasses, useClasses } = createClasses("HvRadioGroup", {
     overflowClipMargin: 4,
     verticalAlign: "top",
   },
-  label: { marginBottom: theme.space.xs },
+  label: {},
   group: { display: "flex" },
   vertical: {
     flexDirection: "column",

diff --git a/packages/core/src/RadioGroup/RadioGroup.tsx b/packages/core/src/RadioGroup/RadioGroup.tsx
@@ -250,6 +250,7 @@ export const HvRadioGroup = forwardRef<HTMLDivElement, HvRadioGroupProps>(
       >
         {label && (
           <HvLabel
+            showGutter
             id={setId(elementId, "label")}
             label={label}
             className={classes.label}

diff --git a/packages/core/src/Select/Select.styles.ts b/packages/core/src/Select/Select.styles.ts
@@ -17,10 +17,7 @@ export const { staticClasses, useClasses } = createClasses("HvSelect", {
     display: "flex",
     alignItems: "flex-start",
   },
-  label: {
-    display: "block",
-    paddingBottom: 6,
-  },
+  label: {},
   description: {},
   select: {},
   popper: {

diff --git a/packages/core/src/Select/Select.tsx b/packages/core/src/Select/Select.tsx
@@ -244,6 +244,7 @@ export const HvSelect = fixedForwardRef(function HvSelect<
         <div className={classes.labelContainer}>
           {label && (
             <HvLabel
+              showGutter
               id={labelId}
               htmlFor={id}
               label={label}

diff --git a/packages/core/src/SelectionList/SelectionList.styles.tsx b/packages/core/src/SelectionList/SelectionList.styles.tsx
@@ -11,7 +11,7 @@ export const { staticClasses, useClasses } = createClasses("HvSelectionList", {
     width: "100%",
     paddingBottom: theme.space.xs,
   },
-  label: { marginBottom: theme.space.xs, float: "left" },
+  label: {},
   description: { float: "left" },
   horizontal: {
     flexDirection: "row",

diff --git a/packages/core/src/SelectionList/SelectionList.tsx b/packages/core/src/SelectionList/SelectionList.tsx
@@ -314,6 +314,7 @@ export const HvSelectionList = forwardRef<
     >
       {label && (
         <HvLabel
+          showGutter
           id={setId(elementId, "label")}
           label={label}
           className={classes.label}

diff --git a/packages/core/src/Switch/Switch.styles.tsx b/packages/core/src/Switch/Switch.styles.tsx
@@ -7,7 +7,7 @@ export const { staticClasses, useClasses } = createClasses("HvSwitch", {
     flexDirection: "column",
     alignItems: "flex-start",
   },
-  label: { marginBottom: theme.space.xs },
+  label: {},
   error: {},
   switchContainer: {
     height: "32px",

diff --git a/packages/core/src/Switch/Switch.tsx b/packages/core/src/Switch/Switch.tsx
@@ -222,6 +222,7 @@ export const HvSwitch = forwardRef<HTMLButtonElement, HvSwitchProps>(
       >
         {label && (
           <HvLabel
+            showGutter
             id={setId(elementId, "label")}
             htmlFor={setId(elementId, "input")}
             label={label}

diff --git a/packages/core/src/TagsInput/TagsInput.styles.tsx b/packages/core/src/TagsInput/TagsInput.styles.tsx
@@ -51,7 +51,7 @@ export const { staticClasses, useClasses } = createClasses("HvTagsInput", {
   resizable: { width: "auto", resize: "both", overflow: "auto" },
   invalid: {},
   labelContainer: { float: "left", display: "flex", alignItems: "flex-start" },
-  label: { display: "block", float: "left", paddingBottom: "6px" },
+  label: {},
   description: { display: "block", float: "left" },
   characterCounter: {
     display: "block",

diff --git a/packages/core/src/TagsInput/TagsInput.tsx b/packages/core/src/TagsInput/TagsInput.tsx
@@ -561,6 +561,7 @@ export const HvTagsInput = forwardRef<HTMLUListElement, HvTagsInputProps>(
           <div className={classes.labelContainer}>
             {hasLabel && (
               <HvLabel
+                showGutter
                 className={classes.label}
                 id={setId(id, "label")}
                 htmlFor={setId(elementId, "input")}

diff --git a/packages/core/src/TextArea/TextArea.styles.tsx b/packages/core/src/TextArea/TextArea.styles.tsx
@@ -9,7 +9,7 @@ export const { staticClasses, useClasses } = createClasses("HvTextArea", {
   input: {},
   inputResizable: { width: "100%", resize: "both" },
   labelContainer: { float: "left", display: "flex", alignItems: "flex-start" },
-  label: { display: "block", float: "left", paddingBottom: "6px" },
+  label: {},
   description: { display: "block", float: "left" },
   characterCounter: {
     display: "block",

diff --git a/packages/core/src/TextArea/TextArea.tsx b/packages/core/src/TextArea/TextArea.tsx
@@ -433,6 +433,7 @@ export const HvTextArea = forwardRef<
         <div className={classes.labelContainer}>
           {hasLabel && (
             <HvLabel
+              showGutter
               className={classes.label}
               id={setId(id, "label")}
               htmlFor={setId(elementId, "input")}

diff --git a/packages/core/src/TimePicker/TimePicker.styles.ts b/packages/core/src/TimePicker/TimePicker.styles.ts
@@ -10,10 +10,7 @@ export const { useClasses, staticClasses } = createClasses("HvTimePicker", {
     display: "flex",
     alignItems: "flex-start",
   },
-  label: {
-    marginBottom: 6,
-    display: "block",
-  },
+  label: {},
   description: {},
 
   placeholder: {

diff --git a/packages/core/src/TimePicker/TimePicker.tsx b/packages/core/src/TimePicker/TimePicker.tsx
@@ -237,6 +237,7 @@ export const HvTimePicker = forwardRef<HTMLDivElement, HvTimePickerProps>(
           <div className={classes.labelContainer}>
             {label && (
               <HvLabel
+                showGutter
                 label={label}
                 className={classes.label}
                 {...labelProps}

diff --git a/packages/styles/src/themes/ds3.ts b/packages/styles/src/themes/ds3.ts
@@ -996,6 +996,7 @@ const ds3 = makeTheme((theme) => ({
     HvLabel: {
       classes: {
         root: { fontWeight: theme.fontWeights.semibold },
+        childGutter: { paddingBottom: 6 },
       },
     },
     HvList: {