squash! ✨ add Toggle component

Rename Toggle to Switch
apollographql · Aug 7, 2020 · c5286fe · c5286fe
1 parent c296a3c
commit c5286fe
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 57 deletions.
diff --git a/.gitignore b/.gitignore
@@ -31,9 +31,9 @@ tsconfig.tsbuildinfo
 /Popover
 /shared
 /SpaceKitProvider
+/Switch
 /Table
 /TextField
-/Toggle
 /Tooltip
 /typography
 

diff --git a/src/Toggle/Toggle.story.mdx → src/Switch/Switch.story.mdx b/src/Toggle/Toggle.story.mdx → src/Switch/Switch.story.mdx
@@ -1,33 +1,33 @@
-import { ToggleWrapper as Toggle } from "./toggle.story/ToggleWrapper";
-import { Toggle as OriginalToggle } from "../Toggle";
+import { Wrapper as Switch } from "./switch.story/Wrapper";
+import { Switch as OriginalSwitch } from "../Switch";
 import { colors } from "../colors";
 import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";
 import noop from "lodash/noop";
 
-<Meta title="Components/Toggle" component={OriginalToggle} />
+<Meta title="Components/Switch" component={OriginalSwitch} />
 
-# Toggle
+# Switch
 
-**Toggles** use the same props schema as the underlying library from react-spectrum.
+**Switchs** use the same props schema as the underlying library from react-spectrum.
 
 ## Uncontrolled
 
 Using the `defaultSelected` props to indicate these components are uncontrolled; meaning their state is not stored externally.
 
 <Canvas>
   <Story name="Uncontrolled Deselected">
-    <Toggle>Deslected</Toggle>
+    <Switch>Deslected</Switch>
   </Story>
   <Story name="Uncontrolled Selected">
-    <Toggle defaultSelected>Selected</Toggle>
+    <Switch defaultSelected>Selected</Switch>
   </Story>
   <Story name="Uncontrolled Disabled Deselected">
-    <Toggle isDisabled>Disabled Deslected</Toggle>
+    <Switch isDisabled>Disabled Deslected</Switch>
   </Story>
   <Story name="Uncontrolled Disabled Selected">
-    <Toggle isDisabled defaultSelected>
+    <Switch isDisabled defaultSelected>
       Disabled Selected
-    </Toggle>
+    </Switch>
   </Story>
 </Canvas>
 
@@ -37,22 +37,22 @@ Using the `defaultSelected` props to indicate these components are uncontrolled;
 
 <Canvas theme="midnight">
   <Story name="Midnight Themed Uncontrolled Deselected">
-    <Toggle theme="midnight">Deslected</Toggle>
+    <Switch theme="midnight">Deslected</Switch>
   </Story>
   <Story name="Midnight Themed Uncontrolled Selected">
-    <Toggle theme="midnight" defaultSelected>
+    <Switch theme="midnight" defaultSelected>
       Selected
-    </Toggle>
+    </Switch>
   </Story>
   <Story name="Midnight Themed Uncontrolled Disabled Deselected">
-    <Toggle theme="midnight" isDisabled>
+    <Switch theme="midnight" isDisabled>
       Disabled Deslected
-    </Toggle>
+    </Switch>
   </Story>
   <Story name="Midnight Themed Uncontrolled Disabled Selected">
-    <Toggle theme="midnight" isDisabled defaultSelected>
+    <Switch theme="midnight" isDisabled defaultSelected>
       Disabled Selected
-    </Toggle>
+    </Switch>
   </Story>
 </Canvas>
 
@@ -62,24 +62,24 @@ Pass `isSelectded` and `onChange` props to indicate these components are uncontr
 
 <Canvas>
   <Story name="Controlled Deselected">
-    <Toggle isSelected={false} setSelected={noop}>
+    <Switch isSelected={false} setSelected={noop}>
       Deslected
-    </Toggle>
+    </Switch>
   </Story>
   <Story name="Controlled Selected">
-    <Toggle isSelected setSelected={noop}>
+    <Switch isSelected setSelected={noop}>
       Selected
-    </Toggle>
+    </Switch>
   </Story>
   <Story name="Controlled Disabled Deselected">
-    <Toggle isDisabled isSelected={false} setSelected={noop}>
+    <Switch isDisabled isSelected={false} setSelected={noop}>
       Disabled Deslected
-    </Toggle>
+    </Switch>
   </Story>
   <Story name="Controlled Disabled Selected">
-    <Toggle isDisabled isSelected setSelected={noop}>
+    <Switch isDisabled isSelected setSelected={noop}>
       Disabled Selected
-    </Toggle>
+    </Switch>
   </Story>
 </Canvas>
 
@@ -89,76 +89,76 @@ You can customize the color of the checkbox's selected state with the `color` pr
 
 <Canvas>
   <Story name="Color Deselected">
-    <Toggle color={colors.green.base}>Deslected</Toggle>
+    <Switch color={colors.green.base}>Deslected</Switch>
   </Story>
   <Story name="Color Selected">
-    <Toggle color={colors.green.base} defaultSelected>
+    <Switch color={colors.green.base} defaultSelected>
       Selected
