feat(Toggle): adding support for noBorder (#496)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## 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.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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<any> = (args) => {
 	);
 };
 
+export const DynamicLabel: Story<any> = (args) => {
+	const [checked, setChecked] = useState(true);
+
+	return (
+		<div className="flex flex-wrap items-center gap-2">
+			<div className="text-sm">Edit Mode:</div>
+			<Toggle
+				onChange={setChecked}
+				checked={checked}
+				name="Toggle"
+				{...args}
+				label={checked ? "On" : "Off"}
+			/>
+		</div>
+	);
+};
+
 export const InContext: Story<any> = (args) => {
 	const [checked1, setChecked1] = useState(true);
 	const [checked2, setChecked2] = useState(false);

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<HTMLInputElement>) => {
 		onChange?.(e.target.checked);

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;

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",

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,23 +94,29 @@ 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 = ({
 	mode,
 	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(),