Add ContentNotification optional close icon button (#2531)

* refactor(design-system): refactor content notifications design tokens * feat(content-notification): added optional close icon button * chore: changesets added * chore: update lock dependencies file * refactor(design-tokens): remove unnecessary tokens * fix(content-notification): fix vrt
commercetools · May 30, 2023 · c3a505a · c3a505a · vercel · May 30, 2023
1 parent b6fae35
commit c3a505a
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 137 deletions.
diff --git a/.changeset/few-avocados-mate.md b/.changeset/few-avocados-mate.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/design-system': patch
+---
+
+Update `ContentNotification` design tokens.
diff --git a/.changeset/spicy-grapes-shout.md b/.changeset/spicy-grapes-shout.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/notifications': minor
+---
+
+Included `onRemove` property to allow rendering a close icon which will call the property callback.
diff --git a/design-system/materials/custom-properties.css b/design-system/materials/custom-properties.css
@@ -218,26 +218,6 @@
     100%,
     95%
   );
-  --background-color-for-content-notification-icon-when-error: hsl(
-    339.1304347826087,
-    100%,
-    95%
-  );
-  --background-color-for-content-notification-icon-when-info: hsl(
-    203.05555555555554,
-    93.9130434783%,
-    95%
-  );
-  --background-color-for-content-notification-icon-when-warning: hsl(
-    25.110132158590307,
-    89.0196078431%,
-    95%
-  );
-  --background-color-for-content-notification-icon-when-success: hsl(
-    172.9608938547486,
-    100%,
-    95%
-  );
   --background-color-for-checkbox-input-icon: #00b39e;
   --background-color-for-checkbox-input-icon-when-disabled: #ccc;
   --background-color-for-checkbox-input-icon-when-readonly: hsl(0, 0%, 60%);
@@ -358,10 +338,7 @@
   --border-radius-for-table-manager-droppable-list: 4px;
   --border-radius-for-stamp: 20px;
   --border-radius-for-view-switcher: 4px;
-  --border-radius-for-content-notification: 0 var(--border-radius-4)
-    var(--border-radius-4) 0;
-  --border-radius-for-content-notification-icon: var(--border-radius-4) 0 0
-    var(--border-radius-4);
+  --border-radius-for-content-notification: 4px;
   --border-radius-for-primary-action-dropdown: var(--border-radius-4) 0 0
     var(--border-radius-4);
   --border-radius-for-primary-action-dropdown-icon: 0 var(--border-radius-4)
@@ -373,7 +350,6 @@
   --border-width-for-input-when-focused: 1px;
   --border-width-for-tag: 1px 1px 1px 0;
   --border-width-for-select-input: 2px;
-  --border-width-for-content-notification-icon: 1px;
   --border-left-width-for-content-notification: 0px;
   --border-width-for-checkbox-input-icon: 2px;
   --border-for-primary-action-dropdown-icon: 1px 1px 1px 0px;
@@ -557,10 +533,9 @@
   --padding-for-tooltip: var(--spacing-20) 12px;
   --padding-for-view-switcher: 0 var(--spacing-30) 0 var(--spacing-30);
   --padding-for-view-switcher-when-condensed: 0 12px 0 12px;
-  --padding-for-content-notification: var(--spacing-20) var(--spacing-30)
-    var(--spacing-20) var(--spacing-20);
-  --padding-for-content-notification-icon: var(--spacing-20) 0 var(--spacing-20)
-    var(--spacing-30);
+  --padding-for-content-notification: var(--spacing-20) var(--spacing-30);
+  --padding-for-content-notification-message: 0 var(--spacing-30) 0
+    var(--spacing-20);
   --padding-left-for-select-input-options: 16px;
   --padding-right-for-select-input-options: 16px;
   --padding-top-for-select-input-options: 8px;

diff --git a/design-system/materials/custom-properties.json b/design-system/materials/custom-properties.json
@@ -174,10 +174,6 @@
   "--background-color-for-content-notification-when-info": "hsl(203.05555555555554, 93.9130434783%, 95%)",
   "--background-color-for-content-notification-when-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)",
   "--background-color-for-content-notification-when-success": "hsl(172.9608938547486, 100%, 95%)",
