Skip to content

Commit

Permalink
Feat: [HOP-99] Switch component & Checkbox fixes (#248)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vicky-comeau
vicky-comeau authored Apr 26, 2024
2 parents 4be392a + dc89c18 commit 57d44ea
Show file tree
Hide file tree
Showing 22 changed files with 1,334 additions and 114 deletions.
5 changes: 2 additions & 3 deletions packages/components/src/checkbox/docs/migration-notes.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,18 @@
- The `counter` component is no longer allowed as a specialized slot.
- `reverse` is not currently supported.
- Values are not auto-generated when missed.
- `onChange` is only on RadioGroup, not Radio.
- `onChange` signature changed (no event passed).
- `onValueChange` deleted, use onChange instead.
- `checked` renamed to `isSelected`.
- `disabled` renamed to `isDisabled`.
- `required` renamed to `isRequired`.
- `validationState` is removed. use `isInvalid` instead. There is no `isValid`.
- `value` is required.
- `defaultIndeterminate` prop removed.
- `indeterminate` renamed to `isIndeterminate`.

# CheckboxGroup
- `reverse` is not currently supported.
- `autofocus` is not supported. You must put `autofocus` on the actual Radio.
- `autofocus` is not supported. You must put `autofocus` on the actual Checkbox.
- `onChange` signature changed (no event passed).
- `disabled` renamed to `isDisabled`.
- `required` renamed to `isRequired`.
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/checkbox/src/CheckboxField.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
--hop-CheckboxField-description-sm-margin-inline-start: calc(var(--hop-CheckboxField-checkbox-sm-inline-size) + var(--hop-space-inline-sm));

/* Medium */
--hop-CheckboxField-md-row-gap: var(--hop-space-stack-sm);
--hop-CheckboxField-md-row-gap: var(--hop-space-stack-xs);
--hop-CheckboxField-checkbox-md-inline-size: 1.5rem;
--hop-CheckboxField-description-md-margin-inline-start: calc(var(--hop-CheckboxField-checkbox-md-inline-size) + var(--hop-space-inline-md));

Expand Down
232 changes: 141 additions & 91 deletions packages/components/src/checkbox/tests/chromatic/Checkbox.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Div } from "@hopper-ui/styled-system";
import type { Meta, StoryObj } from "@storybook/react";

import { IconList } from "../../../IconList/src/IconList.tsx";
import { Inline, Stack, Flex } from "../../../layout/index.ts";
import { Inline, Stack } from "../../../layout/index.ts";
import { Text } from "../../../Text/index.ts";
import { Checkbox } from "../../src/Checkbox.tsx";

Expand All @@ -18,29 +18,6 @@ export default meta;
type Story = StoryObj<typeof meta>;

