(HDS-2243) fix wrong errorSummary icon

City-of-Helsinki · May 6, 2024 · b681f22 · b681f22
1 parent 8c4e94f
commit b681f22
Show file tree

Hide file tree

Showing 23 changed files with 10 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - [Component] What bugs/typos are fixed?
 - [Footer] Fix Koros height issue (Calm type was of wrong height)
+- [ErrorSummary] Change wrong error icon to correct one
 
 ### Core
 
@@ -40,6 +41,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 #### Changed
 
 - [Component] What has been changed
+- [ErrorSummary] Change wrong error icon to correct one
 
 #### Fixed
 
@@ -62,6 +64,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 #### Fixed
 
 - [Component] What bugs/typos are fixed?
+- [ErrorSummary] Change wrong error icon to correct one
 
 ### Figma
 

diff --git a/packages/core/src/components/error-summary/error-summary.stories.js b/packages/core/src/components/error-summary/error-summary.stories.js
@@ -1,7 +1,7 @@
 import '../notification/notification.css';
 import './error-summary.css';
 import '../../icons/icon.css';
-import '../../icons/alert-circle.css';
+import '../../icons/error-fill.css';
 
 export default {
   title: 'Components/Error summary',
@@ -12,7 +12,7 @@ export const Default = () => `
     <section aria-label="Error summary" class="hds-notification hds-notification--error">
       <div class="hds-notification__content">
         <div class="hds-notification__label" role="heading" aria-level="2" tabindex="-1">
-          <span class="hds-icon hds-icon--alert-circle-fill" aria-hidden="true"></span>
+          <span class="hds-icon hds-icon--error-fill" aria-hidden="true"></span>
           <span>Form contains following errors</span>
         </div>
         <div class="hds-notification__body hds-error-summary__body">
@@ -36,7 +36,7 @@ export const Large = () => `
     <section aria-label="Error summary" class="hds-notification hds-notification--error hds-notification--large">
       <div class="hds-notification__content">
         <div class="hds-notification__label" role="heading" aria-level="2" tabindex="-1">
-          <span class="hds-icon hds-icon--alert-circle-fill" aria-hidden="true"></span>
+          <span class="hds-icon hds-icon--error-fill" aria-hidden="true"></span>
           <span>Form contains following errors</span>
         </div>
         <div class="hds-notification__body hds-error-summary__body">

diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_ErrorSummary_Default.png b/packages/react/.loki/reference/chrome_iphone7_Components_ErrorSummary_Default.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_ErrorSummary_Large.png b/packages/react/.loki/reference/chrome_iphone7_Components_ErrorSummary_Large.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Custom_Section.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Custom_Section.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Custom_theme.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Custom_theme.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Example.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Example.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Minimal.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Minimal.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_No_navigation.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_No_navigation.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Sitemap.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Sitemap.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Utility_Groups.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Utility_Groups.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_ErrorSummary_Default.png b/packages/react/.loki/reference/chrome_laptop_Components_ErrorSummary_Default.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_ErrorSummary_Large.png b/packages/react/.loki/reference/chrome_laptop_Components_ErrorSummary_Large.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Custom_Section.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Custom_Section.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Custom_theme.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Custom_theme.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Example.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Example.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Minimal.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Minimal.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_No_navigation.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_No_navigation.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Sitemap.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Sitemap.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Utility_Groups.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Utility_Groups.png
diff --git a/packages/react/src/components/errorSummary/ErrorSummary.tsx b/packages/react/src/components/errorSummary/ErrorSummary.tsx
@@ -3,7 +3,7 @@ import React, { useRef, useEffect } from 'react';
 import '../../styles/base.module.css';
 import errorSummaryStyles from './ErrorSummary.module.scss';
 import notificationStyles from '../notification/Notification.module.css';
-import { IconAlertCircleFill } from '../../icons';
+import { IconErrorFill } from '../../icons';
 import classNames from '../../utils/classNames';
 
 export type ErrorSummarySize = 'default' | 'large';
@@ -62,7 +62,7 @@ export const ErrorSummary = React.forwardRef<HTMLDivElement, ErrorSummaryProps>(
             tabIndex={-1}
             ref={labelRef}
           >
-            <IconAlertCircleFill className={notificationStyles.icon} aria-hidden />
+            <IconErrorFill className={notificationStyles.icon} aria-hidden />
             {label}
           </div>
           <div className={(notificationStyles.body, errorSummaryStyles.errorSummaryBody)}>{children}</div>

diff --git a/site/src/docs/components/error-summary/code.mdx b/site/src/docs/components/error-summary/code.mdx
@@ -41,7 +41,7 @@ import { ErrorSummary } from 'hds-react';
   <section aria-label="Error summary" class="hds-notification hds-notification--error">
     <div class="hds-notification__content">
       <div class="hds-notification__label" role="heading" aria-level="2" tabindex="-1">
-        <span class="hds-icon hds-icon--alert-circle-fill" aria-hidden="true"></span>
+        <span class="hds-icon hds-icon--error-fill" aria-hidden="true"></span>
         <span>Error summary</span>
       </div>
       <div class="hds-notification__body hds-error-summary__body">

diff --git a/site/src/docs/components/error-summary/customisation.mdx b/site/src/docs/components/error-summary/customisation.mdx
@@ -54,7 +54,7 @@ import { ErrorSummary } from 'hds-react';
   >
     <div class="hds-notification__content">
       <div class="hds-notification__label" role="heading" aria-level="2" tabindex="-1">
-        <span class="hds-icon hds-icon--alert-circle-fill" aria-hidden="true"></span>
+        <span class="hds-icon hds-icon--error-fill" aria-hidden="true"></span>
         <span>Error summary</span>
       </div>
       <div class="hds-notification__body hds-error-summary__body">