From 90cdcd0dc899c132c6d353b23a2cd462a24729dd Mon Sep 17 00:00:00 2001 From: April Smith Date: Thu, 5 Dec 2024 15:03:40 +0000 Subject: [PATCH 1/6] Add Size small for toogle --- package.json | 2 +- src/core/Toggle.tsx | 23 +++++++++++++-- src/core/Toggle/Toggle.stories.tsx | 5 ++++ .../__snapshots__/Toggle.stories.tsx.snap | 29 +++++++++++++++---- 4 files changed, 49 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index ce4231e8c..b5f71864c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ably/ui", - "version": "15.1.3", + "version": "15.1.4", "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.", "repository": { "type": "git", diff --git a/src/core/Toggle.tsx b/src/core/Toggle.tsx index f4d9acfde..2272b2e7b 100644 --- a/src/core/Toggle.tsx +++ b/src/core/Toggle.tsx @@ -4,22 +4,39 @@ import cn from "./utils/cn"; type ToggleProps = { id: string; + size?: string; label?: string; className?: string; } & React.ButtonHTMLAttributes; -const Toggle: React.FC = ({ id, label, className, ...props }) => { +const Toggle: React.FC = ({ + 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 (
- + {label ? (
+`; + +exports[`Components/Toggle Small smoke-test 1`] = ` +
+ From 2ab8695a184244278341e41ebba744342ecd9826 Mon Sep 17 00:00:00 2001 From: April Smith Date: Thu, 5 Dec 2024 15:11:04 +0000 Subject: [PATCH 2/6] Publish v15.1.4-dev.0746ac8 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b5f71864c..00bbd5e5a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ably/ui", - "version": "15.1.4", + "version": "15.1.4-dev.0746ac8", "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.", "repository": { "type": "git", From a09a191c13d7711c0995f03a39da40ce78f3cc68 Mon Sep 17 00:00:00 2001 From: April Smith Date: Thu, 5 Dec 2024 15:19:09 +0000 Subject: [PATCH 3/6] Change the size default and remove the component not necessary to display Update based on review and add type add default value for Toogle size --- src/core/Toggle.tsx | 16 ++++++++----- src/core/Toggle/Toggle.stories.tsx | 9 ++------ .../__snapshots__/Toggle.stories.tsx.snap | 23 +++---------------- 3 files changed, 15 insertions(+), 33 deletions(-) diff --git a/src/core/Toggle.tsx b/src/core/Toggle.tsx index 2272b2e7b..9e209ea50 100644 --- a/src/core/Toggle.tsx +++ b/src/core/Toggle.tsx @@ -4,23 +4,24 @@ import cn from "./utils/cn"; type ToggleProps = { id: string; - size?: string; + size?: "sm" | "lg"; label?: string; className?: string; + onCheckedChange?: (checked: boolean) => void; } & React.ButtonHTMLAttributes; const Toggle: React.FC = ({ id, - size, + size = "lg", label, className, ...props }) => { - const rootSize = size === "small" ? "w-[42px] h-[24px]" : "w-[56px] h-32"; + const rootSize = size === "sm" ? "w-[42px] h-[24]" : "w-[56px] h-32"; const thumbSize = - size === "small" + size === "sm" ? "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]"; + : "h-[28px] w-[28px] translate-x-2 data-[state=checked]:translate-x-[26px]"; return (
@@ -35,7 +36,10 @@ const Toggle: React.FC = ({ {...props} > {label ? ( diff --git a/src/core/Toggle/Toggle.stories.tsx b/src/core/Toggle/Toggle.stories.tsx index 978f98217..6e05d4b33 100644 --- a/src/core/Toggle/Toggle.stories.tsx +++ b/src/core/Toggle/Toggle.stories.tsx @@ -15,17 +15,12 @@ Default.args = {}; export const Checked = Template.bind({}); Checked.args = { - checked: true, + defaultChecked: true, disabled: false, }; export const Disabled = Template.bind({}); Disabled.args = { - checked: false, + defaultChecked: false, disabled: true, }; - -export const Small = Template.bind({}); -Small.args = { - size: "small", -}; diff --git a/src/core/Toggle/__snapshots__/Toggle.stories.tsx.snap b/src/core/Toggle/__snapshots__/Toggle.stories.tsx.snap index b2ac92808..298f7f77d 100644 --- a/src/core/Toggle/__snapshots__/Toggle.stories.tsx.snap +++ b/src/core/Toggle/__snapshots__/Toggle.stories.tsx.snap @@ -10,7 +10,7 @@ exports[`Components/Toggle Checked smoke-test 1`] = ` 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" > @@ -27,7 +27,7 @@ exports[`Components/Toggle Default smoke-test 1`] = ` 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" > @@ -47,24 +47,7 @@ exports[`Components/Toggle Disabled smoke-test 1`] = ` > - - -
-`; - -exports[`Components/Toggle Small smoke-test 1`] = ` -
- From 6289415b2a468a055486fce19b57fe335fb4eae8 Mon Sep 17 00:00:00 2001 From: April Smith Date: Thu, 5 Dec 2024 21:03:35 +0000 Subject: [PATCH 4/6] Publish v15.1.4-dev.84d6f05 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 00bbd5e5a..1704f142e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ably/ui", - "version": "15.1.4-dev.0746ac8", + "version": "15.1.4-dev.84d6f05", "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.", "repository": { "type": "git", From 0342ae10effaa377fed4209693f598345fb6c66b Mon Sep 17 00:00:00 2001 From: April Smith Date: Thu, 5 Dec 2024 21:08:35 +0000 Subject: [PATCH 5/6] Update package version --- package.json | 2 +- src/core/Toggle.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 1704f142e..b5f71864c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ably/ui", - "version": "15.1.4-dev.84d6f05", + "version": "15.1.4", "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.", "repository": { "type": "git", diff --git a/src/core/Toggle.tsx b/src/core/Toggle.tsx index 9e209ea50..5088cb812 100644 --- a/src/core/Toggle.tsx +++ b/src/core/Toggle.tsx @@ -17,7 +17,7 @@ const Toggle: React.FC = ({ className, ...props }) => { - const rootSize = size === "sm" ? "w-[42px] h-[24]" : "w-[56px] h-32"; + const rootSize = size === "sm" ? "w-[42px] h-24" : "w-[56px] h-32"; const thumbSize = size === "sm" ? "w-[21px] h-[21px] translate-x-1 data-[state=checked]:translate-x-[20px]" From 68a8247bcdfaf4b102028c462828bbb0837aabc8 Mon Sep 17 00:00:00 2001 From: April Smith Date: Fri, 6 Dec 2024 10:30:49 +0000 Subject: [PATCH 6/6] Update after rebase --- src/core/Toggle.tsx | 1 - src/core/Toggle/__snapshots__/Toggle.stories.tsx.snap | 6 +++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/core/Toggle.tsx b/src/core/Toggle.tsx index 5088cb812..58e5a131b 100644 --- a/src/core/Toggle.tsx +++ b/src/core/Toggle.tsx @@ -28,7 +28,6 @@ const Toggle: React.FC = ({