feat: Update <Alert> component's design (#806)

.github/workflows/chromatic.yml

@@ -8,6 +8,8 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
+        with:
+            fetch-depth: 0
 
       - name: Prepare Node.js environment
         uses: actions/setup-node@v3
@@ -18,7 +20,7 @@ jobs:
 
       - name: Install dependencies
         run: npm install
-      
+
       - name: Publish to Chromatic
         uses: chromaui/action@v1
         with:

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# v22.2.0
+
+-   [Feat] The `Alert` component now has a new design. Input based components will now also expose a `--reactist-inputs-alert` CSS variable to customize their border colours when put into an error state
+
 # v22.1.0
 
 -   [Build] Add support for Node v20 and npm v10

package.json

@@ -6,7 +6,7 @@
         "email": "[email protected]",
         "url": "http://doist.com"
     },
-    "version": "22.1.0",
+    "version": "22.2.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

src/alert/alert.module.css

@@ -11,30 +11,30 @@
     background-color: var(--reactist-alert-tone-info-background);
     border-color: var(--reactist-alert-tone-info-border);
 }
-.tone-info svg {
+.tone-info .icon {
     color: var(--reactist-alert-tone-info-icon);
 }
 
 .tone-positive {
     background-color: var(--reactist-alert-tone-positive-background);
     border-color: var(--reactist-alert-tone-positive-border);
 }
-.tone-positive svg {
+.tone-positive .icon {
     color: var(--reactist-alert-tone-positive-icon);
 }
 
 .tone-caution {
     background-color: var(--reactist-alert-tone-caution-background);
     border-color: var(--reactist-alert-tone-caution-border);
 }
-.tone-caution svg {
+.tone-caution .icon {
     color: var(--reactist-alert-tone-caution-icon);
 }
 
 .tone-critical {
     background-color: var(--reactist-alert-tone-critical-background);
     border-color: var(--reactist-alert-tone-critical-border);
 }
-.tone-critical svg {
+.tone-critical .icon {
     color: var(--reactist-alert-tone-critical-icon);
 }

src/alert/alert.tsx

@@ -30,12 +30,12 @@ function Alert({ id, children, tone, closeLabel, onClose }: AlertProps) {
             id={id}
             role="alert"
             aria-live="polite"
-            borderRadius="standard"
+            borderRadius="full"
             className={[styles.container, getClassNames(styles, 'tone', tone)]}
         >
-            <Columns space="small" alignY="top">
+            <Columns space="small" alignY="center">
                 <Column width="content">
-                    <AlertIcon tone={tone} />
+                    <AlertIcon tone={tone} className={styles.icon} />
                 </Column>
                 <Column>
                     <Box

src/base-field/base-field.module.css

@@ -32,7 +32,7 @@
 }
 
 .container.bordered.error {
-    border-color: var(--reactist-alert-tone-critical-border) !important;
+    border-color: var(--reactist-inputs-alert) !important;
 }
 
 .container.bordered .primaryLabel {

src/icons/alert-icon.tsx

@@ -15,11 +15,17 @@ function AlertIcon({ tone, ...props }: JSX.IntrinsicElements['svg'] & { tone: Al
 
 function AlertInfoIcon(props: JSX.IntrinsicElements['svg']) {
     return (
-        <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            {...props}
+        >
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"
-                d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-1a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm1.18-11.84a.84.84 0 1 1-1.68 0 .84.84 0 0 1 1.68 0zM12.5 10a.5.5 0 0 1 .5.5V15h1a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1h1v-4h-1a.5.5 0 0 1 0-1h1.5z"
+                d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-8-3.94a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM10.25 10a.75.75 0 0 0 0 1.5h1.25V15h-1.25a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5H13v-4.25a.75.75 0 0 0-.75-.75h-2Z"
                 fill="currentColor"
             />
         </svg>
@@ -28,11 +34,17 @@ function AlertInfoIcon(props: JSX.IntrinsicElements['svg']) {
 
 function AlertPositiveIcon(props: JSX.IntrinsicElements['svg']) {
     return (
-        <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            {...props}
+        >
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"
-                d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zm0-1a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-4.354-8.104a.5.5 0 0 1 .708 0l2.146 2.147 5.146-5.147a.5.5 0 0 1 .708.708l-5.5 5.5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 0 1 0-.708z"
+                d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-5.555-2.99a.75.75 0 0 1 1.06 1.06l-5.303 5.304a.748.748 0 0 1-1.061 0l-2.475-2.475a.75.75 0 0 1 1.06-1.06l1.945 1.944 4.774-4.773Z"
                 fill="currentColor"
             />
         </svg>
@@ -41,11 +53,17 @@ function AlertPositiveIcon(props: JSX.IntrinsicElements['svg']) {
 
 function AlertCautionIcon(props: JSX.IntrinsicElements['svg']) {
     return (
-        <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            {...props}
+        >
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"
-                d="m3.254 16.992 7.018-12.03a2 2 0 0 1 3.455 0l7.018 12.03A2 2 0 0 1 19.018 20H4.982a2 2 0 0 1-1.728-3.008zm8.242-11.887a1 1 0 0 0-.36.36l-7.018 12.03A1 1 0 0 0 4.982 19h14.036a1 1 0 0 0 .864-1.504l-7.018-12.03a1 1 0 0 0-1.368-.36zM13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.014-7.014a.987.987 0 1 0-1.971.055l.236 4.25c.053.945 1.445.945 1.498 0l.236-4.25.001-.027v-.028z"
+                d="m10.272 4.962-7.018 12.03A2 2 0 0 0 4.982 20h14.036a2 2 0 0 0 1.727-3.008l-7.018-12.03a2 2 0 0 0-3.455 0ZM13 16.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.014-7.013A.987.987 0 0 0 12 8.5h-.028l-.027.002a.987.987 0 0 0-.93 1.04l.236 4.25c.052.944 1.445.944 1.498 0l.236-4.25a1.925 1.925 0 0 0 .001-.055Z"
                 fill="currentColor"
             />
         </svg>
@@ -54,11 +72,17 @@ function AlertCautionIcon(props: JSX.IntrinsicElements['svg']) {
 
 function AlertCriticalIcon(props: JSX.IntrinsicElements['svg']) {
     return (
-        <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            {...props}
+        >
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"
-                d="M12 3.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM2.5 12a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0zM13 15.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.014-7.014A.987.987 0 0 0 12 7.5h-.027l-.028.002a.987.987 0 0 0-.93 1.04l.236 4.25c.053.944 1.445.944 1.498 0l.236-4.25.001-.028v-.027z"
+                d="M12.9866 2.25049C12.3729 1.91683 11.6271 1.91683 11.0134 2.25049L4.04793 6.03744C3.40122 6.38904 2.99999 7.05702 2.99999 7.78208V15.2184C2.99999 15.9435 3.40122 16.6115 4.04793 16.963L11.0134 20.75C11.6271 21.0837 12.3729 21.0837 12.9866 20.75L19.9521 16.963C20.5988 16.6114 21 15.9435 21 15.2184V7.78208C21 7.05701 20.5988 6.38904 19.9521 6.03744L12.9866 2.25049ZM12 7.00024C12.5448 7.00024 12.9865 7.44191 12.9865 7.98674C12.9864 8.00043 12.9863 8.00727 12.9861 8.01411C12.9859 8.02095 12.9856 8.02779 12.985 8.04146L12.7489 12.2918C12.6964 13.2364 11.3036 13.2364 11.2512 12.2918L11.015 8.04146C10.9848 7.49747 11.4013 7.03198 11.9453 7.00176L11.9726 7.00062L12 7.00024ZM13 15.0002C13 15.5525 12.5523 16.0002 12 16.0002C11.4477 16.0002 11 15.5525 11 15.0002C11 14.448 11.4477 14.0002 12 14.0002C12.5523 14.0002 13 14.448 13 15.0002Z"
                 fill="currentColor"
             />
         </svg>

src/password-field/password-field.stories.mdx

@@ -97,6 +97,7 @@ Note that these variables are shared with other components such as `Textfield`,
 ```
 --reactist-inputs-focus
 --reactist-inputs-idle
+--reactist-inputs-alert
 ```
 
 <Canvas withToolbar>

src/select-field/select-field.module.css

@@ -50,7 +50,7 @@
 }
 
 .selectWrapper:not(.bordered).error select {
-    border-color: var(--reactist-alert-tone-critical-border) !important;
+    border-color: var(--reactist-inputs-alert) !important;
 }
 
 .selectWrapper:not(.bordered) option {

src/select-field/select-field.stories.mdx

@@ -106,6 +106,7 @@ Note that these variables are shared with other components such as `Textfield`,
 ```
 --reactist-inputs-focus
 --reactist-inputs-idle
+--reactist-inputs-alert
 ```
 
 <Canvas withToolbar>

src/styles/design-tokens.css

@@ -56,6 +56,7 @@
     /* input border colors */
     --reactist-inputs-focus: var(--reactist-divider-primary);
     --reactist-inputs-idle: var(--reactist-divider-secondary);
+    --reactist-inputs-alert: rgb(209, 69, 59);
 
     /* border-radius */
     --reactist-border-radius-small: 5px;
@@ -86,21 +87,21 @@
     /* component-specific */
 
     /* alerts */
-    --reactist-alert-tone-info-icon: #1d438c;
-    --reactist-alert-tone-info-border: rgb(36, 111, 224);
-    --reactist-alert-tone-info-background: rgba(36, 111, 224, 0.1);
+    --reactist-alert-tone-info-icon: rgba(49, 111, 234);
+    --reactist-alert-tone-info-border: rgba(238, 238, 238);
+    --reactist-alert-tone-info-background: rgba(250, 250, 250);
 
-    --reactist-alert-tone-positive-icon: #035017;
-    --reactist-alert-tone-positive-border: rgb(5, 133, 39);
-    --reactist-alert-tone-positive-background: rgba(5, 133, 39, 0.1);
+    --reactist-alert-tone-positive-icon: rgba(5, 133, 39);
+    --reactist-alert-tone-positive-border: rgba(238, 238, 238);
+    --reactist-alert-tone-positive-background: rgba(250, 250, 250);
 
-    --reactist-alert-tone-caution-icon: #5e3704;
-    --reactist-alert-tone-caution-border: rgb(235, 141, 19);
-    --reactist-alert-tone-caution-background: rgba(235, 141, 19, 0.2);
+    --reactist-alert-tone-caution-icon: rgba(235, 137, 9);
+    --reactist-alert-tone-caution-border: rgba(238, 238, 238);
+    --reactist-alert-tone-caution-background: rgba(250, 250, 250);
 
-    --reactist-alert-tone-critical-icon: #b03d32;
-    --reactist-alert-tone-critical-border: rgb(209, 69, 59);
-    --reactist-alert-tone-critical-background: rgba(209, 69, 59, 0.1);
+    --reactist-alert-tone-critical-icon: rgba(220, 76, 62);
+    --reactist-alert-tone-critical-border: rgba(238, 238, 238);
+    --reactist-alert-tone-critical-background: rgba(250, 250, 250);
 
     /* toasts */
     --reactist-toast-actionable-primary-tint: #39d1ef;

src/text-area/text-area.module.css

@@ -54,7 +54,7 @@ See https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
 .textAreaContainer.error:not(.bordered) .innerContainer::after,
 .textAreaContainer.error:not(.bordered) textarea,
 .textAreaContainer.bordered.error {
-    border-color: var(--reactist-alert-tone-critical-border) !important;
+    border-color: var(--reactist-inputs-alert) !important;
 }
 
 .innerContainer {

src/text-area/text-area.stories.mdx

@@ -99,6 +99,7 @@ Note that these variables are shared with other components such as `Textfield`,
 ```
 --reactist-inputs-focus
 --reactist-inputs-idle
+--reactist-inputs-alert
 ```
 
 <Canvas withToolbar>

src/text-field/text-field.module.css

@@ -25,7 +25,7 @@
 }
 
 .inputWrapper:not(.bordered).error {
-    border-color: var(--reactist-alert-tone-critical-border) !important;
+    border-color: var(--reactist-inputs-alert) !important;
 }
 
 .inputWrapper input {

src/text-field/text-field.stories.mdx

@@ -116,6 +116,7 @@ Note that these variables are shared with other components such as `PasswordFiel
 ```
 --reactist-inputs-focus
 --reactist-inputs-idle
+--reactist-inputs-alert
 ```
 
 <Canvas withToolbar>