From 90e0f3e8259c3e9258bb52a318f2dd108d249eb2 Mon Sep 17 00:00:00 2001 From: Arno V Date: Sun, 14 Apr 2024 17:26:19 -0400 Subject: [PATCH] feat(Toggle): adding support for noBorder (#496) ## Summary by CodeRabbit - **New Features** - Added a `noBorder` option to the Toggle component, allowing for borderless styling. - **Style** - Updated Toggle component styling, including text color and label margins. - **Documentation** - Enhanced documentation with examples of the new `noBorder` feature and dynamic labels. --- .../documentation/src/Form/Toggle.stories.tsx | 18 ++++++++++++++++++ .../ui-form/src/components/Toggle/Toggle.tsx | 2 ++ .../src/components/Toggle/ToggleTypes.d.ts | 5 +++++ .../Toggle/__tests__/Toggle.test.tsx | 7 ++----- .../ui-form/src/components/Toggle/utilities.ts | 17 +++++++++++++---- 5 files changed, 40 insertions(+), 9 deletions(-) diff --git a/packages/documentation/src/Form/Toggle.stories.tsx b/packages/documentation/src/Form/Toggle.stories.tsx index e818fe58..c6086c68 100644 --- a/packages/documentation/src/Form/Toggle.stories.tsx +++ b/packages/documentation/src/Form/Toggle.stories.tsx @@ -14,6 +14,7 @@ export default { focusMode: "system", labelHidden: false, label: "Toggle", + noBorder: false, }, argTypes: { mode: { @@ -37,6 +38,23 @@ export const Basic: Story = (args) => { ); }; +export const DynamicLabel: Story = (args) => { + const [checked, setChecked] = useState(true); + + return ( +
+
Edit Mode:
+ +
+ ); +}; + export const InContext: Story = (args) => { const [checked1, setChecked1] = useState(true); const [checked2, setChecked2] = useState(false); diff --git a/packages/ui-form/src/components/Toggle/Toggle.tsx b/packages/ui-form/src/components/Toggle/Toggle.tsx index c245b5e6..06c0aea9 100644 --- a/packages/ui-form/src/components/Toggle/Toggle.tsx +++ b/packages/ui-form/src/components/Toggle/Toggle.tsx @@ -10,12 +10,14 @@ export const Toggle = ({ mode = "system", focusMode = "system", spacing, + noBorder = false, }: ToggleProps) => { const toggleClasses = getToggleClasses({ mode, focusMode, labelHidden, spacing, + noBorder, }); const handleChange = (e: React.ChangeEvent) => { onChange?.(e.target.checked); diff --git a/packages/ui-form/src/components/Toggle/ToggleTypes.d.ts b/packages/ui-form/src/components/Toggle/ToggleTypes.d.ts index cdb65640..c471f714 100644 --- a/packages/ui-form/src/components/Toggle/ToggleTypes.d.ts +++ b/packages/ui-form/src/components/Toggle/ToggleTypes.d.ts @@ -33,4 +33,9 @@ export type ToggleProps = { * The type of Toggle. This will change the color of the Toggle. */ mode?: "dark" | "light" | "system" | "alt-system"; + /** + * Whether or not to render the Toggle with a border. + * @default false + */ + noBorder?: boolean; } & SpacingProps; diff --git a/packages/ui-form/src/components/Toggle/__tests__/Toggle.test.tsx b/packages/ui-form/src/components/Toggle/__tests__/Toggle.test.tsx index 31a23c08..31345890 100644 --- a/packages/ui-form/src/components/Toggle/__tests__/Toggle.test.tsx +++ b/packages/ui-form/src/components/Toggle/__tests__/Toggle.test.tsx @@ -4,7 +4,6 @@ import { render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { expectToHaveClasses } from "../../../../../../configuration/tests-helpers"; -import { TOGGLE_CLASSNAME } from "../../../common/constants"; import { Toggle } from "../.."; describe("Toggle (exceptions)", () => { @@ -28,10 +27,9 @@ describe("Toggle modifiers", () => { const input = screen.getByRole("checkbox"); const toggle = input.nextElementSibling; - expectToHaveClasses(label, ["ml-3", "text-sm", "text-copy-lighter"]); + expectToHaveClasses(label, ["ml-2", "text-sm", "text-copy-lighter"]); if (toggle) { expectToHaveClasses(toggle, [ - TOGGLE_CLASSNAME, "after:absolute", "after:bg-surface-light", "after:border-surface-light", @@ -78,10 +76,9 @@ describe("Toggle modifiers", () => { const label = screen.getByText("toto"); const input = screen.getByRole("checkbox"); const toggle = input.nextElementSibling; - expectToHaveClasses(label, ["ml-3", "text-sm", "text-copy-dark"]); + expectToHaveClasses(label, ["ml-2", "text-sm", "text-copy-dark"]); if (toggle) { expectToHaveClasses(toggle, [ - TOGGLE_CLASSNAME, "peer", "h-6", "w-11", diff --git a/packages/ui-form/src/components/Toggle/utilities.ts b/packages/ui-form/src/components/Toggle/utilities.ts index 2186f50c..62e37708 100644 --- a/packages/ui-form/src/components/Toggle/utilities.ts +++ b/packages/ui-form/src/components/Toggle/utilities.ts @@ -5,7 +5,7 @@ import clsx from "clsx"; import { TOGGLE_CLASSNAME } from "../../common/constants"; const getToggleBaseClasses = () => { - return clsx(TOGGLE_CLASSNAME, "peer", "h-6", "w-11", "rounded-full"); + return clsx("peer", "h-6", "w-11", "rounded-full"); }; const getToggleKnobFocusClasses = ({ @@ -60,10 +60,13 @@ const getToggleKnobOffClasses = () => { const getToggleColorClasses = ({ mode, + noBorder, }: { mode: "dark" | "light" | "system" | "alt-system"; + noBorder: boolean; }) => { return clsx({ + border: !noBorder, "border-border-dark bg-surface-medium": mode === "light", "border-border-light bg-surface-darker": mode === "dark", "border-border-light bg-surface-darker dark:border-border-dark dark:bg-surface-medium": @@ -82,7 +85,7 @@ const getLabelClasses = ({ }) => { return labelHidden ? "sr-only" - : clsx("ml-3 text-sm", { + : clsx("ml-2 text-sm", { "text-copy-dark": mode === "light", "text-copy-lighter": mode === "dark", "text-copy-lighter dark:text-copy-dark": mode === "alt-system", @@ -91,7 +94,11 @@ const getLabelClasses = ({ }; const getWrapperClasses = ({ spacing }: SpacingProps) => { - return clsx("relative flex cursor-pointer items-center", getSpacing(spacing)); + return clsx( + TOGGLE_CLASSNAME, + "relative flex cursor-pointer items-center", + getSpacing(spacing), + ); }; export const getToggleClasses = ({ @@ -99,15 +106,17 @@ export const getToggleClasses = ({ focusMode, labelHidden, spacing, + noBorder, }: { focusMode: "dark" | "light" | "system" | "alt-system"; labelHidden: boolean; mode: "dark" | "light" | "system" | "alt-system"; + noBorder: boolean; } & SpacingProps) => { return { toggle: clsx( getToggleBaseClasses(), - getToggleColorClasses({ mode }), + getToggleColorClasses({ mode, noBorder }), getToggleKnobFocusClasses({ focusMode }), getToggleKnobOffClasses(), getToggleKnobOnClasses(),