Skip to content

Commit

Permalink
BREAKING CHANGE(web-twig): Button/ButtonLink have isSymmetrical prop …
Browse files Browse the repository at this point in the history 
…instead of isSquare #DS-1484
  • Loading branch information
@curdaj @literat
curdaj authored and literat committed Oct 17, 2024
1 parent 04a6ebb commit 7fdccb4
Show file tree
Hide file tree
Showing 19 changed files with 47 additions and 47 deletions.
6 changes: 3 additions & 3 deletions packages/web-twig/src/Resources/components/Button/Button.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{%- set _isBlock = props.isBlock | default(false) -%}
{%- set _isDisabled = props.isDisabled | default(false) -%}
{%- set _isLoading = props.isLoading | default(false) -%}
{%- set _isSquare = props.isSquare | default(false) -%}
{%- set _isSymmetrical = props.isSymmetrical | default(false) -%}
{%- set _type = props.type | default('button') -%}

{# Class names #}
Expand All @@ -14,14 +14,14 @@
{%- set _rootColorClassName = _spiritClassPrefix ~ 'Button--' ~ _color -%}
{%- set _rootLoadingClassName = _isLoading ? _spiritClassPrefix ~ 'Button--loading' : null -%}
{%- set _rootSizeClassName = _spiritClassPrefix ~ 'Button--' ~ _size -%}
{%- set _rootSquareClassName = _isSquare ? _spiritClassPrefix ~ 'Button--square' : null -%}
{%- set _rootSymmetricalClassName = _isSymmetrical ? _spiritClassPrefix ~ 'Button--symmetrical' : null -%}

{# Attributes #}
{%- set _disabledAttr = _isDisabled or _isLoading ? 'disabled' : null -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _rootClassName, _rootColorClassName, _rootSizeClassName, _rootBlockClassName, _rootLoadingClassName, _rootSquareClassName, _styleProps.className ] -%}
{%- set _classNames = [ _rootClassName, _rootColorClassName, _rootSizeClassName, _rootBlockClassName, _rootLoadingClassName, _rootSymmetricalClassName, _styleProps.className ] -%}
{%- set _allowedAttributes = [ 'formtarget', 'name' ] -%}

<button
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 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 |
| 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 |
| `isSymmetrical` | `bool` | `false` | ✕ | If true, Button has symmetrical dimensions, 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
2 changes: 1 addition & 1 deletion packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<Icon name="hamburger" marginRight="space-400" />
Menu
</Button>
<Button color={ color } size={ size } isSquare>
<Button color={ color } size={ size } isSymmetrical>
<VisuallyHidden>Menu</VisuallyHidden>
<Icon name="hamburger" />
</Button>
Expand Down
2 changes: 1 addition & 1 deletion packages/web-twig/src/Resources/components/Button/stories/ButtonDisabled.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<Icon name="hamburger" marginRight="space-400" />
Menu
</Button>
<Button color={ color } size={ size } isDisabled isSquare>
<Button color={ color } size={ size } isDisabled isSymmetrical>
<VisuallyHidden>Menu</VisuallyHidden>
<Icon name="hamburger" />
</Button>
Expand Down
2 changes: 1 addition & 1 deletion packages/web-twig/src/Resources/components/Button/stories/ButtonLoading.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<Icon name="hamburger" marginRight="space-400" />
Menu
</Button>
<Button color={ color } size={ size } isLoading isSquare>
<Button color={ color } size={ size } isLoading isSymmetrical>
<VisuallyHidden>Menu</VisuallyHidden>
<Icon name="hamburger" />
</Button>
Expand Down
6 changes: 3 additions & 3 deletions packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{%- set _isBlock = props.isBlock | default(false) -%}
{%- set _isDisabled = props.isDisabled | default(false) -%}
{%- set _isLoading = props.isLoading | default(false) -%}
{%- set _isSquare = props.isSquare | default(false) -%}
{%- set _isSymmetrical = props.isSymmetrical | default(false) -%}

{# Class names #}
{%- set _rootClassName = _spiritClassPrefix ~ 'Button' -%}
Expand All @@ -15,11 +15,11 @@
{%- set _rootLoadingClassName = _isLoading ? _spiritClassPrefix ~ 'Button--loading' : null -%}
{%- set _rootColorClassName = _spiritClassPrefix ~ 'Button--' ~ _color -%}
{%- set _rootSizeClassName = _spiritClassPrefix ~ 'Button--' ~ _size -%}
{%- set _rootSquareClassName = _isSquare ? _spiritClassPrefix ~ 'Button--square' : null -%}
{%- set _rootSymmetricalClassName = _isSymmetrical ? _spiritClassPrefix ~ 'Button--symmetrical' : null -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _rootClassName, _rootColorClassName, _rootBlockClassName, _rootDisabledClassName, _rootLoadingClassName, _rootSizeClassName, _rootSquareClassName, _styleProps.className ] -%}
{%- set _classNames = [ _rootClassName, _rootColorClassName, _rootBlockClassName, _rootDisabledClassName, _rootLoadingClassName, _rootSizeClassName, _rootSymmetricalClassName, _styleProps.className ] -%}
{%- set _allowedAttributes = [ 'target', 'title' ] -%}

<a
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 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 |
| 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 |
| `isSymmetrical` | `bool` | `false` | ✕ | If true, ButtonLink has symmetrical dimensions, 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
2 changes: 1 addition & 1 deletion packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkColorsSizes.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<Icon name="link" marginRight="space-400" />
Menu
</ButtonLink>
<ButtonLink color={ color } size={ size } href="#" isSquare>
<ButtonLink color={ color } size={ size } href="#" isSymmetrical>
<VisuallyHidden>Menu</VisuallyHidden>
<Icon name="link" />
</ButtonLink>
Expand Down
2 changes: 1 addition & 1 deletion packages/web-twig/src/Resources/components/ButtonLink/stories/ButtonLinkDisabled.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<Icon name="link" marginRight="space-400" />
Menu
</ButtonLink>
<ButtonLink color={ color } size={ size } href="#" isDisabled isSquare>
<ButtonLink color={ color } size={ size } href="#" isDisabled isSymmetrical>
<VisuallyHidden>Menu</VisuallyHidden>
<Icon name="link" />
</ButtonLink>
Expand Down
2 changes: 1 addition & 1 deletion packages/web-twig/src/Resources/components/Header/HeaderMobileActions.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
color="secondary"
data-spirit-target="{{ '#' ~ _dialogId }}"
data-spirit-toggle="offcanvas"
isSquare
isSymmetrical
>
<Icon name="hamburger" />
<VisuallyHidden>{{ _menuToggleLabel }}</VisuallyHidden>
Expand Down
4 changes: 2 additions & 2 deletions ...rc/Resources/components/Header/__tests__/__snapshots__/headerMobileActions.twig.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@
</head>
<body>
<div class="HeaderMobileActions">
<button aria-controls="my-menu" aria-expanded="false" data-spirit-target="#my-menu" data-spirit-toggle="offcanvas" class="Button Button--secondary Button--medium Button--square" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="a1fcc7134edb5d176925f0fd5ddd9d42" aria-hidden="true">
<button aria-controls="my-menu" aria-expanded="false" data-spirit-target="#my-menu" data-spirit-toggle="offcanvas" class="Button Button--secondary Button--medium Button--symmetrical" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="a1fcc7134edb5d176925f0fd5ddd9d42" aria-hidden="true">
<path d="M4 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H4C3.45 16 3 16.45 3 17C3 17.55 3.45 18 4 18ZM4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13ZM3 7C3 7.55 3.45 8 4 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H4C3.45 6 3 6.45 3 7Z" fill="currentColor">
</path></svg> <span class="accessibility-hidden">Menu</span></button>
</div>
<!-- Render with all props -->

<div class="HeaderMobileActions">
<span>custom content</span> <button aria-controls="my-menu" aria-expanded="false" data-spirit-target="#my-menu" data-spirit-toggle="offcanvas" class="Button Button--secondary Button--medium Button--square" type="button"><svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
<span>custom content</span> <button aria-controls="my-menu" aria-expanded="false" data-spirit-target="#my-menu" data-spirit-toggle="offcanvas" class="Button Button--secondary Button--medium Button--symmetrical" type="button"><svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true">
<use href="#a1fcc7134edb5d176925f0fd5ddd9d42">
</use></svg> <span class="accessibility-hidden">Open menu</span></button>
</div>
Expand Down
Loading

0 comments on commit 7fdccb4

Please sign in to comment.