Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(spindle-ui): add TextButton disabled style #821

Merged
merged 2 commits into from
Oct 11, 2023
Merged

fix(spindle-ui): add TextButton disabled style #821

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dc6f5ac
fix(spindle-ui): add TextButton disabled style
herablog Oct 6, 2023
fb68e58
docs(spindle-ui): add TextButton disabled style
herablog Oct 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions packages/spindle-ui/src/TextButton/TextButton.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -79,6 +83,10 @@
text-decoration: none;
}

.spui-TextButton:disabled {
text-decoration: none;
}

@media (hover: hover) {
.spui-TextButton:hover {
text-decoration: none;
Expand All @@ -87,4 +95,8 @@
:is(.spui-TextButton--hasIcon, .spui-TextButton--underlinehover):hover {
text-decoration: underline;
}

.spui-TextButton:disabled:hover {
text-decoration: none;
}
}
105 changes: 105 additions & 0 deletions packages/spindle-ui/src/TextButton/TextButton.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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

テキストのアンダーラインは以下のルールで表示されます。
Expand Down Expand Up @@ -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`は様々な箇所での利用が想定されるため、以下のようにスタイルを上書きして利用できます。

Expand Down