-  "--background-color-for-content-notification-icon-when-error": "hsl(339.1304347826087, 100%, 95%)",
-  "--background-color-for-content-notification-icon-when-info": "hsl(203.05555555555554, 93.9130434783%, 95%)",
-  "--background-color-for-content-notification-icon-when-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)",
-  "--background-color-for-content-notification-icon-when-success": "hsl(172.9608938547486, 100%, 95%)",
   "--background-color-for-checkbox-input-icon": "#00b39e",
   "--background-color-for-checkbox-input-icon-when-disabled": "#ccc",
   "--background-color-for-checkbox-input-icon-when-readonly": "hsl(0, 0%, 60%)",
@@ -258,8 +254,7 @@
   "--border-radius-for-table-manager-droppable-list": "4px",
   "--border-radius-for-stamp": "20px",
   "--border-radius-for-view-switcher": "4px",
-  "--border-radius-for-content-notification": "0 var(--border-radius-4) var(--border-radius-4) 0",
-  "--border-radius-for-content-notification-icon": "var(--border-radius-4) 0 0 var(--border-radius-4)",
+  "--border-radius-for-content-notification": "4px",
   "--border-radius-for-primary-action-dropdown": "var(--border-radius-4) 0 0 var(--border-radius-4)",
   "--border-radius-for-primary-action-dropdown-icon": "0 var(--border-radius-4) var(--border-radius-4) 0",
   "--border-radius-for-primary-action-dropdown-menu": "4px",
@@ -269,7 +264,6 @@
   "--border-width-for-input-when-focused": "1px",
   "--border-width-for-tag": "1px 1px 1px 0",
   "--border-width-for-select-input": "2px",
-  "--border-width-for-content-notification-icon": "1px",
   "--border-left-width-for-content-notification": "0px",
   "--border-width-for-checkbox-input-icon": "2px",
   "--border-for-primary-action-dropdown-icon": "1px 1px 1px 0px",
@@ -438,8 +432,8 @@
   "--padding-for-tooltip": "var(--spacing-20) 12px",
   "--padding-for-view-switcher": "0 var(--spacing-30) 0 var(--spacing-30)",
   "--padding-for-view-switcher-when-condensed": "0 12px 0 12px",
-  "--padding-for-content-notification": "var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20)",
-  "--padding-for-content-notification-icon": "var(--spacing-20) 0 var(--spacing-20) var(--spacing-30)",
+  "--padding-for-content-notification": "var(--spacing-20) var(--spacing-30)",
+  "--padding-for-content-notification-message": "0 var(--spacing-30) 0 var(--spacing-20)",
   "--padding-left-for-select-input-options": "16px",
   "--padding-right-for-select-input-options": "16px",
   "--padding-top-for-select-input-options": "8px",

diff --git a/design-system/materials/internals/definition.yaml b/design-system/materials/internals/definition.yaml
@@ -388,8 +388,10 @@ componentGroups:
     description: 'View switcher icon elements'
   content-notification:
     description: 'Content notification elements'
+  content-notification-message:
+    description: 'Content notification message element'
   content-notification-icon:
-    description: 'Content notification icon elements'
+    description: 'Content notification icon element'
   checkbox-input-icon:
     description: 'Checkbox icon elements'
   checkbox-input-label:
@@ -550,14 +552,6 @@ decisionGroupsByTheme:
           choice: color-warning-95
         background-color-for-content-notification-when-success:
           choice: color-primary-95
-        background-color-for-content-notification-icon-when-error:
-          choice: color-error-95
-        background-color-for-content-notification-icon-when-info:
-          choice: color-info-95
-        background-color-for-content-notification-icon-when-warning:
-          choice: color-warning-95
-        background-color-for-content-notification-icon-when-success:
-          choice: color-primary-95
         background-color-for-checkbox-input-icon:
           choice: color-primary
         background-color-for-checkbox-input-icon-when-disabled:
@@ -734,9 +728,7 @@ decisionGroupsByTheme:
         border-radius-for-view-switcher:
           choice: border-radius-4
         border-radius-for-content-notification:
-          choice: '0 var(--border-radius-4) var(--border-radius-4) 0'
-        border-radius-for-content-notification-icon:
-          choice: 'var(--border-radius-4) 0 0 var(--border-radius-4)'
+          choice: border-radius-4
         border-radius-for-primary-action-dropdown:
           choice: 'var(--border-radius-4) 0 0 var(--border-radius-4)'
         border-radius-for-primary-action-dropdown-icon:
