Skip to content

Commit

Permalink
BREAKING CHANGE(web-twig): Remove inverted variant from Button and Bu…
Browse files Browse the repository at this point in the history 
…ttonLink #DS-1445
  • Loading branch information
@crishpeen
crishpeen committed Aug 29, 2024
1 parent 071d834 commit 568d575
Show file tree
Hide file tree
Showing 9 changed files with 34 additions and 94 deletions.
2 changes: 1 addition & 1 deletion packages/web-twig/src/Resources/components/Button/Button.stories.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{% block content %}

{% set colors = [
'primary', 'secondary', 'tertiary', 'inverted', 'success', 'informative', 'warning', 'danger'
'primary', 'secondary', 'tertiary', 'success', 'informative', 'warning', 'danger'
] %}
{% set sizes = [ 'small', 'medium', 'large' ] %}

Expand Down
22 changes: 11 additions & 11 deletions packages/web-twig/src/Resources/components/Button/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,17 +34,17 @@ Without lexer:

## API

| Name | Type | Default | Required | Description |
| ------------ | ----------------------------------------------------------------------------------------- | --------- | -------- | -------------------------------------------------------------------------- |
| `color` | [Action Color dictionary][dictionary-color], [Emotion Color dictionary][dictionary-color] | `primary` | ✕ | Color variant |
| `formtarget` | `string` | `null` | ✕ | Submit button target |
| `isBlock` | `bool` | `false` | ✕ | Span the element to the full width of its parent |
| `isDisabled` | `bool` | `false` | ✕ | If true, Button is disabled |
| `isLoading` | `bool` | `false` | ✕ | If true, Button is in a loading state, disabled and the Spinner is visible |
| `isSquare` | `bool` | `false` | ✕ | If true, Button is square, usually only with an Icon |
| `name` | `string` | `null` | ✕ | Submit button name |
| `size` | [Size dictionary][dictionary-size] | `medium` | ✕ | Size variant |
| `type` | `string` | `button` | ✕ | Type of the Button |
| Name | Type | Default | Required | Description |
| ------------ | ------------------------------------------------------------------------------------------------ | --------- | -------- | -------------------------------------------------------------------------- |
| `color` | [Action Button Color dictionary][dictionary-color], [Emotion Color dictionary][dictionary-color] | `primary` | ✕ | Color variant |
| `formtarget` | `string` | `null` | ✕ | Submit button target |
| `isBlock` | `bool` | `false` | ✕ | Span the element to the full width of its parent |
| `isDisabled` | `bool` | `false` | ✕ | If true, Button is disabled |
| `isLoading` | `bool` | `false` | ✕ | If true, Button is in a loading state, disabled and the Spinner is visible |
| `isSquare` | `bool` | `false` | ✕ | If true, Button is square, usually only with an Icon |
| `name` | `string` | `null` | ✕ | Submit button name |
| `size` | [Size dictionary][dictionary-size] | `medium` | ✕ | Size variant |
| `type` | `string` | `button` | ✕ | Type of the Button |

On top of the API options, the components accept [additional attributes][readme-additional-attributes].
If you need more control over the styling of a component, you can use [style props][readme-style-props]
Expand Down
16 changes: 2 additions & 14 deletions packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@

<DocsSection title={{ title }}>
{% for color in colors %}

{% set renderedContent %}
<div>
<Button color={ color } size={ size } onclick="alert('Button clicked')">
Button {{ color }}
</Button>
Expand All @@ -18,18 +17,7 @@
<VisuallyHidden>Menu</VisuallyHidden>
<Icon name="hamburger" />
</Button>
{% endset %}

{% if color is same as('inverted') %}
<DocsBox>
{{ renderedContent }}
</DocsBox>
{% else %}
<div>
{{ renderedContent }}
</div>
{% endif %}

</div>
{% endfor %}
</DocsSection>

Expand Down
16 changes: 2 additions & 14 deletions packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@

<DocsSection title={{ title }}>
{% for color in colors %}

{% set renderedContent %}
<div>
<Button color={ color } size={ size } onclick="alert('Button clicked')" isDisabled>
Button {{ color }}
</Button>
Expand All @@ -18,18 +17,7 @@
<VisuallyHidden>Menu</VisuallyHidden>
<Icon name="hamburger" />
</Button>
{% endset %}

{% if color is same as('inverted') %}
<DocsBox>
{{ renderedContent }}
</DocsBox>
{% else %}
<div>
{{ renderedContent }}
</div>
{% endif %}

</div>
{% endfor %}
</DocsSection>

Expand Down
16 changes: 2 additions & 14 deletions packages/web-twig/src/Resources/components/Button/stories/ButtonLoading.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@

<DocsSection title={{ title }}>
{% for color in colors %}

