-
Notifications
You must be signed in to change notification settings - Fork 112
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[sparkle] - refacto: Checkbox / RadioGroup (#8752)
* [sparkle/src/components] - refactor: centralize Checkbox size styles - Extract size variant mapping from the Checkbox component into a separate constant for better maintainability - Replace inlined size variant definitions in the component with the new centralized `checkboxSizeVariant` mapping [sparkle/src/stories] - feature: update Checkbox stories with enhanced controls and structure - Introduce controls for size, checked state, and disabled state with descriptions and default values in the Checkbox story - Add `text` and `description` properties with conditional rendering logic for more comprehensive story examples - Implement action handlers for onChange events in Checkbox stories to better demonstrate component interaction * [sparkle] - feature: integrate labels directly into RadioGroupItems - Implemented direct label support within the RadioGroupItem component for better encapsulation - Updated RadioGroupItem usage in stories to leverage the new label prop, simplifying layout - Enhanced RadioGroupItem styling to accommodate label inclusion - Adjusted RadioGroupChoice to a flex-column layout to align with new item structure * [sparkle] - refactor: improve readability and syntax conformity in RadioGroup components - Reorder imports to maintain consistent structure across files - Add missing semicolons for code consistency - Reformat props spreading for better readability - Simplify JSX structure by removing redundant divs and merging classNames - Adjust stories for RadioGroup to provide clearer examples with proper htmlFor attributes * [sparkle] - refactor: simplify label prop usage in RadioGroup components - Refactor RadioGroup stories to use string labels directly instead of wrapping them with a Label component * [sparkle] - refactor: update `RadioGroup` to support ReactNode labels - Removed `Label` component import, allowing more flexible `label` prop types in `RadioGroupItem` - Replaced static text labels with JSX labels in `RadioGroup.stories` - Simplified the wrapper div class logic for RadioGroupItem components - Enhanced `RadioGroupWithChildrenExample` with additional icon and style adjustments * [sparkle] - fix: ensure RadioGroup items use full width - Added a class to make RadioGroup items use the full available width for better layout control * [sparkle] - feature: bump package version to 0.2.322 - Increment package version for a new release with latest changes and fixes
- Loading branch information
1 parent
591886a
commit 45af7db
Showing
6 changed files
with
152 additions
and
83 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,72 +1,102 @@ | ||
| import type { Meta } from "@storybook/react"; | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import React from "react"; | ||
|
|
||
| import { CHECKBOX_SIZES } from "@sparkle/components/Checkbox"; | ||
|
|
||
| import { | ||
| Checkbox, | ||
| type CheckboxProps, | ||
| CheckboxWithText, | ||
| CheckBoxWithTextAndDescription, | ||
| } from "../index_with_tw_base"; | ||
|
|
||
| const CHECKED_STATES = { | ||
| unchecked: false, | ||
| checked: true, | ||
| partial: "partial", | ||
| } as const; | ||
|
|
||
| type ExtendedCheckboxProps = CheckboxProps & { | ||
| text?: string; | ||
| description?: string; | ||
| }; | ||
|
|
||
| const meta = { | ||
| title: "Primitives/Checkbox", | ||
| component: Checkbox, | ||
| } satisfies Meta<typeof Checkbox>; | ||
| // We need to cast here as the component expects stricter props | ||
| component: Checkbox as React.ComponentType<ExtendedCheckboxProps>, | ||
| parameters: { | ||
| layout: "centered", | ||
| }, | ||
| argTypes: { | ||
| size: { | ||
| description: "The size of the checkbox", | ||
| options: CHECKBOX_SIZES, | ||
| control: { type: "select" }, | ||
| table: { | ||
| defaultValue: { summary: "sm" }, | ||
| }, | ||
| }, | ||
| checked: { | ||
| description: "The checked state of the checkbox", | ||
| options: Object.keys(CHECKED_STATES), | ||
| mapping: CHECKED_STATES, | ||
| control: { type: "select" }, | ||
| table: { | ||
| type: { summary: "boolean | 'partial'" }, | ||
| defaultValue: { summary: "false" }, | ||
| }, | ||
| }, | ||
| disabled: { | ||
| description: "Whether the checkbox is disabled", | ||
| control: "boolean", | ||
| table: { | ||
| defaultValue: { summary: false }, | ||
| }, | ||
| }, | ||
| className: { | ||
| description: "Additional CSS classes to apply", | ||
| control: "text", | ||
| }, | ||
| text: { | ||
| description: "Optional text label to display next to the checkbox", | ||
| control: "text", | ||
| }, | ||
| description: { | ||
| description: | ||
| "Optional description text (only shown when text is provided)", | ||
| control: "text", | ||
| if: { arg: "text" }, | ||
| }, | ||
| onChange: { | ||
| description: "Callback when checkbox state changes", | ||
| action: "changed", | ||
| }, | ||
| }, | ||
| } satisfies Meta<ExtendedCheckboxProps>; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| const handleChange = () => { | ||
| // This function intentionally left blank | ||
| }; | ||
|
|
||
| export const CheckBoxSizesExample = () => { | ||
| return ( | ||
| <div className="s-flex s-flex-col s-gap-10"> | ||
| <div className="s-flex s-gap-10"> | ||
| SM | ||
| <Checkbox onChange={handleChange} /> | ||
| <Checkbox disabled onChange={handleChange} /> | ||
| <Checkbox checked onChange={handleChange} /> | ||
| <Checkbox checked disabled onChange={handleChange} /> | ||
| <Checkbox checked="partial" onChange={handleChange} /> | ||
| <Checkbox checked="partial" disabled onChange={handleChange} /> | ||
| </div> | ||
| <div className="s-flex s-gap-10"> | ||
| XS | ||
| <Checkbox size="xs" onChange={handleChange} /> | ||
| <Checkbox size="xs" disabled onChange={handleChange} /> | ||
| <Checkbox size="xs" checked onChange={handleChange} /> | ||
| <Checkbox size="xs" checked disabled onChange={handleChange} /> | ||
| <Checkbox size="xs" checked="partial" onChange={handleChange} /> | ||
| <Checkbox | ||
| size="xs" | ||
| checked="partial" | ||
| disabled | ||
| onChange={handleChange} | ||
| export const Default: Story = { | ||
| args: { | ||
| size: "sm", | ||
| checked: false, | ||
| disabled: false, | ||
| }, | ||
| render: ({ text, description, ...args }) => { | ||
| if (text && description) { | ||
| return ( | ||
| <CheckBoxWithTextAndDescription | ||
| text={text} | ||
| description={description} | ||
| {...args} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export const CheckBoxWithTextExample = () => { | ||
| return ( | ||
| <div className="s-flex s-gap-10"> | ||
| <CheckboxWithText text="Google Drive" /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export const CheckBoxWithTextAndDescriptionExample = () => { | ||
| return ( | ||
| <div className="s-flex s-flex-col s-gap-3"> | ||
| <CheckBoxWithTextAndDescription | ||
| text="Google Drive" | ||
| description="This is a nice Google Drive description." | ||
| /> | ||
| <CheckBoxWithTextAndDescription | ||
| text="Microsoft" | ||
| description="This is a nice Microsoft description." | ||
| /> | ||
| </div> | ||
| ); | ||
| ); | ||
| } | ||
| if (text) { | ||
| return <CheckboxWithText text={text} {...args} />; | ||
| } | ||
| return <Checkbox {...args} />; | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters