Skip to content

Commit

Permalink
Add Size small for toogle
Browse files Browse the repository at this point in the history
  • Loading branch information
@aralovelace
aralovelace committed Dec 5, 2024
1 parent 1c19ce9 commit b306377
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 9 deletions.
20 changes: 17 additions & 3 deletions src/core/Toggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,36 @@ import cn from "./utils/cn";

type ToggleProps = {
id: string;
size?: string;
label?: string;
className?: string;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

const Toggle: React.FC<ToggleProps> = ({ id, label, className, ...props }) => {
const Toggle: React.FC<ToggleProps> = ({
id,
size,
label,
className,
...props
}) => {
const rootSize = size === "small" ? "w-[42px] h-[24px]" : "w-[56px] h-32";
const thumbSize =
size === "small" ? "w-[21px] h-[21px] translate-x-1 data-[state=checked]:translate-x-[20px]" : "h-[28px] w-[28px] translate-x-2 data-[state=checked]:translate-x-[26px]";

return (
<div className="flex items-center">
<Switch.Root
className={cn(
"p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus",
"p-0 bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus",
className,
rootSize,
)}
id={id}
{...props}
>
<Switch.Thumb className="block h-[28px] w-[28px] bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle translate-x-2 data-[state=checked]:translate-x-[26px] transition-transform" />
<Switch.Thumb
className={`block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform ${thumbSize}`}
/>
</Switch.Root>
{label ? (
<label className="ml-16" htmlFor={id}>
Expand Down
5 changes: 5 additions & 0 deletions src/core/Toggle/Toggle.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,8 @@ Disabled.args = {
checked: false,
disabled: true,
};

export const Small = Template.bind({});
Small.args = {
size: "small",
};
29 changes: 23 additions & 6 deletions src/core/Toggle/__snapshots__/Toggle.stories.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ exports[`Components/Toggle Checked smoke-test 1`] = `
aria-checked="true"
data-state="checked"
value="on"
class="p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus"
class="p-0 bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus w-[56px] h-32"
>
<span data-state="checked"
class="block h-[28px] w-[28px] bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle translate-x-2 data-[state=checked]:translate-x-[26px] transition-transform"
class="block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform h-[28px] w-[28px] translate-x-2 data-[state=checked]:translate-x-[26px]"
>
</span>
</button>
Expand All @@ -24,10 +24,10 @@ exports[`Components/Toggle Default smoke-test 1`] = `
aria-checked="false"
data-state="unchecked"
value="on"
class="p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus"
class="p-0 bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus w-[56px] h-32"
>
<span data-state="unchecked"
class="block h-[28px] w-[28px] bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle translate-x-2 data-[state=checked]:translate-x-[26px] transition-transform"
class="block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform h-[28px] w-[28px] translate-x-2 data-[state=checked]:translate-x-[26px]"
>
</span>
</button>
Expand All @@ -43,11 +43,28 @@ exports[`Components/Toggle Disabled smoke-test 1`] = `
data-disabled
disabled
value="on"
class="p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus"
class="p-0 bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus w-[56px] h-32"
>
<span data-state="unchecked"
data-disabled
class="block h-[28px] w-[28px] bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle translate-x-2 data-[state=checked]:translate-x-[26px] transition-transform"
class="block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform h-[28px] w-[28px] translate-x-2 data-[state=checked]:translate-x-[26px]"
>
</span>
</button>
</div>
`;

exports[`Components/Toggle Small smoke-test 1`] = `
<div class="flex items-center">
<button type="button"
role="switch"
aria-checked="false"
data-state="unchecked"
value="on"
class="p-0 bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus w-[42px] h-[24px]"
>
<span data-state="unchecked"
class="block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform w-[21px] h-[21px] translate-x-1 data-[state=checked]:translate-x-[20px]"
>
</span>
</button>
Expand Down

0 comments on commit b306377

Please sign in to comment.