Merge pull request #821 from openameba/fix/text-button-disabled

fix(spindle-ui): add TextButton disabled style
openameba · Oct 11, 2023 · 1e912c8 · 1e912c8
2 parents 3eb9fa0 + fb68e58
commit 1e912c8
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 0 deletions.
diff --git a/packages/spindle-ui/src/TextButton/TextButton.css b/packages/spindle-ui/src/TextButton/TextButton.css
@@ -27,6 +27,10 @@
   -webkit-tap-highlight-color: var(--TextButton-tapHighlightColor);
 }
 
+.spui-TextButton:disabled {
+  opacity: 0.3;
+}
+
 .spui-TextButton:focus {
   outline: 2px solid var(--TextButton-onFocus-outlineColor);
   outline-offset: 1px;
@@ -79,6 +83,10 @@
   text-decoration: none;
 }
 
+.spui-TextButton:disabled {
+  text-decoration: none;
+}
+
 @media (hover: hover) {
   .spui-TextButton:hover {
     text-decoration: none;
@@ -87,4 +95,8 @@
   :is(.spui-TextButton--hasIcon, .spui-TextButton--underlinehover):hover {
     text-decoration: underline;
   }
+
+  .spui-TextButton:disabled:hover {
+    text-decoration: none;
+  }
 }
diff --git a/packages/spindle-ui/src/TextButton/TextButton.stories.mdx b/packages/spindle-ui/src/TextButton/TextButton.stories.mdx
@@ -43,6 +43,27 @@ import { ChevronRightBold, CameraFill, PencilAdd } from '../Icon';
   `}
 />
 
+## Normal Disabled
+
+<Preview withSource="open">
+  <Story name="NormalDisabled">
+    <TextButton {...actions('onClick', 'onMouseOver')} disabled>もっと見る</TextButton>
+  </Story>
+</Preview>
+
+<Source
+  code={`
+<TextButton disabled>もっと見る</TextButton>
+  `}
+/>
+
+<Source
+  language='html'
+  code={`
+<button class="spui-TextButton">もっと見る</button>
+  `}
+/>
+
 ## Normal With Icon
 
 <Preview withSource="open">
@@ -64,6 +85,27 @@ import { ChevronRightBold, CameraFill, PencilAdd } from '../Icon';
   `}
 />
 
+## Normal With Icon Disabled
+
+<Preview withSource="open">
+  <Story name="NormalWithIconDisabled">
+    <TextButton icon={<PencilAdd aria-hidden="true" />} iconPosition="start" {...actions('onClick', 'onMouseOver')} disabled>ブログを書く</TextButton>
+  </Story>
+</Preview>
+
+<Source
+  code={`
+<TextButton icon={<PencilAdd aria-hidden="true" />} iconPosition="start" disabled>ブログを書く</TextButton>
+  `}
+/>
+
+<Source
+  language='html'
+  code={`
+<button class="spui-TextButton spui-TextButton--hasIcon spui-TextButton--iconstart" disabled><span class="spui-TextButton-icon"><svg>...</svg></span>ブログを書く</button>
+  `}
+/>
+
 ## Subtle
 
 <Preview withSource="open">
@@ -85,6 +127,27 @@ import { ChevronRightBold, CameraFill, PencilAdd } from '../Icon';
   `}
 />
 
+## Subtle Disabled
+
+<Preview withSource="open">
+  <Story name="SubtleDisabled">
+    <TextButton variant="subtle" {...actions('onClick', 'onMouseOver')} disabled>もっと見る</TextButton>
+  </Story>
+</Preview>
+
+<Source
+  code={`
+<TextButton variant="subtle" disabled>もっと見る</TextButton>
+  `}
+/>
+
+<Source
+  language='html'
+  code={`
+<button class="spui-TextButton spui-TextButton--subtle" disabled>もっと見る</button>
+  `}
+/>
+
 ## Subtle With Icon
 
 <Preview withSource="open">
@@ -106,6 +169,27 @@ import { ChevronRightBold, CameraFill, PencilAdd } from '../Icon';
   `}
 />
 
+## Subtle With Icon Disabled
+
+<Preview withSource="open">
+  <Story name="SubtleWithIconDisabled">
+    <TextButton variant="subtle" icon={<ChevronRightBold aria-hidden="true" />} iconPosition="end" {...actions('onClick', 'onMouseOver')} disabled>もっと見る</TextButton>
+  </Story>
+</Preview>
+
+<Source
+  code={`
+<TextButton variant="subtle" icon={<ChevronRightBold aria-hidden="true" />} iconPosition="end" disabled>もっと見る</TextButton>
+  `}
+/>
+
+<Source
+  language='html'
+  code={`
+<button class="spui-TextButton spui-TextButton--subtle spui-TextButton--hasIcon spui-TextButton--iconend" disabled><span class="spui-TextButton-icon"><svg>...</svg></span>もっと見る</button>
+  `}
+/>
+
 ## Underline Patterns
 
 テキストのアンダーラインは以下のルールで表示されます。
@@ -135,6 +219,27 @@ import { ChevronRightBold, CameraFill, PencilAdd } from '../Icon';
   `}
 />
 
+## Underline Hover Disabled
+
+<Preview withSource="open">
+  <Story name="UnderlineHoverDisabled">
+    <TextButton underline="hover" {...actions('onClick', 'onMouseOver')} disabled>もっと見る</TextButton>
+  </Story>
+</Preview>
+
+<Source
+  code={`
+<TextButton underline="hover" disabled>もっと見る</TextButton>
+  `}
+/>
+
+<Source
+  language='html'
+  code={`
+<button class="spui-TextButton spui-TextButton--underlinehover" disabled>もっと見る</button>
+  `}
+/>
+
 ## スタイルの上書き
 `TextButton`を利用する際には、ますデフォルト定義されているスタイルで要件を満たせないか検討してください。ただし、`TextButton`は様々な箇所での利用が想定されるため、以下のようにスタイルを上書きして利用できます。