fix(fuselage): className prop drilling improvements on CheckBox, `T…

…oggleSwitch` and `RadioButton` (#1178) Co-authored-by: Douglas Fabris <[email protected]>
RocketChat · Sep 22, 2023 · 0a104a0 · 0a104a0
1 parent dfe3676
commit 0a104a0
Show file tree

Hide file tree

Showing 11 changed files with 977 additions and 90 deletions.
diff --git a/.changeset/shaggy-deers-impress.md b/.changeset/shaggy-deers-impress.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): className prop drilling improvements on `CheckBox`, `ToggleSwitch` and `RadioButton`
diff --git a/packages/fuselage/.storybook/helpers.tsx b/packages/fuselage/.storybook/helpers.tsx
@@ -25,7 +25,7 @@ export function PropsVariationSection<TComponent extends ComponentType<any>>({
     >
       <Box is='thead'>
         <Box is='tr'>
-          <Box is='th' />
+          <Box is='td' aria-hidden />
           {Object.keys(xAxis).map((xVariation, key) => (
             <Box key={key} is='th' color='hint' fontScale='c1'>
               {xVariation}

diff --git a/packages/fuselage/src/components/CheckBox/CheckBox.stories.tsx b/packages/fuselage/src/components/CheckBox/CheckBox.stories.tsx
@@ -2,26 +2,23 @@ import { action } from '@storybook/addon-actions';
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
-import { CheckBox, Label } from '../..';
-import { DECORATOR_ID, DECORATOR_LABEL } from '../../../.storybook/helpers';
+import { CheckBox } from '../..';
+import {
+  DECORATOR_LABEL,
+  PropsVariationSection,
+} from '../../../.storybook/helpers';
 
 export default {
   title: 'Inputs/CheckBox',
   component: CheckBox,
-  decorators: [
-    (Story) => (
-      <>
-        <Story />
-        <Label mis='x4' htmlFor={DECORATOR_ID}>
-          {DECORATOR_LABEL}
-        </Label>
-      </>
-    ),
-  ],
 } as ComponentMeta<typeof CheckBox>;
 
 const Template: ComponentStory<typeof CheckBox> = (args) => (
-  <CheckBox {...args} id={DECORATOR_ID} onChange={action('change')} />
+  <CheckBox
+    {...args}
+    aria-label={DECORATOR_LABEL}
+    onChange={action('change')}
+  />
 );
 
 export const Default = Template.bind({});
@@ -44,3 +41,21 @@ export const DefaultChecked = Template.bind({});
 DefaultChecked.args = {
   defaultChecked: true,
 };
+
+export const States: ComponentStory<typeof CheckBox> = () => (
+  <PropsVariationSection
+    component={CheckBox}
+    common={{ 'onChange': action('change'), 'aria-label': DECORATOR_LABEL }}
+    xAxis={{
+      checked: { checked: true },
+      unchecked: { checked: false },
+    }}
+    yAxis={{
+      default: {},
+      hover: { className: 'is-hovered' },
+      active: { className: 'is-active' },
+      focus: { className: 'is-focused' },
+      disabled: { disabled: true },
+    }}
+  />
+);
diff --git a/packages/fuselage/src/components/CheckBox/CheckBox.tsx b/packages/fuselage/src/components/CheckBox/CheckBox.tsx
@@ -10,7 +10,7 @@ type CheckBoxProps = ComponentProps<typeof Box> & {
 } & AllHTMLAttributes<HTMLInputElement>;
 
 export const CheckBox = forwardRef(function CheckBox(
-  { indeterminate, onChange, ...props }: CheckBoxProps,
+  { indeterminate, onChange, className, ...props }: CheckBoxProps,
   ref: Ref<HTMLInputElement>
 ) {
   const innerRef = useRef<HTMLInputElement>(null);
@@ -33,7 +33,7 @@ export const CheckBox = forwardRef(function CheckBox(
   );
 
   return (
-    <Box is={Label} rcx-check-box>
+    <Box is={Label} className={className} rcx-check-box>
       <Box
         is='input'
         type='checkbox'