feat: redo checkbox component (#3295)

Author: Szymon-dziewonski

apps/docs/components/content/_components/checkbox.md

@@ -4,7 +4,7 @@
 
 #tab-1
 
-`SfCheckbox` is a wrapper around `<input type="checkbox">` with additional styles for different states . It can be used for forms or expressing consents. 
+`SfCheckbox` is a wrapper around `<input type="checkbox">` with additional styles for different states . It can be used for forms or expressing consents.
 
 The root element is an `<input>` so any attributes that can be used on an `<input>` can be used on `SfCheckbox`.
 
@@ -75,18 +75,23 @@ It's focusable and can be toggled with `Space`.
 
 
 ::vue-only
-| Prop name    | Type                     | Default value | Possible values                        |
-| ------------ | ------------------------ | ------------- | -------------------------------------- |
+| Prop name      | Type                       | Default value   | Possible values                        |
+| -------------- | -------------------------- | --------------- | -------------------------------------- |
 | `modelValue`   | `boolean | string[]`       | `undefined`     |                                        |
 | `invalid`      | `boolean`                  | `false`         |                                        |
-
+| `indeterminate`| `boolean`                  | `false`         |                                        |
+| `wrapperTag`   | `string`                   | `label`         | Any tag name for checkbox wrapper      |
+| `wrapperClass` | `string`                   |                 |                                        |
 ::
 
 ::react-only
-| Prop name    | Type                     | Default value | Possible values                        |
-| ------------ | ------------------------ | ------------- | -------------------------------------- |
-| `className`    | `string`                   |               |                                        |
-| `invalid`      | `boolean`                  | `false`         |                                        |
+| Prop name          | Type                   | Default value | Possible values                        |
+| ------------------ | ---------------------- | ------------- | -------------------------------------- |
+| `className`        | `string`               |               |                                        |
+| `invalid`          | `boolean`              | `false`       |                                        |
+| `indeterminate`    | `boolean`              | `false`       |                                        |
+| `wrapperAs`        | `string`               | `label`       | Any tag name for c wrapper             |
+| `wrapperClassName` | `string`               |                 |                                        |
 ::
 
 ::vue-only

apps/docs/components/content/_components/input.md

@@ -31,10 +31,10 @@ If you need to make this field required, it is crucial to communicate this inten
 ### Input with icons
 
 ::vue-only
-You can insert content before and after your input using the `prefix` and `suffix` slots. 
+You can insert content before and after your input using the `prefix` and `suffix` slots.
 ::
 ::react-only
-You can insert content before and after your input using the `slotPrefix` and `slotSuffix` props. 
+You can insert content before and after your input using the `slotPrefix` and `slotSuffix` props.
 ::
 
 
@@ -114,10 +114,10 @@ This is an example of what `SfInput` might look like in your end code. It has a
 ## Notes
 
 ::vue-only
-All non-prop attributes and styles added to `SfInput` component are passed directly to the native input element. This means that you can add all of the input attributes directly to `SfInput`. If you want to style the wrapper `div`, you can pass your classes via the `wrapperClass` prop. 
+All non-prop attributes and styles added to `SfInput` component are passed directly to the native input element. This means that you can add all of the input attributes directly to `SfInput`. If you want to style the wrapper `div`, you can pass your classes via the `wrapperClass` prop.
 ::
 ::react-only
-All non-prop attributes and styles added to `SfInput` component are passed directly to the native input element. This means that you can add all of the input attributes directly to `SfInput`. If you want to style the wrapper `div`, you can pass your classes via the `wrapperClassName` prop. 
+All non-prop attributes and styles added to `SfInput` component are passed directly to the native input element. This means that you can add all of the input attributes directly to `SfInput`. If you want to style the wrapper `div`, you can pass your classes via the `wrapperClassName` prop.
 ::
 
 Since, `size` is a specified prop of `SfInput`, you won't be able to pass the native `size` attribute to your input element. Instead, you can use the `width` property with `ch` unit instead (eg. `width: 10ch`).
@@ -149,7 +149,6 @@ Avoid adding `div` tags to slots. If an input element is wrapped in `label` tag
 | ------------ | --------        | ------------- | -------------------------------------- |
 | `size`         | `SfInputSize`  | `'base'`          | `'sm'`, `'base'`, `'lg'`                           |
 | `invalid`      | `boolean`         | `false`         |                                        |
-| `wrapperTag`    | `string`         | `span`        | Any tag name for input wrapper         |
 | `wrapperAs`    | `string`          | `span`        | Any tag name for input wrapper         |
 | `className`    | `string`          |               |                                        |
 | `slotPrefix`   | `ReactNode`       |               |                                        |

apps/preview/next/components/utils/Controls.tsx

@@ -217,7 +217,9 @@ export default function Controls<T extends { [k: string]: any }>({ controls, sta
                 <td className="propType">
                   <span>{control.propType}</span>
                 </td>
-                <td className="propDefaultValue">{control.propDefaultValue}</td>
+                <td className="propDefaultValue">
+                  {control.propDefaultValue ?? (control.type === 'boolean' ? 'false' : '')}
+                </td>
                 <td className="required">{control?.isRequired?.toString()}</td>
                 <td className="description">{control.description}</td>
               </tr>

apps/preview/next/pages/examples/SfCheckbox.tsx

@@ -24,6 +24,18 @@ function Example() {
         propType: 'string',
         description: '(not prop) example allows to add value attribute to input',
       },
+      {
+        type: 'text',
+        modelName: 'wrapperAs',
+        propDefaultValue: 'label',
+        description: 'Change checkbox wrapper tag',
+      },
+      {
+        type: 'text',
+        modelName: 'wrapperClassName',
+        propType: 'string',
+        description: 'Change checkbox wrapper class',
+      },
       {
         type: 'boolean',
         modelName: 'indeterminate',
@@ -48,6 +60,8 @@ function Example() {
       disabled: false,
       invalid: false,
       checkedValue: [],
+      wrapperAs: 'label',
+      wrapperClassName: '',
     },
   );
 
@@ -67,6 +81,7 @@ function Example() {
     if (state.get.invalid) {
       checkboxRef.current.indeterminate = false;
     } else {
+      console.log('state.get.indeterminate', state.get.indeterminate);
       checkboxRef.current.indeterminate = state.get.indeterminate;
     }
   }, [checkboxRef, state.get.indeterminate, state.get.invalid, state.get.disabled]);
@@ -78,10 +93,13 @@ function Example() {
           value={state.get.value}
           disabled={state.get.disabled}
           invalid={!state.get.disabled && state.get.invalid}
+          indeterminate={state.get.indeterminate}
+          wrapperAs={state.get.wrapperAs}
           ref={checkboxRef}
           onChange={onChange}
           className="peer"
           id="checkbox"
+          wrapperClassName={state.get.wrapperClassName}
         />
         <label
           htmlFor="checkbox"

apps/preview/next/pages/showcases.tsx

@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 import ShowcaseLayout from '../layouts/Showcases';
 
 function ExamplePage() {
-  return <div>This is page with examples of all available components</div>;
+  return <div>This is page with showcases of all available components</div>;
 }
 
 export function ShowcasePageLayout(page: ReactElement) {

apps/preview/nuxt/components/utils/Controls.vue

@@ -111,7 +111,7 @@
                 <span>{{ control.propType }}</span>
               </td>
               <td class="propDefaultValue">
-                {{ (control.propDefaultValue ?? control.type === 'boolean') ? 'false' : '' }}
+                {{ control.propDefaultValue ?? (control.type === 'boolean' ? 'false' : '') }}
               </td>
               <td class="required">{{ control?.isRequired?.toString() }}</td>
               <td class="description">{{ control.description }}</td>

apps/preview/nuxt/pages/examples/SfCheckbox.vue

@@ -8,6 +8,7 @@
         v-model="modelValue"
         :invalid="!disabled && invalid"
         class="peer"
+        :wrapper-class="wrapperClass"
       />
       <label
         for="checkbox"
@@ -56,6 +57,18 @@ export default defineComponent({
             propType: 'string',
             description: '(not prop) example allows to add value attribute to input',
           },
+          {
+            type: 'text',
+            propType: 'string',
+            propDefaultValue: 'label',
+            modelName: 'wrapperTag',
+          },
+          {
+            type: 'text',
+            modelName: 'wrapperClass',
+            propType: 'string',
+            description: 'Change checkbox wrapper class',
+          },
           {
             type: 'boolean',
             modelName: 'indeterminate',
@@ -80,6 +93,8 @@ export default defineComponent({
           disabled: disabled,
           invalid: invalid,
           value: ref('label'),
+          wrapperTag: ref(),
+          wrapperClass: ref(''),
         },
       ),
       checkboxRef,

apps/preview/nuxt/pages/showcases.vue

@@ -30,7 +30,7 @@
             <li v-if="groupValue.visible" class="flex flex-col select-none">
               <button
                 type="button"
-                class="text-left bg-gray-200 px-2 py-1 justify-between cursor-pointer"
+                class="justify-between px-2 py-1 text-left bg-gray-200 cursor-pointer"
                 @click="groupValue.open = !groupValue.open"
               >
                 {{ groupKey }}<SfIconExpandMore :class="{ 'rotate-180': groupValue.open }" />

packages/config/tailwind/index.ts

@@ -226,12 +226,6 @@ export const tailwindConfig: Config = {
         DEFAULT: '0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06)',
         md: '0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)',
       },
-      backgroundImage: {
-        'checked-checkbox-current':
-          'linear-gradient(-45deg,transparent 65%, currentcolor 65.99%),linear-gradient(45deg,transparent 75%, currentcolor 75.99%),linear-gradient(-45deg, currentcolor 40%,transparent 40.99%),linear-gradient(45deg, currentcolor 30%, white 30.99%, white 40%,transparent 40.99%),linear-gradient(-45deg, white 50%, currentcolor 50.99%)',
-        'indeterminate-checkbox-current':
-          'linear-gradient(90deg,transparent 80%, currentcolor 80%),linear-gradient(-90deg,transparent 80%, currentcolor 80%),linear-gradient(0deg, currentcolor 43%, white 43%, white 57%, currentcolor 57%)',
-      },
       colors: {
         brand: 'oklch(var(--colors-brand) / <alpha-value>)',
         neutral: {
@@ -371,7 +365,7 @@ export const tailwindConfig: Config = {
             '600': '0.443 0.016 152.174',
             '700': '0.365 0.016 156.314',
             '800': '0.282 0.011 156.383',
-            '900': '0.211 0.011 151.165'
+            '900': '0.211 0.011 151.165',
           },
           primary: {
             '50': '0.98 0.02 156.735',
@@ -383,7 +377,7 @@ export const tailwindConfig: Config = {
             '600': '0.525 0.041 162.018',
             '700': '0.466 0.035 162.976',
             '800': '0.365 0.026 164.592',
-            '900': '0.27 0.017 163.365'
+            '900': '0.27 0.017 163.365',
           },
           secondary: {
             '50': '0.982 0.027 157.322',
@@ -395,7 +389,7 @@ export const tailwindConfig: Config = {
             '600': '0.621 0.165 151.142',
             '700': '0.524 0.135 151.385',
             '800': '0.401 0.095 152.918',
-            '900': '0.285 0.055 155.368'
+            '900': '0.285 0.055 155.368',
           },
           positive: {
             '50': '0.982 0.027 157.322',
@@ -407,7 +401,7 @@ export const tailwindConfig: Config = {
             '600': '0.621 0.165 151.142',
             '700': '0.524 0.135 151.385',
             '800': '0.401 0.095 152.918',
-            '900': '0.285 0.055 155.368'
+            '900': '0.285 0.055 155.368',
           },
           negative: {
             '50': '0.978 0.011 3.577',
@@ -419,7 +413,7 @@ export const tailwindConfig: Config = {
             '600': '0.634 0.215 16.447',
             '700': '0.545 0.215 22.13',
             '800': '0.41 0.16 20.89',
-            '900': '0.28 0.09 18.166'
+            '900': '0.28 0.09 18.166',
           },
           warning: {
             '50': '0.979 0.016 79.212',
@@ -431,7 +425,7 @@ export const tailwindConfig: Config = {
             '600': '0.636 0.135 68.487',
             '700': '0.539 0.12 64.869',
             '800': '0.415 0.089 62.994',
-            '900': '0.286 0.055 60.071'
+            '900': '0.286 0.055 60.071',
           },
           disabled: {
             '50': '0.986 0.002 0',
@@ -443,7 +437,7 @@ export const tailwindConfig: Config = {
             '600': '0.443 0.016 152.174',
             '700': '0.365 0.016 156.314',
             '800': '0.282 0.011 156.383',
-            '900': '0.211 0.011 151.165'
+            '900': '0.211 0.011 151.165',
           },
         },
       },

packages/sfui/frameworks/react/components/SfCheckbox/SfCheckbox.tsx

@@ -1,23 +1,74 @@
 import classNames from 'classnames';
-import { forwardRef } from 'react';
-import type { SfCheckboxProps } from '@storefront-ui/react';
+import { useRef, useEffect, useState } from 'react';
+import {
+  mergeRefs,
+  SfIconCheckBox,
+  SfIconCheckBoxOutlineBlank,
+  SfIconIndeterminateCheckBox,
+  polymorphicForwardRef,
+  type SfCheckboxProps,
+} from '@storefront-ui/react';
 
-const SfCheckbox = forwardRef<HTMLInputElement, SfCheckboxProps>(
-  ({ invalid, className, ...attributes }, ref): JSX.Element => (
-    <input
-      className={classNames(
-        'h-[18px] min-w-[18px] border-2 rounded-sm appearance-none cursor-pointer text-neutral-500 hover:indeterminate:text-primary-800 enabled:active:checked:text-primary-900 checked:text-primary-700 checked:bg-checked-checkbox-current border-current indeterminate:bg-indeterminate-checkbox-current indeterminate:text-primary-700 disabled:text-disabled-500 hover:text-primary-800 disabled:cursor-not-allowed enabled:hover:border-primary-800 enabled:active:border-primary-900 enabled:hover:checked:text-primary-800 enabled:hover:indeterminate:text-primary-800 enabled:checked:text-primary-700 enabled:indeterminate:text-primary-700 enabled:focus-visible:outline enabled:focus-visible:outline-offset',
-        {
-          'border-negative-700 enabled:hover:border-negative-800 enabled:active:border-negative-900': invalid,
-        },
-        className,
-      )}
-      type="checkbox"
-      ref={ref}
-      data-testid="checkbox"
-      {...attributes}
-    />
-  ),
+const defaultWrapperTag = 'label';
+
+const SfCheckbox = polymorphicForwardRef<'input', SfCheckboxProps>(
+  (
+    { wrapperAs, invalid, className, indeterminate: indeterminateProp, wrapperClassName, ...attributes },
+    ref,
+  ): JSX.Element => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const WrapperTag = wrapperAs || defaultWrapperTag;
+    const [isIndeterminate, setIsIndeterminate] = useState(indeterminateProp || false);
+    const [isChecked, setIsChecked] = useState(attributes.checked || false);
+
+    useEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.indeterminate = indeterminateProp || false;
+        setIsIndeterminate(indeterminateProp || false);
+        setIsChecked(inputRef.current.checked);
+      }
+    }, [indeterminateProp, attributes.checked]);
+
+    const handleInputChange = () => {
+      if (inputRef.current) {
+        setIsIndeterminate(inputRef.current.indeterminate);
+        setIsChecked(inputRef.current.checked);
+      }
+    };
+
+    return (
+      <WrapperTag
+        className={classNames(
+          'flex cursor-pointer focus-visible:outline-primary-700 focus-visible:outline focus-visible:outline-offset-2 rounded-md',
+          {
+            'text-neutral-500 hover:text-primary-800 active:text-primary-900': !invalid && !attributes.disabled,
+            'text-negative-700 hover:text-negative-800 active:text-negative-900': invalid && !attributes.disabled,
+            'text-disabled-500 hover:text-disabled-600 active:text-disabled-700': attributes.disabled,
+          },
+          wrapperClassName,
+        )}
+        data-testid="checkbox"
+      >
+        <input
+          className={classNames('hidden', className)}
+          type="checkbox"
+          ref={mergeRefs([inputRef, ref])}
+          {...attributes}
+          onChange={(e) => {
+            handleInputChange();
+            attributes.onChange?.(e);
+          }}
+        />
+        {isIndeterminate ? (
+          <SfIconIndeterminateCheckBox />
+        ) : isChecked ? (
+          <SfIconCheckBox />
+        ) : (
+          <SfIconCheckBoxOutlineBlank />
+        )}
+      </WrapperTag>
+    );
+  },
 );
 
 export default SfCheckbox;