From c3fe38b2b7d9059e6a3c786e73b6fd18d9ef80c3 Mon Sep 17 00:00:00 2001 From: Frankie Yan Date: Tue, 31 Oct 2023 09:20:21 -0700 Subject: [PATCH] feat: Update `` component's design (#806) --- .github/workflows/chromatic.yml | 4 +- CHANGELOG.md | 4 ++ package-lock.json | 4 +- package.json | 2 +- src/alert/alert.module.css | 8 ++-- src/alert/alert.tsx | 6 +-- src/base-field/base-field.module.css | 2 +- src/icons/alert-icon.tsx | 40 +++++++++++++++---- src/password-field/password-field.stories.mdx | 1 + src/select-field/select-field.module.css | 2 +- src/select-field/select-field.stories.mdx | 1 + src/styles/design-tokens.css | 25 ++++++------ src/text-area/text-area.module.css | 2 +- src/text-area/text-area.stories.mdx | 1 + src/text-field/text-field.module.css | 2 +- src/text-field/text-field.stories.mdx | 1 + 16 files changed, 70 insertions(+), 35 deletions(-) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index ce29a70fd..d1626b9ea 100644 --- a/.github/workflows/chromatic.yml +++ b/.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: diff --git a/CHANGELOG.md b/CHANGELOG.md index 2d438b594..7364e1045 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index 21f46ac7a..a014d445b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@doist/reactist", - "version": "22.1.0", + "version": "22.2.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@doist/reactist", - "version": "22.1.0", + "version": "22.2.0", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 183dbb795..0dac0c222 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "email": "henning@doist.com", "url": "http://doist.com" }, - "version": "22.1.0", + "version": "22.2.0", "license": "MIT", "homepage": "https://github.com/Doist/reactist#readme", "repository": { diff --git a/src/alert/alert.module.css b/src/alert/alert.module.css index 26f758425..d5b95121a 100644 --- a/src/alert/alert.module.css +++ b/src/alert/alert.module.css @@ -11,7 +11,7 @@ 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); } @@ -19,7 +19,7 @@ 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); } @@ -27,7 +27,7 @@ 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); } @@ -35,6 +35,6 @@ 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); } diff --git a/src/alert/alert.tsx b/src/alert/alert.tsx index a1cc7f5b2..ccd00f5ef 100644 --- a/src/alert/alert.tsx +++ b/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)]} > - + - + + @@ -28,11 +34,17 @@ function AlertInfoIcon(props: JSX.IntrinsicElements['svg']) { function AlertPositiveIcon(props: JSX.IntrinsicElements['svg']) { return ( - + @@ -41,11 +53,17 @@ function AlertPositiveIcon(props: JSX.IntrinsicElements['svg']) { function AlertCautionIcon(props: JSX.IntrinsicElements['svg']) { return ( - + @@ -54,11 +72,17 @@ function AlertCautionIcon(props: JSX.IntrinsicElements['svg']) { function AlertCriticalIcon(props: JSX.IntrinsicElements['svg']) { return ( - + diff --git a/src/password-field/password-field.stories.mdx b/src/password-field/password-field.stories.mdx index c66ae4029..a6838d6de 100644 --- a/src/password-field/password-field.stories.mdx +++ b/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 ``` diff --git a/src/select-field/select-field.module.css b/src/select-field/select-field.module.css index 8d01091f6..b04e499d0 100644 --- a/src/select-field/select-field.module.css +++ b/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 { diff --git a/src/select-field/select-field.stories.mdx b/src/select-field/select-field.stories.mdx index 7a5b1fbcc..41434fcfa 100644 --- a/src/select-field/select-field.stories.mdx +++ b/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 ``` diff --git a/src/styles/design-tokens.css b/src/styles/design-tokens.css index b4b4d6141..9e8cea39c 100644 --- a/src/styles/design-tokens.css +++ b/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; diff --git a/src/text-area/text-area.module.css b/src/text-area/text-area.module.css index b20ce6531..66c657b6c 100644 --- a/src/text-area/text-area.module.css +++ b/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 { diff --git a/src/text-area/text-area.stories.mdx b/src/text-area/text-area.stories.mdx index a90585390..41b8bbdbb 100644 --- a/src/text-area/text-area.stories.mdx +++ b/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 ``` diff --git a/src/text-field/text-field.module.css b/src/text-field/text-field.module.css index c3e4f1b26..382f732ee 100644 --- a/src/text-field/text-field.module.css +++ b/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 { diff --git a/src/text-field/text-field.stories.mdx b/src/text-field/text-field.stories.mdx index 9af08a9a8..1198a40b2 100644 --- a/src/text-field/text-field.stories.mdx +++ b/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 ```