feat(CheckBox, Radio, Switch): add labelPosition prop (#4898)

* feat(CheckBox,Radio,Switch): add `labelPosition` prop

feat(CheckBox,Radio,Switch): add `labelPosition` prop

* fix: keep default label position top to avoid visual breaking changes and fix label hover style

---------

Co-authored-by: francisco-guilherme <[email protected]>

Author: plagoa

apps/docs/src/app/examples/switches/CustomSwitch.tsx

@@ -3,7 +3,6 @@ title: "Switches"
 ---
 
 import { CodeBlock } from "../../../components/code/CodeBlock";
-import CustomSwitch from "./CustomSwitch?raw";
 import SwitchWithIcon from "./SwitchWithIcon?raw";
 
 ### Switch Components
@@ -12,11 +11,6 @@ Explore different switch types and features.
 
 <div className="overflow-hidden mt-20">
   <div className="w-101% grid divide-border [grid-template-columns:repeat(auto-fit,minmax(360px,1fr))] -mt-px -mb-px auto-rows-min [&>*]:min-h-[200px]">
-    <CodeBlock
-      code={{ main: CustomSwitch }}
-      layout="popup"
-      title="Custom Switch"
-    />
     <CodeBlock
       code={{ main: SwitchWithIcon }}
       layout="popup"

apps/docs/src/app/examples/switches/page.mdx

@@ -37,6 +37,17 @@ You can use the [`color`](/docs/styling#color-prop) prop to style the color of t
 </div>
 ```
 
+### Label position
+
+Use the `labelPosition` prop to change the position of the label.
+
+```tsx live
+<div className="flex flex-col gap-sm">
+  <HvCheckBox label="Label on the left" labelPosition="left" />
+  <HvCheckBox label="Label on the right" labelPosition="right" />
+</div>
+```
+
 ### Controlled
 
 You can share state control from a parent component. Clicking **Checkbox 1** has no effect, while clicking **Checkbox 2** updates the state and toggles both checkboxes.

apps/docs/src/content/components/checkbox.mdx

@@ -36,6 +36,17 @@ You can use the [`color`](/docs/styling#color-prop) prop to style the color of t
 </div>
 ```
 
+### Label position
+
+Use the `labelPosition` prop to change the position of the label.
+
+```tsx live
+<div className="flex flex-col gap-sm">
+  <HvRadio label="Label on the left" labelPosition="left" />
+  <HvRadio label="Label on the right" labelPosition="right" />
+</div>
+```
+
 ### Controlled
 
 Controlled radio button. Clicking the Radio button 1 does nothing, while clicking Radio button 2 changes both inputs.

apps/docs/src/content/components/radio.mdx

@@ -46,6 +46,17 @@ export default function Demo() {
 }
 ```
 
+### Label position
+
+Use the `labelPosition` prop to change the position of the label.
+
+```tsx live
+<div className="flex flex-col gap-sm">
+  <HvSwitch label="Label on the left" labelPosition="left" />
+  <HvSwitch label="Label on the right" labelPosition="right" />
+</div>
+```
+
 ### Custom colors
 
 You can use the [`color`](/docs/styling#color-prop) prop to style the color of the switch.

apps/docs/src/content/components/switch.mdx

@@ -68,6 +68,8 @@ export const Test: StoryObj<HvCheckBoxProps> = {
         indeterminate
         label="Checkbox 3"
       />
+      <HvCheckBox label="Left" labelPosition="left" />
+      <HvCheckBox label="Right" labelPosition="right" defaultChecked />
       <div>
         <HvCheckBox aria-label="Checkbox" />
         <HvCheckBox defaultChecked aria-label="Checkbox" />

packages/core/src/CheckBox/CheckBox.stories.tsx

@@ -18,6 +18,13 @@ export const { staticClasses, useClasses } = createClasses("HvCheckBox", {
     ":where(:has($label)) $checkbox": {
       borderRadius: "inherit",
     },
+    "&$left": {
+      flexDirection: "row-reverse",
+      justifyContent: "flex-end",
+    },
+    "&$right": {
+      flexDirection: "row",
+    },
   },
   invalidContainer: {},
   disabled: {
@@ -32,13 +39,21 @@ export const { staticClasses, useClasses } = createClasses("HvCheckBox", {
   invalidCheckbox: {},
   label: {
     verticalAlign: "middle",
-    paddingRight: theme.space.xs,
     ...theme.typography.body,
     cursor: "pointer",
     lineHeight: "32px",
-    width: "100%",
   },
   checked: {},
   indeterminate: {},
   semantic: {},
+  left: {
+    "& .HvCheckBox-label": {
+      paddingLeft: theme.space.xs,
+    },
+  },
+  right: {
+    "& .HvCheckBox-label": {
+      paddingRight: theme.space.xs,
+    },
+  },
 });

packages/core/src/CheckBox/CheckBox.styles.tsx

@@ -49,6 +49,10 @@ export interface HvCheckBoxProps extends Omit<HvBaseCheckBoxProps, "classes"> {
    * Defaults to "Required" when the status is uncontrolled and no `aria-errormessage` is provided.
    */
   statusMessage?: React.ReactNode;
+  /**
+   * The position of the label relative to the control.
+   */
+  labelPosition?: "left" | "right";
   /**
    * A Jss Object used to override or extend the styles applied to the checkbox.
    */
@@ -72,6 +76,7 @@ export const HvCheckBox = forwardRef<HTMLButtonElement, HvCheckBoxProps>(
       statusMessage,
       label,
       labelProps,
+      labelPosition = "right",
       inputProps,
       value = "on",
       required,
@@ -220,7 +225,7 @@ export const HvCheckBox = forwardRef<HTMLButtonElement, HvCheckBoxProps>(
       >
         {hasLabel ? (
           <div
-            className={cx(classes.container, {
+            className={cx(classes.container, classes[labelPosition], {
               [classes.invalidContainer]: isStateInvalid,
               [classes.disabled]: disabled,
             })}

packages/core/src/CheckBox/CheckBox.tsx

@@ -83,6 +83,8 @@ export const Test: StoryObj<HvRadioProps> = {
       <HvRadio defaultChecked disabled aria-label="radio" />
       <HvRadio color="warning" aria-label="radio" />
       <HvRadio defaultChecked color="warning" aria-label="radio" />
+      <HvRadio label="Left" labelPosition="left" />
+      <HvRadio label="Right" labelPosition="right" defaultChecked />
     </>
   ),
 };

packages/core/src/Radio/Radio.stories.tsx

@@ -18,6 +18,13 @@ export const { staticClasses, useClasses } = createClasses("HvRadio", {
     ":where(:has($label)) $radio": {
       borderRadius: "inherit",
     },
+    "&$left": {
+      flexDirection: "row-reverse",
+      justifyContent: "flex-end",
+    },
+    "&$right": {
+      flexDirection: "row",
+    },
   },
   invalidContainer: {},
   disabled: {
@@ -32,12 +39,20 @@ export const { staticClasses, useClasses } = createClasses("HvRadio", {
   invalidRadio: {},
   label: {
     verticalAlign: "middle",
-    paddingRight: theme.space.xs,
     ...theme.typography.body,
     cursor: "pointer",
     lineHeight: "32px",
-    width: "100%",
   },
   checked: {},
   semantic: {},
+  left: {
+    "& .HvRadio-label": {
+      paddingLeft: theme.space.xs,
+    },
+  },
+  right: {
+    "& .HvRadio-label": {
+      paddingRight: theme.space.xs,
+    },
+  },
 });