BREAKING CHANGE(web-twig): Remove onClick prop #DS-686

## Migration Guide Instead of the `onClick` prop, use native `onclick` in the `Button`, `ButtonLink`, `HeaderLink`, `HeaderDialogLink` and `Link` components. - `<Button onClick="alert('alert');" …>` → `<Button onclick="alert('alert');" …>` - `<ButtonLink onClick="alert('alert');" …>` → `<ButtonLink onclick="alert('alert');" …>` - `<HeaderLink onClick="alert('alert');" …>` → `<HeaderLink onclick="alert('alert');" …>` - `<HeaderDialogLink onClick="alert('alert');" …>` → `<HeaderDialogLink onclick="alert('alert');" …>` - `<Link onClick="alert('alert');" …>` → `<Link onclick="alert('alert');" …>` Please refer back to this guide or reach out to our team if you encounter any issues during migration.
lmc-eu · Jul 21, 2023 · ab62f78 · ab62f78
1 parent ab5606a
commit ab62f78
Show file tree

Hide file tree

Showing 17 changed files with 20 additions and 61 deletions.
diff --git a/packages/web-twig/src/Resources/components/Button/Button.twig b/packages/web-twig/src/Resources/components/Button/Button.twig
@@ -6,7 +6,6 @@
 {%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
 {%- set _isLoading = props.isLoading | default(false) | boolprop -%}
 {%- set _isSquare = props.isSquare | default(false) | boolprop -%}
-{%- set _onClick = props.onClick | default(null) -%}
 {%- set _type = props.type | default('button') -%}
 
 {# Class names #}
@@ -19,25 +18,18 @@
 
 {# Attributes #}
 {%- set _disabledAttr = _isDisabled or _isLoading ? 'disabled' : null -%}
-{%- set _onClickAttr = _onClick ? 'onclick=' ~ _onClick | escape('html_attr') : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _classNames = [ _rootClassName, _rootColorClassName, _rootSizeClassName, _rootBlockClassName, _rootLoadingClassName, _rootSquareClassName, _styleProps.className ] -%}
 {%- set _allowedAttributes = [ 'name' ] -%}
 
-{# Deprecations #}
-{% if _onClick %}
-    {% deprecated 'Button: The "onClick" property will be removed in the next major version. Use native "onclick" attribute instead.' %}
-{% endif %}
-
 <button
     {{ mainProps(props, _allowedAttributes) }}
     {{ styleProp(_styleProps) }}
     {{ classProp(_classNames) }}
     type="{{ _type }}"
     {{ _disabledAttr }}
-    {{ _onClickAttr | raw }}
 >
     {%- block content %}{% endblock %}
     {%- if _isLoading -%}

diff --git a/packages/web-twig/src/Resources/components/Button/README.md b/packages/web-twig/src/Resources/components/Button/README.md
@@ -42,7 +42,6 @@ Without lexer:
 | `isLoading`  | `bool`                                                                                    | `false`   | no       | If true, Button is in a loading state, disabled and the Spinner is visible |
 | `isSquare`   | `bool`                                                                                    | `false`   | no       | If true, Button is square, usually only with an Icon                       |
 | `name`       | `string`                                                                                  | `null`    | no       | For use a button as a form data reference                                  |
-| `onClick`    | `string`                                                                                  | `null`    | no       | JS function to call on click                                               |
 | `size`       | [Size dictionary][dictionary-size]                                                        | `medium`  | no       | Size variant                                                               |
 | `type`       | `string`                                                                                  | `button`  | no       | Type of the Button                                                         |
 

diff --git a/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig b/packages/web-twig/src/Resources/components/Button/stories/ButtonColorsSizes.twig
@@ -8,7 +8,7 @@
       {% for color in colors %}
       <div class="{% if color is same as('inverted') %}docs-Box {% endif %}my-600">
         <div>
-          <Button color={color} size={size} onClick="alert('rimmer')">Button {{ color }}</Button>
+          <Button color={color} size={size} onclick="alert('Button clicked')">Button {{ color }}</Button>
           <Button color={color} size={size}>
             <Icon name="hamburger" UNSAFE_className="mr-400" />
             Menu

diff --git a/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.twig b/packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.twig
@@ -7,7 +7,6 @@
 {%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
 {%- set _isLoading = props.isLoading | default(false) | boolprop -%}
 {%- set _isSquare = props.isSquare | default(false) | boolprop -%}
-{%- set _onClick = props.onClick | default(null) -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Button' -%}
@@ -18,9 +17,6 @@
 {%- set _rootSizeClassName = _spiritClassPrefix ~ 'Button--' ~ _size -%}
 {%- set _rootSquareClassName = _isSquare ? _spiritClassPrefix ~ 'Button--square' : null -%}
 
-{# Attributes #}
-{%- set _onClickAttr = _onClick ? 'onclick=' ~ _onClick | escape('html_attr') : null -%}
-
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _classNames = [ _rootClassName, _rootColorClassName, _rootBlockClassName, _rootDisabledClassName, _rootLoadingClassName, _rootSizeClassName, _rootSquareClassName, _styleProps.className ] -%}
@@ -29,17 +25,11 @@
     'target',
 ] -%}
 
-{# Deprecations #}
-{% if _onClick %}
-    {% deprecated 'ButtonLink: The "onClick" property will be removed in the next major version. Use native "onclick" attribute instead.' %}
-{% endif %}
-
 <a
     {{ mainProps(props, _allowedAttributes) }}
     {{ styleProp(_styleProps) }}
     {{ classProp(_classNames) }}
     href="{{ _href }}"
-    {{ _onClickAttr | raw }}
 >
     {%- block content %}{% endblock %}
     {%- if _isLoading -%}

diff --git a/packages/web-twig/src/Resources/components/ButtonLink/README.md b/packages/web-twig/src/Resources/components/ButtonLink/README.md
@@ -38,7 +38,6 @@ Without lexer:
 | `isDisabled` | `bool`                                                                                    | `false`   | no       | If true, ButtonLink is disabled                                                |
 | `isLoading`  | `bool`                                                                                    | `false`   | no       | If true, ButtonLink is in a loading state, disabled and the Spinner is visible |
 | `isSquare`   | `bool`                                                                                    | `false`   | no       | If true, ButtonLink is square, usually only with an Icon                       |
-| `onClick`    | `string`                                                                                  | `null`    | no       | JS function to call on click                                                   |
 | `target`     | `string`                                                                                  | `null`    | no       | Link target                                                                    |
 | `title`      | `string`                                                                                  | `null`    | no       | Optional title to display on hover                                             |
 

diff --git a/packages/web-twig/src/Resources/components/Header/README.md b/packages/web-twig/src/Resources/components/Header/README.md
@@ -250,12 +250,11 @@ There is no API for HeaderNavItem.
 
 ##### HeaderLink API
 
-| Prop name   | Type      | Default | Required | Description               |
-| ----------- | --------- | ------- | -------- | ------------------------- |
-| `href`      | `string`  | —       | yes      | Link URL                  |
-| `isCurrent` | `boolean` | `false` | no       | Mark link as current      |
-| `onClick`   | `string`  | `null`  | no       | Function to call on click |
-| `target`    | `string`  | `null`  | no       | HTML `target` attribute   |
+| Prop name   | Type      | Default | Required | Description             |
+| ----------- | --------- | ------- | -------- | ----------------------- |
+| `href`      | `string`  | —       | yes      | Link URL                |
+| `isCurrent` | `boolean` | `false` | no       | Mark link as current    |
+| `target`    | `string`  | `null`  | no       | HTML `target` attribute |
 
 ##### HeaderButton API
 
@@ -391,12 +390,11 @@ There is no API for HeaderDialogNavItem.
 
 ##### HeaderDialogLink API
 
-| Prop name   | Type      | Default | Required | Description               |
-| ----------- | --------- | ------- | -------- | ------------------------- |
-| `href`      | `string`  | —       | yes      | Link URL                  |
-| `isCurrent` | `boolean` | `false` | no       | Mark link as current      |
-| `onClick`   | `string`  | `null`  | no       | Function to call on click |
-| `target`    | `string`  | `null`  | no       | HTML `target` attribute   |
+| Prop name   | Type      | Default | Required | Description             |
+| ----------- | --------- | ------- | -------- | ----------------------- |
+| `href`      | `string`  | —       | yes      | Link URL                |
+| `isCurrent` | `boolean` | `false` | no       | Mark link as current    |
+| `target`    | `string`  | `null`  | no       | HTML `target` attribute |
 
 ##### HeaderDialogButton API
 

diff --git a/packages/web-twig/src/Resources/components/Header/_abstracts/Link.twig b/packages/web-twig/src/Resources/components/Header/_abstracts/Link.twig
@@ -3,7 +3,6 @@
 {%- set _class = props.class | default(null) -%}
 {%- set _href = props.href -%}
 {%- set _isCurrent = props.isCurrent | default(false) -%}
-{%- set _onClick = props.onClick | default(null) -%}
 {%- set _rootClass = props.rootClass -%}
 
 {# Class names #}
@@ -12,25 +11,18 @@
 
 {# Attributes #}
 {%- set _ariaCurrentAttr = _isCurrent ? 'aria-current=page' : null -%}
-{%- set _onClickAttr = _onClick ? 'onclick=' ~ _onClick | escape('html_attr') : null -%}
 
 {# Miscellaneous #}
 {%- set _classNames = [ _rootClassName, _rootCurrentClassName, _class ] -%}
 {%- set _allowedAttributes = [
     'target',
 ] -%}
 
-{# Deprecations #}
-{% if _onClick %}
-    {% deprecated 'Header: The "onClick" property will be removed in the next major version. Use native "onclick" attribute instead.' %}
-{% endif %}
-
 <a
     {{ mainProps(props, _allowedAttributes) }}
     {{ classProp(_classNames) }}
     href="{{ _href }}"
     {{ _ariaCurrentAttr }}
-    {{ _onClickAttr | raw }}
 >
     {% block content %}{% endblock %}
 </a>
diff --git a/packages/web-twig/src/Resources/components/Link/Link.twig b/packages/web-twig/src/Resources/components/Link/Link.twig
@@ -4,16 +4,12 @@
 {%- set _href = props.href -%}
 {%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
 {%- set _isUnderlined = props.isUnderlined | default(false) | boolprop -%}
-{%- set _onClick = props.onClick | default(null) -%}
 
 {# Class names #}
 {%- set _colorClassName = _spiritClassPrefix ~ 'link-' ~ _color -%}
 {%- set _rootDisabledClassName = _isDisabled ? _spiritClassPrefix ~ 'link-disabled' : null -%}
 {%- set _rootUnderlinedClassName = _isUnderlined ? _spiritClassPrefix ~ 'link-underlined' : null -%}
 
-{# Attributes #}
-{%- set _onClickAttr = _onClick ? 'onclick=' ~ _onClick | escape('html_attr') : null -%}
-
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _classNames = [ _colorClassName, _rootDisabledClassName, _rootUnderlinedClassName, _styleProps.className ] -%}
@@ -22,17 +18,11 @@
     'target',
 ] -%}
 
-{# Deprecations #}
-{% if _onClick %}
-    {% deprecated 'Link: The "onClick" property will be removed in the next major version. Use native "onclick" attribute instead.' %}
-{% endif %}
-
 <a
     {{ mainProps(props, _allowedAttributes) }}
     href="{{ _href }}"
     {{ styleProp(_styleProps) }}
     {{ classProp(_classNames) }}
-    {{ _onClickAttr | raw }}
 >
     {%- block content %}{% endblock %}
 </a>
diff --git a/packages/web-twig/src/Resources/components/Link/README.md b/packages/web-twig/src/Resources/components/Link/README.md
@@ -41,7 +41,6 @@ Without lexer:
 | `href`         | `string`                                         | —         | yes      | Link URL                           |
 | `isDisabled`   | `bool`                                           | `false`   | no       | If true, Link is disabled          |
 | `isUnderlined` | `bool`                                           | `false`   | no       | If true, Link is underlined        |
-| `onClick`      | `string`                                         | `null`    | no       | JS function to call on click       |
 | `target`       | `string`                                         | `null`    | no       | Link target                        |
 | `title`        | `string`                                         | `null`    | no       | Optional title to display on hover |
 

diff --git a/...__snapshots__/ComponentsSnapshotTest__test with data set buttonWithMainProps.twig__1.html b/...__snapshots__/ComponentsSnapshotTest__test with data set buttonWithMainProps.twig__1.html
@@ -5,6 +5,6 @@
     </title>
   </head>
   <body>
-    <button id="testId" name="testName" data-main="main" aria-label="label" class="Button Button--primary Button--medium" type="button" onclick="alert('&quot; test')">button</button> <button id="testId" name="testName" data-main="main" aria-label="label" onclick="alert('&quot; test')" class="Button Button--primary Button--medium" type="button">button</button> <button id="testId" name="testName" data-main="main" aria-label="label" class="Button Button--primary Button--medium" type="button" onclick="document.body.append('&lt;span&gt;hello there&lt;/span&gt;'); return false;">button</button> <button id="testId" name="testName" data-main="main" aria-label="label" onclick="document.body.append('&lt;span&gt;hello there&lt;/span&gt;'); return false;" class="Button Button--primary Button--medium" type="button">button</button>
+    <button id="testId" name="testName" data-main="main" aria-label="label" onclick="alert('&quot; test')" class="Button Button--primary Button--medium" type="button">button</button> <button id="testId" name="testName" data-main="main" aria-label="label" onclick="alert('&quot; test')" class="Button Button--primary Button--medium" type="button">button</button> <button id="testId" name="testName" data-main="main" aria-label="label" onclick="document.body.append('&lt;span&gt;hello there&lt;/span&gt;'); return false;" class="Button Button--primary Button--medium" type="button">button</button> <button id="testId" name="testName" data-main="main" aria-label="label" onclick="document.body.append('&lt;span&gt;hello there&lt;/span&gt;'); return false;" class="Button Button--primary Button--medium" type="button">button</button>
   </body>
 </html>
diff --git a/...ts/__snapshots__/ComponentsSnapshotTest__test with data set headerDialogLink.twig__1.html b/...ts/__snapshots__/ComponentsSnapshotTest__test with data set headerDialogLink.twig__1.html
@@ -8,6 +8,6 @@
     <a class="HeaderDialogLink" href="/job-offers">Job offers</a> <!-- Render as current page -->
      <a class="HeaderDialogLink HeaderDialogLink--current" href="/job-offers" aria-current="page">Job offers</a> 
     <!-- Render with all props -->
-     <a target="_blank" class="HeaderDialogLink HeaderDialogLink--current" href="https://spirit.design" aria-current="page" onclick="console.log('Hello!')">Job offers</a>
+     <a onclick="console.log('Hello!')" target="_blank" class="HeaderDialogLink HeaderDialogLink--current" href="https://spirit.design" aria-current="page">Job offers</a>
   </body>
 </html>
diff --git a/...ig/tests/__snapshots__/ComponentsSnapshotTest__test with data set headerLink.twig__1.html b/...ig/tests/__snapshots__/ComponentsSnapshotTest__test with data set headerLink.twig__1.html
@@ -8,6 +8,6 @@
     <a class="HeaderLink" href="/job-offers">Job offers</a> <!-- Render as current page -->
      <a class="HeaderLink HeaderLink--current" href="/job-offers" aria-current="page">Job offers</a> 
     <!-- Render with all props -->
-     <a target="_blank" class="HeaderLink HeaderLink--current" href="https://spirit.design" aria-current="page" onclick="console.log('Hello!')">Job offers</a>
+     <a onclick="console.log('Hello!')" target="_blank" class="HeaderLink HeaderLink--current" href="https://spirit.design" aria-current="page">Job offers</a>
   </body>
 </html>
diff --git a/...g/tests/__snapshots__/ComponentsSnapshotTest__test with data set linkDefault.twig__1.html b/...g/tests/__snapshots__/ComponentsSnapshotTest__test with data set linkDefault.twig__1.html
@@ -8,6 +8,6 @@
     <a href="" class="link-primary">Example link</a> <!-- Render as an underlined secondary link -->
      <a href="/" class="link-secondary link-underlined">Example link</a> <!-- Render as disabled -->
      <a href="/" class="link-primary link-disabled">Example link</a> <!-- Render with all props -->
-     <a target="_blank" title="test title" href="https://spirit.design" class="link-inverted link-disabled link-underlined my-custom-class" onclick="console.log('Hello!');">Example link</a>
+     <a onclick="console.log('Hello!');" target="_blank" title="test title" href="https://spirit.design" class="link-inverted link-disabled link-underlined my-custom-class">Example link</a>
   </body>
 </html>
diff --git a/packages/web-twig/tests/components-fixtures/buttonWithMainProps.twig b/packages/web-twig/tests/components-fixtures/buttonWithMainProps.twig
@@ -1,9 +1,9 @@
 {% set onClickCallback = "alert('\" test')" %}
 
-<Button id="testId" name="testName" data-main="main" aria-label="label" not-valid-prop="unexist" color="primary" onClick={onClickCallback}>button</Button>
+<Button id="testId" name="testName" data-main="main" aria-label="label" not-valid-prop="unexist" color="primary" onclick={onClickCallback}>button</Button>
 <Button id="testId" name="testName" data-main="main" aria-label="label" not-valid-prop="unexist" color="primary" onclick={onClickCallback}>button</Button>
 
 {% set onClickAppend = "document.body.append('<span>hello there</span>'); return false;" %}
 
-<Button id="testId" name="testName" data-main="main" aria-label="label" not-valid-prop="unexist" color="primary" onClick={onClickAppend}>button</Button>
+<Button id="testId" name="testName" data-main="main" aria-label="label" not-valid-prop="unexist" color="primary" onclick={onClickAppend}>button</Button>
 <Button id="testId" name="testName" data-main="main" aria-label="label" not-valid-prop="unexist" color="primary" onclick={onClickAppend}>button</Button>
diff --git a/packages/web-twig/tests/components-fixtures/headerDialogLink.twig b/packages/web-twig/tests/components-fixtures/headerDialogLink.twig
@@ -11,7 +11,7 @@
 <HeaderDialogLink
     href="https://spirit.design"
     isCurrent
-    onClick="console.log('Hello!')"
+    onclick="console.log('Hello!')"
     target="_blank"
 >
     Job offers

diff --git a/packages/web-twig/tests/components-fixtures/headerLink.twig b/packages/web-twig/tests/components-fixtures/headerLink.twig
@@ -11,7 +11,7 @@
 <HeaderLink
     href="https://spirit.design"
     isCurrent
-    onClick="console.log('Hello!')"
+    onclick="console.log('Hello!')"
     target="_blank"
 >
     Job offers

diff --git a/packages/web-twig/tests/components-fixtures/linkDefault.twig b/packages/web-twig/tests/components-fixtures/linkDefault.twig
@@ -17,7 +17,7 @@
     href="https://spirit.design"
     isDisabled
     isUnderlined
-    onClick="console.log('Hello!');"
+    onclick="console.log('Hello!');"
     target="_blank"
     title="test title"
 >