{% set renderedContent %}
<div>
<Button color={ color } size={ size } onclick="alert('Button clicked')" isLoading>
Button {{ color }}
</Button>
Expand All @@ -18,18 +17,7 @@
<VisuallyHidden>Menu</VisuallyHidden>
<Icon name="hamburger" />
</Button>
{% endset %}

{% if color is same as('inverted') %}
<DocsBox>
{{ renderedContent }}
</DocsBox>
{% else %}
<div>
{{ renderedContent }}
</div>
{% endif %}

</div>
{% endfor %}
</DocsSection>

Expand Down
2 changes: 1 addition & 1 deletion packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.stories.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{% block content %}

{% set colors = [
'primary', 'secondary', 'tertiary', 'inverted', 'success', 'informative', 'warning', 'danger'
'primary', 'secondary', 'tertiary', 'success', 'informative', 'warning', 'danger'
] %}
{% set sizes = [ 'small', 'medium', 'large' ] %}

Expand Down
22 changes: 11 additions & 11 deletions packages/web-twig/src/Resources/components/ButtonLink/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,17 @@ Without lexer:

## API

| Name | Type | Default | Required | Description |
| ------------ | ----------------------------------------------------------------------------------------- | --------- | -------- | ------------------------------------------------------------------------------ |
| `color` | [Action Color dictionary][dictionary-color], [Emotion Color dictionary][dictionary-color] | `primary` | ✕ | Color variant |
| `href` | `string` | — | ✓ | Link URL |
| `isBlock` | `bool` | `false` | ✕ | Span the element to the full width of its parent |
| `isDisabled` | `bool` | `false` | ✕ | If true, ButtonLink is disabled |
| `isLoading` | `bool` | `false` | ✕ | If true, ButtonLink is in a loading state, disabled and the Spinner is visible |
| `isSquare` | `bool` | `false` | ✕ | If true, ButtonLink is square, usually only with an Icon |
| `size` | [Size dictionary][dictionary-size] | `medium` | ✕ | Size variant |
| `target` | `string` | `null` | ✕ | Browsing context for the link |
| `title` | `string` | `null` | ✕ | Optional title to display on hover |
| Name | Type | Default | Required | Description |
| ------------ | ------------------------------------------------------------------------------------------------ | --------- | -------- | ------------------------------------------------------------------------------ |
| `color` | [Action Button Color dictionary][dictionary-color], [Emotion Color dictionary][dictionary-color] | `primary` | ✕ | Color variant |
| `href` | `string` | — | ✓ | Link URL |
| `isBlock` | `bool` | `false` | ✕ | Span the element to the full width of its parent |
| `isDisabled` | `bool` | `false` | ✕ | If true, ButtonLink is disabled |
| `isLoading` | `bool` | `false` | ✕ | If true, ButtonLink is in a loading state, disabled and the Spinner is visible |
| `isSquare` | `bool` | `false` | ✕ | If true, ButtonLink is square, usually only with an Icon |
| `size` | [Size dictionary][dictionary-size] | `medium` | ✕ | Size variant |
| `target` | `string` | `null` | ✕ | Browsing context for the link |
| `title` | `string` | `null` | ✕ | Optional title to display on hover |

On top of the API options, the components accept [additional attributes][readme-additional-attributes].
If you need more control over the styling of a component, you can use [style props][readme-style-props]
Expand Down
16 changes: 2 additions & 14 deletions packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@

<DocsSection title={{ title }}>
{% for color in colors %}

{% set renderedContent %}
<div>
<ButtonLink color={ color } size={ size } href="#">
Button {{ color }}
</ButtonLink>
Expand All @@ -18,18 +17,7 @@
<VisuallyHidden>Menu</VisuallyHidden>
<Icon name="link" />
</ButtonLink>
{% endset %}

{% if color is same as('inverted') %}
<DocsBox>
{{ renderedContent }}
</DocsBox>
{% else %}
<div>
{{ renderedContent }}
</div>
{% endif %}

</div>
{% endfor %}
</DocsSection>

Expand Down
16 changes: 2 additions & 14 deletions packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@

<DocsSection title={{ title }}>
{% for color in colors %}

{% set renderedContent %}
<div>
<ButtonLink color={ color } size={ size } href="#" isDisabled>
Button {{ color }}
</ButtonLink>
Expand All @@ -18,18 +17,7 @@
<VisuallyHidden>Menu</VisuallyHidden>
<Icon name="link" />
</ButtonLink>
{% endset %}

{% if color is same as('inverted') %}
<DocsBox>
{{ renderedContent }}
</DocsBox>
{% else %}
<div>
{{ renderedContent }}
</div>
{% endif %}

</div>
{% endfor %}
</DocsSection>

Expand Down

0 comments on commit 568d575

Please sign in to comment.