feat: toggleSwitchのsmallバリエーションを追加

tuqulore · Sep 3, 2021 · a95957e · a95957e
1 parent 50bdcf5
commit a95957e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/packages/tailwindcss/stories/ToggleSwitch.stories.js b/packages/tailwindcss/stories/ToggleSwitch.stories.js
@@ -2,13 +2,24 @@ export default {
   title: "Forms/ToggleSwitch",
 };
 
-const ToggleSwitchTemplate = () => {
+const Template = () => {
   return `
-    <div class="switch">
-      <input id="toggle" class="switch-input" type='checkbox' />
-      <label for="toggle" class="switch-label"/>
-        <span></span>
+    <div class="toggle-switch w-16 h-8">
+      <input id="default" type='checkbox' />
+      <label for="default" />
+        <span class="w-8 h-8"></span>
     </div> 
     `;
 };
-export const Default = ToggleSwitchTemplate.bind({});
+export const Default = Template.bind({});
+
+const SmallTemplate = () => {
+  return `
+    <div class="toggle-switch w-8 h-4">
+      <input id="small" type='checkbox' />
+      <label for="small" />
+        <span class="w-4 h-4"></span>
+    </div> 
+    `;
+};
+export const Small = SmallTemplate.bind({});
diff --git a/packages/tailwindcss/toggleSwitch.js b/packages/tailwindcss/toggleSwitch.js
@@ -6,16 +6,15 @@ module.exports = plugin.withOptions(
     return ({ addComponents, theme }) => {
       addComponents([
         {
-          ".switch": {
+          ".toggle-switch": {
             position: "relative",
-            width: theme("spacing.16"),
-            height: theme("spacing.8"),
+
             input: {
               position: "absolute",
               left: 0,
               top: 0,
-              width: "100%",
-              height: "100%",
+              width: theme("width.full"),
+              height: theme("height.full"),
               "z-index": 5,
               opacity: 0,
               cursor: "pointer",
@@ -30,12 +29,10 @@ module.exports = plugin.withOptions(
               "border-radius": theme("borderRadius.full"),
               transition: "0.2s",
               "box-sizing": "border-box",
+
               span: {
-                content: "",
                 position: "absolute",
-                width: theme("spacing.8"),
-                height: theme("height.full"),
-                "border-radius": "100%",
+                "border-radius": theme("borderRadius.full"),
                 left: 0,
                 top: 0,
                 "z-index": 2,