From 17653ec023f351fb705ab962c3b7af4e41dc7b98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20=C4=8Curda?= <jakub.curda@almacareer.com> Date: Thu, 2 May 2024 11:44:12 +0200 Subject: [PATCH] BREAKING CHANGE(web-twig): Remove deprecated warning icon for the danger color on Alert #DS-1177 --- packages/web-twig/DEPRECATIONS-v3.md | 5 ----- .../web-twig/src/Resources/components/Alert/Alert.twig | 9 +-------- .../web-twig/src/Resources/components/Alert/README.md | 6 +----- .../__snapshots__/alertDefault.twig.snap.html | 10 +++++----- .../components/Alert/stories/AlertCentered.twig | 3 +-- .../components/Alert/stories/AlertColors.twig | 3 +-- 6 files changed, 9 insertions(+), 27 deletions(-) diff --git a/packages/web-twig/DEPRECATIONS-v3.md b/packages/web-twig/DEPRECATIONS-v3.md index 681066f003..f96152a2d9 100644 --- a/packages/web-twig/DEPRECATIONS-v3.md +++ b/packages/web-twig/DEPRECATIONS-v3.md @@ -110,11 +110,6 @@ non-scrollable by default. It will be possible to re-enable the inside scrolling Add `isScrollable` prop to the `ModalDialog` component. -### Alert `danger` Icon - -The `warning` icon as a fallback for the `danger` color in the Alert component will be removed in favor of the `danger` icon. -Please, add the `danger` icon to your project's assets. - #### Migration Guide Either install newer version of the `spirit-icons` package or add `danger` named icon to your project's icons. diff --git a/packages/web-twig/src/Resources/components/Alert/Alert.twig b/packages/web-twig/src/Resources/components/Alert/Alert.twig index 7e88cc22b3..40455eecba 100644 --- a/packages/web-twig/src/Resources/components/Alert/Alert.twig +++ b/packages/web-twig/src/Resources/components/Alert/Alert.twig @@ -19,17 +19,10 @@ {% elseif _color == 'warning' %} {%- set _iconNameByColor = 'warning' -%} {% elseif _color == 'danger' %} - {# @TODO: set the value to the `danger` in https://jira.almacareer.tech/browse/DS-1177 #} - {%- set _iconNameByColor = 'warning' -%} + {%- set _iconNameByColor = 'danger' -%} {% endif %} {%- set _iconNameValue = _iconName | default(_iconNameByColor) -%} -{# Deprecations #} -{% if _color == 'danger' %} - {% deprecated 'Alert: The "warning" icon for the "danger" color is deprecated. Make sure you have the "danger" icon in your assets. - The fallback to the "warning" icon will be removed in favor of the "danger" icon in the next major version.' %} -{% endif %} - <{{ _elementType }} {{ mainProps(props) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }} role="alert"> <Icon name="{{ _iconNameValue }}" /> <div> diff --git a/packages/web-twig/src/Resources/components/Alert/README.md b/packages/web-twig/src/Resources/components/Alert/README.md index 7fb66f32ab..c7ea391557 100644 --- a/packages/web-twig/src/Resources/components/Alert/README.md +++ b/packages/web-twig/src/Resources/components/Alert/README.md @@ -31,16 +31,12 @@ Without lexer: | Color name | Icon name | | ------------- | ------------- | -| `danger` | `warning`\* | +| `danger` | `danger` | | `default` | `info` | | `informative` | `info` | | `success` | `check-plain` | | `warning` | `warning` | -(\*) The `warning` icon for the `danger` color has been marked as [deprecated]. -Please make sure you have the `danger` icon in your project assets. -The `warning` icon for the `danger` color will be removed in favor of the `danger` icon in the next major version. - ## API | Name | Type | Default | Required | Description | diff --git a/packages/web-twig/src/Resources/components/Alert/__tests__/__snapshots__/alertDefault.twig.snap.html b/packages/web-twig/src/Resources/components/Alert/__tests__/__snapshots__/alertDefault.twig.snap.html index b9c2f9c8c9..0a9967ca02 100644 --- a/packages/web-twig/src/Resources/components/Alert/__tests__/__snapshots__/alertDefault.twig.snap.html +++ b/packages/web-twig/src/Resources/components/Alert/__tests__/__snapshots__/alertDefault.twig.snap.html @@ -15,8 +15,8 @@ </div> <div class="Alert Alert--danger" role="alert"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="f0c4c080075841bbc911dd74dc9df8be" aria-hidden="true"> - <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.9991C17.5228 21.9991 22 17.522 22 11.9991C22 6.4763 17.5228 1.99915 12 1.99915C6.47715 1.99915 2 6.4763 2 11.9991C2 17.522 6.47715 21.9991 12 21.9991ZM12 12C11.45 12 11 11.55 11 11V9C11 8.45 11.45 8 12 8C12.55 8 13 8.45 13 9V11C13 11.55 12.55 12 12 12ZM13 14V16H11V14H13Z" fill="currentColor"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="b57548dc360a6ba49ba4a19a8d0c8ad8" aria-hidden="true"> + <path d="M2.72998 21.0001H21.26C22.03 21.0001 22.51 20.1701 22.13 19.5001L12.86 3.50006C12.47 2.83006 11.51 2.83006 11.13 3.50006L1.85998 19.5001C1.47998 20.1701 1.95998 21.0001 2.72998 21.0001ZM13 18.0001H11V16.0001H13V18.0001ZM12 14.0001C11.45 14.0001 11 13.5501 11 13.0001V11.0001C11 10.4501 11.45 10.0001 12 10.0001C12.55 10.0001 13 10.4501 13 11.0001V13.0001C13 13.5501 12.55 14.0001 12 14.0001Z" fill="currentColor"> </path></svg> <div> Message @@ -33,9 +33,9 @@ </div> <div class="Alert Alert--warning" role="alert"> - <svg width="24" height="24" fill="none" viewbox="0 0 24 24" aria-hidden="true"> - <use href="#f0c4c080075841bbc911dd74dc9df8be"> - </use></svg> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="f0c4c080075841bbc911dd74dc9df8be" aria-hidden="true"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.9991C17.5228 21.9991 22 17.522 22 11.9991C22 6.4763 17.5228 1.99915 12 1.99915C6.47715 1.99915 2 6.4763 2 11.9991C2 17.522 6.47715 21.9991 12 21.9991ZM12 12C11.45 12 11 11.55 11 11V9C11 8.45 11.45 8 12 8C12.55 8 13 8.45 13 9V11C13 11.55 12.55 12 12 12ZM13 14V16H11V14H13Z" fill="currentColor"> + </path></svg> <div> Message </div> diff --git a/packages/web-twig/src/Resources/components/Alert/stories/AlertCentered.twig b/packages/web-twig/src/Resources/components/Alert/stories/AlertCentered.twig index 6b53d388e3..bd19ffe619 100644 --- a/packages/web-twig/src/Resources/components/Alert/stories/AlertCentered.twig +++ b/packages/web-twig/src/Resources/components/Alert/stories/AlertCentered.twig @@ -12,7 +12,6 @@ <strong>Warning!</strong> Data update failed due to missing internet connection. See <a href="./" class="link-underlined">FAQ</a> for more info. </Alert> -{# @TODO: remove the `iconName` prop in https://jira.almacareer.tech/browse/DS-1177 #} -<Alert color="danger" iconName="danger" isCentered> +<Alert color="danger" isCentered> Data update failed due to missing internet connection. See <a href="./" class="link-underlined">FAQ</a> for more info. </Alert> diff --git a/packages/web-twig/src/Resources/components/Alert/stories/AlertColors.twig b/packages/web-twig/src/Resources/components/Alert/stories/AlertColors.twig index da65c8e506..7c47326fdf 100644 --- a/packages/web-twig/src/Resources/components/Alert/stories/AlertColors.twig +++ b/packages/web-twig/src/Resources/components/Alert/stories/AlertColors.twig @@ -12,7 +12,6 @@ <strong>Warning!</strong> Data update failed due to missing internet connection. See <a href="./" class="link-underlined">FAQ</a> for more info. </Alert> -{# @TODO: remove the `iconName` prop in https://jira.almacareer.tech/browse/DS-1177 #} -<Alert color="danger" iconName="danger"> +<Alert color="danger"> Data update failed due to missing internet connection. See <a href="./" class="link-underlined">FAQ</a> for more info. </Alert>