export const Unchecked: Story = {
play: async ({ canvasElement }) => {
const checkboxLabels = canvasElement.querySelectorAll("label");

checkboxLabels.forEach(checkboxLabel => {
const checkbox = checkboxLabel.querySelector("input[type='checkbox']");
if (checkbox && checkbox.getAttribute("disabled") !== "") { // don't try and force states on a disabled input
if (checkbox.getAttribute("data-chromatic-force-press")) {
checkboxLabel.setAttribute("data-pressed", "true");
checkbox.removeAttribute("data-chromatic-force-press");
}

if (checkbox.getAttribute("data-chromatic-force-focus")) {
checkboxLabel.setAttribute("data-focus-visible", "true");
checkbox.removeAttribute("data-chromatic-force-focus");
}

if (checkbox.getAttribute("data-chromatic-force-hover")) {
checkboxLabel.setAttribute("data-hovered", "true");
checkbox.removeAttribute("data-chromatic-force-hover");
}
}
});
},
render: props => (
<Stack>
<h1>Labeled</h1>
Expand Down Expand Up @@ -78,10 +55,10 @@ export const Unchecked: Story = {
<Checkbox {...props} size="md" aria-label="Option 2" />
</Inline>
<Inline alignY="end">
<Checkbox size="sm" aria-label="Option 1">
<Checkbox {...props} size="sm" aria-label="Option 1">
<SparklesIcon />
</Checkbox>
<Checkbox aria-label="Option 2">
<Checkbox {...props} aria-label="Option 2">
<SparklesIcon />
</Checkbox>
</Inline>
Expand Down Expand Up @@ -112,79 +89,29 @@ export const Unchecked: Story = {
<SparklesIcon />
</Checkbox>
</Inline>
<h1>States</h1>
<Inline>
<Stack>
<h2>Focus Visible</h2>
<Inline alignY="end">
<Checkbox {...props} size="sm" data-chromatic-force-focus>
Option 1
</Checkbox>
<Checkbox {...props} size="md" data-chromatic-force-focus>
Option 2
</Checkbox>
</Inline>
<h2>Hovered</h2>
<Inline alignY="end">
<Checkbox {...props} size="sm" data-chromatic-force-hover>
Option 1
</Checkbox>
<Checkbox {...props} size="md" data-chromatic-force-hover>
Option 2
</Checkbox>
</Inline>
<h2>Focus Visible and Hovered</h2>
<Inline alignY="end">
<Checkbox {...props} size="sm" data-chromatic-force-focus data-chromatic-force-hover>
Option 1
</Checkbox>
<Checkbox {...props} size="md" data-chromatic-force-focus data-chromatic-force-hover>
Option 2
</Checkbox>
</Inline>
</Stack>
<Stack>
<h2>Disabled & Focus Visible</h2>
<Inline alignY="end">
<Checkbox {...props} size="sm" isDisabled data-chromatic-force-focus>
Option 1
</Checkbox>
<Checkbox {...props} size="md" isDisabled data-chromatic-force-focus>
Option 2
</Checkbox>
</Inline>
<h2>Disabled & Hovered</h2>
<Inline alignY="end">
<Checkbox {...props} size="sm" isDisabled data-chromatic-force-hover>
Option 1
</Checkbox>
<Checkbox {...props} size="md" isDisabled data-chromatic-force-hover>
Option 2
</Checkbox>
</Inline>
<h2>Disabled & Focus Visible and Hovered</h2>
<Inline alignY="end">
<Checkbox {...props} size="sm" isDisabled data-chromatic-force-focus data-chromatic-force-hover>
Option 1
</Checkbox>
<Checkbox {...props} size="md" isDisabled data-chromatic-force-focus data-chromatic-force-hover>
Option 2
</Checkbox>
</Inline>
</Stack>
</Inline>
<h1>Overflow</h1>
<Flex alignItems="end" maxWidth="1/4">
<Div maxWidth="1/4">
<Checkbox {...props}>PA-99-N2 event and possible exoplanet in galaxy</Checkbox>
</Flex>
<Flex alignItems="end" maxWidth="1/4">
</Div>
<Div maxWidth="1/4">
<Checkbox {...props}>
<Text>PA-99-N2 event and possible exoplanet in galaxy</Text>
<IconList>
<SparklesIcon /><SparklesIcon />
</IconList>
</Checkbox>
</Flex>
</Div>
<Div maxWidth="1/4">
<Checkbox {...props} size="sm">PA-99-N2 event and possible exoplanet in galaxy</Checkbox>
</Div>
<Div maxWidth="1/4">
<Checkbox {...props} size="sm">
<Text>PA-99-N2 event and possible exoplanet in galaxy</Text>
<IconList>
<SparklesIcon /><SparklesIcon />
</IconList>
</Checkbox>
</Div>
<h1>Zoom</h1>
<Inline>
<Div className="zoom-in">
Expand Down Expand Up @@ -212,3 +139,126 @@ export const Indeterminate: Story = {
isIndeterminate: true
}
};

export const UncheckedStates: Story = {
play: async ({ canvasElement }) => {
const checkboxLabels = canvasElement.querySelectorAll("label");

checkboxLabels.forEach(checkboxLabel => {
const checkbox = checkboxLabel.querySelector("input[type='checkbox']");
if (checkbox && checkbox.getAttribute("disabled") !== "") { // don't try and force states on a disabled input
if (checkbox.getAttribute("data-chromatic-force-press")) {
checkboxLabel.setAttribute("data-pressed", "true");
checkbox.removeAttribute("data-chromatic-force-press");
}

if (checkbox.getAttribute("data-chromatic-force-focus")) {
checkboxLabel.setAttribute("data-focus-visible", "true");
checkbox.removeAttribute("data-chromatic-force-focus");
}

if (checkbox.getAttribute("data-chromatic-force-hover")) {
checkboxLabel.setAttribute("data-hovered", "true");
checkbox.removeAttribute("data-chromatic-force-hover");
}
}
});
},
render: props => (
<Stack>
<h1>Focus Visible</h1>
<Inline alignY="end">
<Checkbox {...props} size="sm" data-chromatic-force-focus>
Option 1
</Checkbox>
<Checkbox {...props} size="md" data-chromatic-force-focus>
Option 2
</Checkbox>
</Inline>
<h1>Hovered</h1>
<Inline alignY="end">
<Checkbox {...props} size="sm" data-chromatic-force-hover>
Option 1
</Checkbox>
<Checkbox {...props} size="md" data-chromatic-force-hover>
Option 2
</Checkbox>
</Inline>
<h1>Focus Visible & Hovered</h1>
<Inline alignY="end">
<Checkbox {...props} size="sm" data-chromatic-force-focus data-chromatic-force-hover>
Option 1
</Checkbox>
<Checkbox {...props} size="md" data-chromatic-force-focus data-chromatic-force-hover>
Option 2
</Checkbox>
</Inline>
<h1>Disabled & Focus Visible</h1>
<Inline alignY="end">
<Checkbox {...props} size="sm" isDisabled data-chromatic-force-focus>
Option 1
</Checkbox>
<Checkbox {...props} size="md" isDisabled data-chromatic-force-focus>
Option 2
</Checkbox>
</Inline>
<h1>Disabled & Hovered</h1>
<Inline alignY="end">
<Checkbox {...props} size="sm" isDisabled data-chromatic-force-hover>
Option 1
</Checkbox>
<Checkbox {...props} size="md" isDisabled data-chromatic-force-hover>
Option 2
</Checkbox>
</Inline>
<h1>Disabled, Focus Visible & Hovered</h1>
<Inline alignY="end">
<Checkbox {...props} size="sm" isDisabled data-chromatic-force-focus data-chromatic-force-hover>
Option 1
</Checkbox>
<Checkbox {...props} size="md" isDisabled data-chromatic-force-focus data-chromatic-force-hover>
Option 2
</Checkbox>
</Inline>
</Stack>
)
};

export const CheckedStates: Story = {
...UncheckedStates,
args: {
defaultSelected: true
}
};

export const IndeterminateStates: Story = {
...UncheckedStates,
args: {
defaultSelected: true,
isIndeterminate: true
}
};

export const InvalidUncheckedStates: Story = {
...UncheckedStates,
args: {
isInvalid: true
}
};

export const InvalidCheckedStates: Story = {
...UncheckedStates,
args: {
isInvalid: true,
defaultSelected: true
}
};

export const InvalidIndeterminateStates: Story = {
...UncheckedStates,
args: {
isInvalid: true,
defaultSelected: true,
isIndeterminate: true
}
};
33 changes: 15 additions & 18 deletions packages/components/src/checkbox/tests/chromatic/CheckboxField.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,25 +52,22 @@ export const Validation: Story = {
)
};

export const States: Story = {
export const Disabled: Story = {
render: props => (
<Stack>
<h1>Disabled</h1>
<Inline alignY="end">
<CheckboxField {...props} size="sm" isDisabled>
<Checkbox>
<Text>Option 1</Text>
</Checkbox>
<Text slot="description">Description</Text>
</CheckboxField>
<CheckboxField {...props} size="md" isDisabled>
<Checkbox>
<Text>Option 1</Text>
</Checkbox>
<Text slot="description">Description</Text>
</CheckboxField>
</Inline>
</Stack>
<Inline alignY="end">
<CheckboxField {...props} size="sm" isDisabled>
<Checkbox>
<Text>Option 1</Text>
</Checkbox>
<Text slot="description">Description</Text>
</CheckboxField>
<CheckboxField {...props} size="md" isDisabled>
<Checkbox>
<Text>Option 1</Text>
</Checkbox>
<Text slot="description">Description</Text>
</CheckboxField>
</Inline>
)
};

Expand Down
1 change: 1 addition & 0 deletions packages/components/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export * from "./Label/index.ts";
export * from "./Link/index.ts";
export * from "./radio/index.ts";
export * from "./Spinner/index.ts";
export * from "./switch/index.ts";
export * from "./Text/index.ts";
export * from "./utils/index.ts";

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/radio/src/RadioField.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
--hop-RadioField-description-sm-margin-inline-start: calc(var(--hop-RadioField-radio-sm-inline-size) + var(--hop-space-inline-sm));

/* Medium */
--hop-RadioField-md-row-gap: var(--hop-space-stack-sm);
--hop-RadioField-md-row-gap: var(--hop-space-stack-xs);
--hop-RadioField-radio-md-inline-size: 1.5rem;
--hop-RadioField-description-md-margin-inline-start: calc(var(--hop-RadioField-radio-md-inline-size) + var(--hop-space-inline-md));

Expand Down
Loading

0 comments on commit 57d44ea

Please sign in to comment.