@@ -760,8 +752,6 @@ decisionGroupsByTheme:
           choice: '1px 1px 1px 0'
         border-width-for-select-input:
           choice: border-width-2
-        border-width-for-content-notification-icon:
-          choice: border-width-1
         border-left-width-for-content-notification:
           choice: '0px'
         border-width-for-checkbox-input-icon:
@@ -1160,9 +1150,9 @@ decisionGroupsByTheme:
         padding-for-view-switcher-when-condensed:
           choice: '0 12px 0 12px'
         padding-for-content-notification:
-          choice: 'var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20)'
-        padding-for-content-notification-icon:
-          choice: 'var(--spacing-20) 0 var(--spacing-20) var(--spacing-30)'
+          choice: 'var(--spacing-20) var(--spacing-30)'
+        padding-for-content-notification-message:
+          choice: '0 var(--spacing-30) 0 var(--spacing-20)'
         padding-left-for-select-input-options:
           choice: spacing-30
         padding-right-for-select-input-options:

diff --git a/design-system/src/design-tokens.ts b/design-system/src/design-tokens.ts
@@ -193,14 +193,6 @@ export const themes = {
       'hsl(25.110132158590307, 89.0196078431%, 95%)',
     backgroundColorForContentNotificationWhenSuccess:
       'hsl(172.9608938547486, 100%, 95%)',
-    backgroundColorForContentNotificationIconWhenError:
-      'hsl(339.1304347826087, 100%, 95%)',
-    backgroundColorForContentNotificationIconWhenInfo:
-      'hsl(203.05555555555554, 93.9130434783%, 95%)',
-    backgroundColorForContentNotificationIconWhenWarning:
-      'hsl(25.110132158590307, 89.0196078431%, 95%)',
-    backgroundColorForContentNotificationIconWhenSuccess:
-      'hsl(172.9608938547486, 100%, 95%)',
     backgroundColorForCheckboxInputIcon: '#00b39e',
     backgroundColorForCheckboxInputIconWhenDisabled: '#ccc',
     backgroundColorForCheckboxInputIconWhenReadonly: 'hsl(0, 0%, 60%)',
@@ -291,10 +283,7 @@ export const themes = {
     borderRadiusForTableManagerDroppableList: '4px',
     borderRadiusForStamp: '20px',
     borderRadiusForViewSwitcher: '4px',
-    borderRadiusForContentNotification:
-      '0 var(--border-radius-4) var(--border-radius-4) 0',
-    borderRadiusForContentNotificationIcon:
-      'var(--border-radius-4) 0 0 var(--border-radius-4)',
+    borderRadiusForContentNotification: '4px',
     borderRadiusForPrimaryActionDropdown:
       'var(--border-radius-4) 0 0 var(--border-radius-4)',
     borderRadiusForPrimaryActionDropdownIcon:
@@ -306,7 +295,6 @@ export const themes = {
     borderWidthForInputWhenFocused: '1px',
     borderWidthForTag: '1px 1px 1px 0',
     borderWidthForSelectInput: '2px',
-    borderWidthForContentNotificationIcon: '1px',
     borderLeftWidthForContentNotification: '0px',
     borderWidthForCheckboxInputIcon: '2px',
     borderForPrimaryActionDropdownIcon: '1px 1px 1px 0px',
@@ -481,10 +469,9 @@ export const themes = {
     paddingForTooltip: 'var(--spacing-20) 12px',
     paddingForViewSwitcher: '0 var(--spacing-30) 0 var(--spacing-30)',
     paddingForViewSwitcherWhenCondensed: '0 12px 0 12px',
-    paddingForContentNotification:
-      'var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20)',
-    paddingForContentNotificationIcon:
-      'var(--spacing-20) 0 var(--spacing-20) var(--spacing-30)',
+    paddingForContentNotification: 'var(--spacing-20) var(--spacing-30)',
+    paddingForContentNotificationMessage:
+      '0 var(--spacing-30) 0 var(--spacing-20)',
     paddingLeftForSelectInputOptions: '16px',
     paddingRightForSelectInputOptions: '16px',
     paddingTopForSelectInputOptions: '8px',
@@ -768,14 +755,6 @@ const designTokens = {
     'var(--background-color-for-content-notification-when-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
   backgroundColorForContentNotificationWhenSuccess:
     'var(--background-color-for-content-notification-when-success, hsl(172.9608938547486, 100%, 95%))',
-  backgroundColorForContentNotificationIconWhenError:
-    'var(--background-color-for-content-notification-icon-when-error, hsl(339.1304347826087, 100%, 95%))',
-  backgroundColorForContentNotificationIconWhenInfo:
-    'var(--background-color-for-content-notification-icon-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))',
-  backgroundColorForContentNotificationIconWhenWarning:
-    'var(--background-color-for-content-notification-icon-when-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
-  backgroundColorForContentNotificationIconWhenSuccess:
-    'var(--background-color-for-content-notification-icon-when-success, hsl(172.9608938547486, 100%, 95%))',
   backgroundColorForCheckboxInputIcon:
     'var(--background-color-for-checkbox-input-icon, #00b39e)',
   backgroundColorForCheckboxInputIconWhenDisabled:
@@ -925,9 +904,7 @@ const designTokens = {
   borderRadiusForStamp: 'var(--border-radius-for-stamp, 20px)',
   borderRadiusForViewSwitcher: 'var(--border-radius-for-view-switcher, 4px)',
   borderRadiusForContentNotification:
-    'var(--border-radius-for-content-notification, 0 var(--border-radius-4) var(--border-radius-4) 0)',
-  borderRadiusForContentNotificationIcon:
-    'var(--border-radius-for-content-notification-icon, var(--border-radius-4) 0 0 var(--border-radius-4))',
+    'var(--border-radius-for-content-notification, 4px)',
   borderRadiusForPrimaryActionDropdown:
     'var(--border-radius-for-primary-action-dropdown, var(--border-radius-4) 0 0 var(--border-radius-4))',
   borderRadiusForPrimaryActionDropdownIcon:
@@ -942,8 +919,6 @@ const designTokens = {
     'var(--border-width-for-input-when-focused, 1px)',
   borderWidthForTag: 'var(--border-width-for-tag, 1px 1px 1px 0)',
   borderWidthForSelectInput: 'var(--border-width-for-select-input, 2px)',
-  borderWidthForContentNotificationIcon:
-    'var(--border-width-for-content-notification-icon, 1px)',
   borderLeftWidthForContentNotification:
     'var(--border-left-width-for-content-notification, 0px)',
   borderWidthForCheckboxInputIcon:
@@ -1217,9 +1192,9 @@ const designTokens = {
   paddingForViewSwitcherWhenCondensed:
     'var(--padding-for-view-switcher-when-condensed, 0 12px 0 12px)',
   paddingForContentNotification:
-    'var(--padding-for-content-notification, var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20))',
-  paddingForContentNotificationIcon:
-    'var(--padding-for-content-notification-icon, var(--spacing-20) 0 var(--spacing-20) var(--spacing-30))',
+    'var(--padding-for-content-notification, var(--spacing-20) var(--spacing-30))',
+  paddingForContentNotificationMessage:
+    'var(--padding-for-content-notification-message, 0 var(--spacing-30) 0 var(--spacing-20))',
   paddingLeftForSelectInputOptions:
     'var(--padding-left-for-select-input-options, 16px)',
   paddingRightForSelectInputOptions:

diff --git a/packages/components/notifications/README.md b/packages/components/notifications/README.md
@@ -61,3 +61,14 @@ export const Error = () => (
 | `type`        | `union`<br/>Possible values:<br/>`'error' , 'info' , 'warning' , 'success'` |    ✅    |         | Determines the color/type of notification.                                                                                     |
 | `intlMessage` | `MessageDescriptor`                                                         |          |         | An `intl` message object that will be rendered with `FormattedMessage`.&#xA;<br />&#xA;Required if `children` is not provided. |
 | `children`    | `ReactNode`                                                                 |          |         | The content of the notification.&#xA;<br />&#xA;Required if `intlMessage` is not provided.                                     |
+| `onRemove`    | `Function`<br/>[See signature.](#signature-onRemove)                        |          |         | When provided, a close icon will be rendered and this callback will be called when it is clicked.                              |
+
+## Signatures
+
+### Signature `onRemove`
+
+```ts
+(
+  event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>
+) => void
+```
diff --git a/packages/components/notifications/package.json b/packages/components/notifications/package.json
@@ -21,6 +21,7 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
+    "@commercetools-uikit/accessible-button": "16.1.1",
     "@commercetools-uikit/design-system": "16.1.1",
     "@commercetools-uikit/icons": "16.1.1",
     "@commercetools-uikit/utils": "16.1.1",