feat: checkboxのindeterminate属性に関するJSの処理

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

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/packages/tailwindcss/package.json b/packages/tailwindcss/package.json
@@ -31,6 +31,7 @@
     "@storybook/addon-essentials": "^6.3.2",
     "@storybook/addon-links": "^6.3.2",
     "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/client-api": "^6.3.7",
     "@storybook/html": "^6.3.2",
     "autoprefixer": "^10.3.2",
     "babel-loader": "^8.2.2",

diff --git a/packages/tailwindcss/stories/Input.stories.js b/packages/tailwindcss/stories/Input.stories.js
@@ -1,3 +1,5 @@
+import { useEffect } from "@storybook/client-api";
+
 export default {
   title: "Forms/Input",
 };
@@ -53,14 +55,15 @@ const RadioTemplate = () => {
 export const Radio = RadioTemplate.bind({});
 
 const CheckboxTemplate = () => {
+  useEffect(() => {
+    document.querySelector("#checkbox input:nth-child(3)").indeterminate = true;
+  });
   return `
+    <div id="checkbox">
       <input type="checkbox" value="checkbox-1" class="mr-4" checked />
       <input type="checkbox" value="checkbox-2" class="mr-4" />
-      <input type="checkbox" value="checkbox-3" class="is-indeterminate" />
-
-      <script>
-        document.querySelector(".is-indeterminate").indeterminate = true;
-      </script>
+      <input type="checkbox" value="checkbox-3" />
+    </div>
   `;
 };
 export const Checkbox = CheckboxTemplate.bind({});

diff --git a/yarn.lock b/yarn.lock
@@ -2512,7 +2512,7 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/[email protected]":
+"@storybook/[email protected]", "@storybook/client-api@^6.3.7":
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.3.7.tgz#cb1dca05467d777bd09aadbbdd1dd22ca537ce14"
   integrity sha512-8wOH19cMIwIIYhZy5O5Wl8JT1QOL5kNuamp9GPmg5ff4DtnG+/uUslskRvsnKyjPvl+WbIlZtBVWBiawVdd/yQ==