-    </Toggle>
+    </Switch>
   </Story>
   <Story name="Color Disabled Deselected">
-    <Toggle color={colors.green.base} isDisabled>
+    <Switch color={colors.green.base} isDisabled>
       Disabled Deslected
-    </Toggle>
+    </Switch>
   </Story>
   <Story name="Color Disabled Selected">
-    <Toggle color={colors.green.base} isDisabled defaultSelected>
+    <Switch color={colors.green.base} isDisabled defaultSelected>
       Disabled Selected
-    </Toggle>
+    </Switch>
   </Story>
 </Canvas>
 
 ## Focus
 
-Toggles will show a border when focused from keyboard navigation and not from touches or clicks.
+Switchs will show a border when focused from keyboard navigation and not from touches or clicks.
 
 <Canvas>
   <Story name="Focus Deselected">
-    <Toggle isFocusVisible color={colors.green.base}>
+    <Switch isFocusVisible color={colors.green.base}>
       Deslected
-    </Toggle>
+    </Switch>
   </Story>
   <Story name="Focus Selected">
-    <Toggle isFocusVisible color={colors.green.base} defaultSelected>
+    <Switch isFocusVisible color={colors.green.base} defaultSelected>
       Selected
-    </Toggle>
+    </Switch>
   </Story>
   <Story name="Focus Disabled Deselected">
-    <Toggle isFocusVisible color={colors.green.base} isDisabled>
+    <Switch isFocusVisible color={colors.green.base} isDisabled>
       Disabled Deslected
-    </Toggle>
+    </Switch>
   </Story>
   <Story name="Focus Disabled Selected">
-    <Toggle isFocusVisible color={colors.green.base} isDisabled defaultSelected>
+    <Switch isFocusVisible color={colors.green.base} isDisabled defaultSelected>
       Disabled Selected
-    </Toggle>
+    </Switch>
   </Story>
 </Canvas>
 
 ## Size
 
-Toggles support several sizes
+Switchs support several sizes
 
 ### Large
 
 <Canvas>
   <Story name="Large, Deselected">
-    <Toggle size="large">Deslected</Toggle>
+    <Switch size="large">Deslected</Switch>
   </Story>
   <Story name="Large, Selected">
-    <Toggle size="large" defaultSelected>
+    <Switch size="large" defaultSelected>
       Selected
-    </Toggle>
+    </Switch>
   </Story>
   <Story name="Large, Disabled Deselected">
-    <Toggle size="large" isDisabled>
+    <Switch size="large" isDisabled>
       Disabled Deslected
-    </Toggle>
+    </Switch>
   </Story>
   <Story name="Large, Disabled Selected">
-    <Toggle size="large" isDisabled defaultSelected>
+    <Switch size="large" isDisabled defaultSelected>
       Disabled Selected
-    </Toggle>
+    </Switch>
   </Story>
 </Canvas>
 

diff --git a/src/Toggle/index.tsx → src/Switch/index.tsx b/src/Toggle/index.tsx → src/Switch/index.tsx
@@ -9,9 +9,9 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 import { assertUnreachable } from "../shared/assertUnreachable";
 import { motion } from "framer-motion";
 import { useSpaceKitProvider } from "../SpaceKitProvider";
-import { Label } from "./toggle/Label";
+import { Label } from "./switch/Label";
 
-type ToggleProps = {
+type SwitchProps = {
   /**
    * `className` to apply to the bounding `label`
    */
@@ -60,7 +60,7 @@ type ToggleProps = {
 } & Parameters<typeof useSwitch>[0] &
   Parameters<typeof useFocusRing>[0];
 
-export const Toggle: React.FC<ToggleProps> & { Label: typeof Label } = ({
+export const Switch: React.FC<SwitchProps> & { Label: typeof Label } = ({
   className,
   style,
   color = colors.blue.base,
@@ -194,4 +194,4 @@ export const Toggle: React.FC<ToggleProps> & { Label: typeof Label } = ({
   );
 };
 
-Toggle.Label = Label;
+Switch.Label = Label;
diff --git a/src/Toggle/toggle.story/ToggleWrapper.tsx → src/Switch/switch.story/Wrapper.tsx b/src/Toggle/toggle.story/ToggleWrapper.tsx → src/Switch/switch.story/Wrapper.tsx
@@ -1,17 +1,17 @@
 import React from "react";
-import { Toggle } from "../../Toggle";
+import { Switch } from "../../Switch";
 import { ClassNames } from "@emotion/core";
 import { colors } from "../../colors";
 import { mergeProps } from "@react-aria/utils";
 import { assertUnreachable } from "../../shared/assertUnreachable";
 
-export const ToggleWrapper: React.FC<React.ComponentProps<typeof Toggle>> = (
+export const Wrapper: React.FC<React.ComponentProps<typeof Switch>> = (
   props
 ) => {
   return (
     <ClassNames>
       {({ css, cx }) => (
-        <Toggle
+        <Switch
           {...mergeProps(props, {
             className: cx(
               props.className,

diff --git a/src/Toggle/toggle/Label.tsx → src/Switch/switch/Label.tsx b/src/Toggle/toggle/Label.tsx → src/Switch/switch/Label.tsx