From 89f115937e594742ab4471257b33013c42fbd2bc Mon Sep 17 00:00:00 2001 From: Saurabh Daware Date: Tue, 9 Jan 2024 14:37:46 +0530 Subject: [PATCH 1/4] feat(Card): add support for CardHeaderAmount (#1940) * feat: add support for CardHeaderAmount in Card * fix: tests --- .../src/components/Card/Card.stories.tsx | 2 ++ .../blade/src/components/Card/CardHeader.tsx | 20 +++++++++++-------- .../Card/__tests__/Card.native.test.tsx | 2 +- .../Card/__tests__/Card.web.test.tsx | 2 +- 4 files changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/blade/src/components/Card/Card.stories.tsx b/packages/blade/src/components/Card/Card.stories.tsx index 3bf46ede3f4..d2a48720765 100644 --- a/packages/blade/src/components/Card/Card.stories.tsx +++ b/packages/blade/src/components/Card/Card.stories.tsx @@ -17,6 +17,7 @@ import { CardHeaderBadge, CardHeaderIconButton, CardHeaderLink, + CardHeaderAmount, CardHeaderText, } from './'; import { Sandbox } from '~utils/storybook/Sandbox'; @@ -151,6 +152,7 @@ const visual = { Text: $100, IconButton: , Badge: NEW, + Amount: , }; export default { diff --git a/packages/blade/src/components/Card/CardHeader.tsx b/packages/blade/src/components/Card/CardHeader.tsx index 55745d97d31..25f1f5a0851 100644 --- a/packages/blade/src/components/Card/CardHeader.tsx +++ b/packages/blade/src/components/Card/CardHeader.tsx @@ -24,6 +24,8 @@ import { makeSpace } from '~utils/makeSpace'; import { getComponentId, isValidAllowedChildren } from '~utils/isValidAllowedChildren'; import { throwBladeError } from '~utils/logger'; import { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren'; +import type { AmountProps } from '~components/Amount'; +import { Amount } from '~components/Amount'; const _CardHeaderIcon = ({ icon: Icon }: { icon: IconComponent }): React.ReactElement => { useVerifyInsideCard('CardHeaderIcon'); @@ -52,15 +54,15 @@ const CardHeaderBadge = assignWithoutSideEffects(_CardHeaderBadge, { componentId: ComponentIds.CardHeaderBadge, }); -// @TODO: uncomment and export this when Amount component is migrated -// const _CardHeaderAmount = (props: AmountProps): React.ReactElement => { -// useVerifyInsideCard('CardHeaderAmount'); +const _CardHeaderAmount = (props: AmountProps): React.ReactElement => { + useVerifyInsideCard('CardHeaderAmount'); -// return ; -// }; -// const CardHeaderAmount = assignWithoutSideEffects(_CardHeaderAmount, { -// componentId: ComponentIds.CardHeaderAmount, -// }); + return ; +}; + +const CardHeaderAmount = assignWithoutSideEffects(_CardHeaderAmount, { + componentId: ComponentIds.CardHeaderAmount, +}); const _CardHeaderText = (props: TextProps<{ variant: TextVariant }>): React.ReactElement => { useVerifyInsideCard('CardHeaderText'); @@ -228,6 +230,7 @@ const headerTrailingAllowedComponents = [ ComponentIds.CardHeaderText, ComponentIds.CardHeaderIconButton, ComponentIds.CardHeaderBadge, + ComponentIds.CardHeaderAmount, ]; const _CardHeaderTrailing = ({ visual }: CardHeaderTrailingProps): React.ReactElement => { @@ -259,5 +262,6 @@ export { CardHeaderCounter, CardHeaderText, CardHeaderLink, + CardHeaderAmount, CardHeaderIconButton, }; diff --git a/packages/blade/src/components/Card/__tests__/Card.native.test.tsx b/packages/blade/src/components/Card/__tests__/Card.native.test.tsx index 25914c93c16..b40f416fd3f 100644 --- a/packages/blade/src/components/Card/__tests__/Card.native.test.tsx +++ b/packages/blade/src/components/Card/__tests__/Card.native.test.tsx @@ -163,7 +163,7 @@ describe('', () => { , ), ).toThrow( - '[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge` component is accepted in visual', + '[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge, CardHeaderAmount` component is accepted in visual', ); mockConsoleError.mockRestore(); }); diff --git a/packages/blade/src/components/Card/__tests__/Card.web.test.tsx b/packages/blade/src/components/Card/__tests__/Card.web.test.tsx index db2c8d90d68..43e463fb159 100644 --- a/packages/blade/src/components/Card/__tests__/Card.web.test.tsx +++ b/packages/blade/src/components/Card/__tests__/Card.web.test.tsx @@ -160,7 +160,7 @@ describe('', () => { , ), ).toThrow( - '[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge` component is accepted in visual', + '[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge, CardHeaderAmount` component is accepted in visual', ); mockConsoleError.mockRestore(); }); From 5baa06b3c4a46642154a38de53a566bc053d3d0c Mon Sep 17 00:00:00 2001 From: Chaitanya Deorukhkar Date: Wed, 10 Jan 2024 08:12:22 +0530 Subject: [PATCH 2/4] refactor: rebrand Radio, Checkbox & related common form components (#1930) * refactor: rebrand radio & radio group * update FormHint and SelectorSupportText to use Text component * update form label and hint text sizes * fix color * fix colors * Update tsconfig.json * Update tsconfig.json * update SelectorInput * add getFocusRingStyles util * update focus ring styles * use getFocusRingStyles in SelectorInput * use proper border token for radio hover state * refactor: rebrand Checkbox (#1936) * update rebranded components * update snapshots * fix tokens & import * use transparent token and update tests * reexport checkbox * fix lint issue --- packages/blade/.storybook/react/main.ts | 2 + packages/blade/jest.native.config.js | 1 + packages/blade/jest.web.config.js | 1 + packages/blade/rebranded-components.js | 2 + .../Checkbox/CheckboxIcon/CheckboxIcon.tsx | 5 +- .../CheckboxIcon/CheckboxIconWrapperStyles.ts | 4 +- .../Checkbox.native.test.tsx.snap | 46 +++--- .../__snapshots__/Checkbox.ssr.test.tsx.snap | 44 +++--- .../__snapshots__/Checkbox.web.test.tsx.snap | 134 +++++++++++------- .../src/components/Checkbox/checkboxTokens.ts | 36 ++--- .../blade/src/components/Form/FormHint.tsx | 34 ++--- .../blade/src/components/Form/FormLabel.tsx | 22 +-- .../Form/Selector/SelectorInput.web.tsx | 5 +- .../Form/Selector/SelectorSupportText.tsx | 28 ++-- .../Form/Selector/SelectorTitle.tsx | 24 +--- .../src/components/Form/Selector/types.ts | 5 +- packages/blade/src/components/Radio/Radio.tsx | 4 +- .../components/Radio/RadioIcon/RadioIcon.tsx | 3 +- .../Radio/RadioIcon/RadioIconWrapperStyles.ts | 4 +- .../__snapshots__/Radio.native.test.tsx.snap | 38 ++--- .../__snapshots__/Radio.ssr.test.tsx.snap | 88 ++++++++---- .../__snapshots__/Radio.web.test.tsx.snap | 56 +++++--- .../blade/src/components/Radio/radioTokens.ts | 48 +++---- packages/blade/src/components/index.ts | 4 +- .../getFocusRingStyles.d.ts | 1 + .../getFocusRingStyles.native.test.ts | 9 ++ .../getFocusRingStyles.native.ts | 10 ++ .../getFocusRingStyles.web.test.ts | 15 ++ .../getFocusRingStyles.web.ts | 15 ++ .../src/utils/getFocusRingStyles/index.ts | 1 + 30 files changed, 400 insertions(+), 289 deletions(-) create mode 100644 packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.d.ts create mode 100644 packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.test.ts create mode 100644 packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.ts create mode 100644 packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.test.ts create mode 100644 packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.ts create mode 100644 packages/blade/src/utils/getFocusRingStyles/index.ts diff --git a/packages/blade/.storybook/react/main.ts b/packages/blade/.storybook/react/main.ts index 0943487b659..2f1f262bcc1 100644 --- a/packages/blade/.storybook/react/main.ts +++ b/packages/blade/.storybook/react/main.ts @@ -40,7 +40,9 @@ const config: StorybookConfig = { '../../src/components/Accordion/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/BottomSheet/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Modal/**/**/*.stories.@(ts|tsx|js|jsx)', + '../../src/components/Radio/**/**/*.stories.@(ts|tsx|js|jsx)', '../../src/components/Popover/**/**/*.stories.@(ts|tsx|js|jsx)', + '../../src/components/Checkbox/**/**/*.stories.@(ts|tsx|js|jsx)', '../../docs/**/*.stories.mdx', '../../docs/**/*.stories.@(ts|tsx|js|jsx)', // '../../src/**/*.stories.mdx', diff --git a/packages/blade/jest.native.config.js b/packages/blade/jest.native.config.js index ba066d68032..ee53c449a03 100644 --- a/packages/blade/jest.native.config.js +++ b/packages/blade/jest.native.config.js @@ -21,6 +21,7 @@ module.exports = { testMatch: [ ...rebrandedComponents.map((component) => `**/${component}.native.test.{ts,tsx}`), '**/Icons/*Icon/*.native.test.{ts,tsx}', + '**/utils/**/*.test.{ts,tsx}', ], transform: { '\\.(js|ts|tsx)?$': './jest-preprocess.js', diff --git a/packages/blade/jest.web.config.js b/packages/blade/jest.web.config.js index 4e8c3ad99ed..0e9d4163056 100644 --- a/packages/blade/jest.web.config.js +++ b/packages/blade/jest.web.config.js @@ -18,6 +18,7 @@ const baseConfig = { ...rebrandedComponents.map((component) => `**/${component}.web.test.{ts,tsx}`), '**/Icons/*Icon/*.web.test.{ts,tsx}', '**/codemods/**/*.test.{ts,tsx}', + '**/utils/**/*.test.{ts,tsx}', ], transform: { '\\.(js|ts|tsx)?$': './jest-preprocess.js', diff --git a/packages/blade/rebranded-components.js b/packages/blade/rebranded-components.js index 9323a34ba8f..637672247fc 100644 --- a/packages/blade/rebranded-components.js +++ b/packages/blade/rebranded-components.js @@ -30,6 +30,8 @@ const rebrandedComponents = [ 'SkipNav', 'VisuallyHidden', 'Tooltip', + 'Radio', + 'Checkbox', ]; module.exports = { rebrandedComponents }; diff --git a/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx b/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx index 69386c21ef5..680b076ca0d 100644 --- a/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx +++ b/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx @@ -78,10 +78,7 @@ const CheckboxIcon = ({ size, }: CheckboxIconProps) => { const { theme } = useTheme(); - const defaultIconColor = getIn(theme, 'colors.brand.gray.200.lowContrast'); - const disabledIconColor = getIn(theme, 'colors.brand.gray.500.lowContrast'); - const iconColor = isDisabled ? disabledIconColor : defaultIconColor; - + const iconColor = getIn(theme, 'colors.interactive.icon.staticWhite.normal'); return ( should render checkbox with label 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(214, 18%, 69%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 27%, 76%, 1)", "borderRadius": 2, "borderStyle": "solid", "borderWidth": 1.5, @@ -126,16 +126,17 @@ exports[` should render checkbox with label 1`] = ` /> should set disabled state with isDisabled 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(216, 15%, 54%, 0.18)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(214, 40%, 92%, 1)", "borderRadius": 2, "borderStyle": "solid", "borderWidth": 1.5, @@ -291,16 +292,17 @@ exports[` should set disabled state with isDisabled 1`] = ` /> should set error state with validationState 1`] = ` [ { "alignItems": "center", - "backgroundColor": "hsla(9, 91%, 56%, 0.09)", - "borderColor": "hsla(8, 73%, 47%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(4, 74%, 49%, 1)", "borderRadius": 2, "borderStyle": "solid", "borderWidth": 1.5, @@ -456,16 +458,17 @@ exports[` should set error state with validationState 1`] = ` /> should set error state with validationState 1`] = ` > should set error state with validationState 1`] = ` /> should set error state with validationState 1`] = ` should set error state with validationState 1`] = ` /> should render checkbox with error validationState 1`] = `"
This has to be checked
"`; +exports[` should render checkbox with error validationState 1`] = `"
This has to be checked
"`; exports[` should render checkbox with error validationState 2`] = ` .c4.c4.c4.c4.c4 { @@ -26,8 +26,8 @@ exports[` should render checkbox with error validationState 2`] = ` border-style: solid; margin: 2px; border-radius: 2px; - background-color: hsla(8,73%,47%,1); - border-color: hsla(8,73%,47%,1); + background-color: hsla(4,74%,49%,1); + border-color: hsla(4,74%,49%,1); } .c5.c5.c5.c5.c5 { @@ -82,7 +82,7 @@ exports[` should render checkbox with error validationState 2`] = ` } .c7.c7.c7.c7.c7 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -99,7 +99,7 @@ exports[` should render checkbox with error validationState 2`] = ` } .c11.c11.c11.c11.c11 { - color: hsla(8,73%,47%,1); + color: hsla(0,83%,33%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.6875rem; font-weight: 400; @@ -142,8 +142,14 @@ exports[` should render checkbox with error validationState 2`] = ` } .c3.c3.c3.c3.c3:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); }
should render checkbox with error validationState 2`] = ` clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -224,9 +230,9 @@ exports[` should render checkbox with error validationState 2`] = ` clip-rule="evenodd" d="M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -238,18 +244,19 @@ exports[` should render checkbox with error validationState 2`] = ` class="c6" data-blade-component="base-box" /> -
Remember password -
+

should render checkbox with error validationState 2`] = ` @@ -289,8 +296,7 @@ exports[` should render checkbox with error validationState 2`] = ` /> This has to be checked diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap index b9cbf29b5b8..109fbd1cdb4 100644 --- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap +++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.web.test.tsx.snap @@ -24,8 +24,8 @@ exports[` should render checkbox with label 1`] = ` border-style: solid; margin: 2px; border-radius: 2px; - background-color: transparent; - border-color: hsla(214,18%,69%,1); + background-color: hsla(0,0%,100%,0); + border-color: hsla(211,27%,76%,1); } .c5.c5.c5.c5.c5 { @@ -72,7 +72,7 @@ exports[` should render checkbox with label 1`] = ` } .c7.c7.c7.c7.c7 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -89,10 +89,10 @@ exports[` should render checkbox with label 1`] = ` } .c10.c10.c10.c10.c10 { - color: hsla(218,89%,51%,1); + color: hsla(227,71%,51%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; - font-weight: 700; + font-weight: 500; font-style: normal; -webkit-text-decoration-line: none; text-decoration-line: none; @@ -133,13 +133,19 @@ exports[` should render checkbox with label 1`] = ` } .c3.c3.c3.c3.c3:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); } .c3.c3.c3.c3.c3:hover + div { - border-color: hsla(214,18%,69%,1); - background-color: hsla(216,15%,54%,0.09); + border-color: hsla(211,27%,76%,1); + background-color: hsla(211,20%,52%,0.12); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 70ms; @@ -172,7 +178,7 @@ exports[` should render checkbox with label 1`] = ` } .c8.c8.c8.c8.c8:focus-visible .content-container { - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.18); } .c8.c8.c8.c8.c8 * { @@ -232,9 +238,9 @@ exports[` should render checkbox with label 1`] = ` clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -250,9 +256,9 @@ exports[` should render checkbox with label 1`] = ` class="c6" data-blade-component="base-box" /> -
I accept should render checkbox with label 1`] = ` -
+

@@ -306,8 +312,8 @@ exports[` should set disabled state with isDisabled 1`] = ` border-style: solid; margin: 2px; border-radius: 2px; - background-color: transparent; - border-color: hsla(216,15%,54%,0.18); + background-color: hsla(0,0%,100%,0); + border-color: hsla(214,40%,92%,1); } .c5.c5.c5.c5.c5 { @@ -340,7 +346,7 @@ exports[` should set disabled state with isDisabled 1`] = ` } .c7.c7.c7.c7.c7 { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -383,8 +389,14 @@ exports[` should set disabled state with isDisabled 1`] = ` } .c3.c3.c3.c3.c3:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); }
@@ -436,9 +448,9 @@ exports[` should set disabled state with isDisabled 1`] = ` clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(214, 18%, 69%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(214, 18%, 69%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -454,12 +466,12 @@ exports[` should set disabled state with isDisabled 1`] = ` class="c6" data-blade-component="base-box" /> -
Remember password -
+

@@ -491,8 +503,8 @@ exports[` should set error state with validationState 1`] = ` border-style: solid; margin: 2px; border-radius: 2px; - background-color: hsla(9,91%,56%,0.09); - border-color: hsla(8,73%,47%,1); + background-color: hsla(0,0%,100%,0); + border-color: hsla(4,74%,49%,1); } .c5.c5.c5.c5.c5 { @@ -547,7 +559,7 @@ exports[` should set error state with validationState 1`] = ` } .c7.c7.c7.c7.c7 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -564,7 +576,7 @@ exports[` should set error state with validationState 1`] = ` } .c11.c11.c11.c11.c11 { - color: hsla(8,73%,47%,1); + color: hsla(0,83%,33%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.6875rem; font-weight: 400; @@ -607,8 +619,14 @@ exports[` should set error state with validationState 1`] = ` } .c3.c3.c3.c3.c3:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); }
@@ -660,9 +678,9 @@ exports[` should set error state with validationState 1`] = ` clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -678,18 +696,19 @@ exports[` should set error state with validationState 1`] = ` class="c6" data-blade-component="base-box" /> -
Remember password -
+

should set error state with validationState 1`] = ` @@ -729,8 +748,7 @@ exports[` should set error state with validationState 1`] = ` /> This has to be checked @@ -764,8 +782,8 @@ exports[` should set to indeterminate state of checkbox 1`] = ` border-style: solid; margin: 2px; border-radius: 2px; - background-color: hsla(218,89%,51%,1); - border-color: hsla(218,89%,51%,1); + background-color: hsla(227,100%,59%,1); + border-color: hsla(227,100%,59%,1); } .c5.c5.c5.c5.c5 { @@ -803,7 +821,7 @@ exports[` should set to indeterminate state of checkbox 1`] = ` } .c8.c8.c8.c8.c8 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -846,13 +864,19 @@ exports[` should set to indeterminate state of checkbox 1`] = ` } .c3.c3.c3.c3.c3:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); } .c3.c3.c3.c3.c3:hover + div { - border-color: hsla(223,95%,48%,1); - background-color: hsla(223,95%,48%,1); + border-color: hsla(227,71%,51%,1); + background-color: hsla(227,71%,51%,1); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 70ms; @@ -908,9 +932,9 @@ exports[` should set to indeterminate state of checkbox 1`] = ` clip-rule="evenodd" d="M1.3335 3.99984C1.3335 3.81574 1.48273 3.6665 1.66683 3.6665H6.3335C6.51759 3.6665 6.66683 3.81574 6.66683 3.99984C6.66683 4.18393 6.51759 4.33317 6.3335 4.33317H1.66683C1.48273 4.33317 1.3335 4.18393 1.3335 3.99984Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -934,9 +958,9 @@ exports[` should set to indeterminate state of checkbox 1`] = ` clip-rule="evenodd" d="M6.90237 1.76413C7.03254 1.89431 7.03254 2.10536 6.90237 2.23554L3.2357 5.90221C3.10553 6.03238 2.89447 6.03238 2.7643 5.90221L1.09763 4.23554C0.967456 4.10536 0.967456 3.89431 1.09763 3.76414C1.22781 3.63396 1.43886 3.63396 1.56904 3.76414L3 5.1951L6.43096 1.76413C6.56114 1.63396 6.77219 1.63396 6.90237 1.76413Z" data-blade-component="svg-path" - fill="hsla(220, 27%, 98%, 1)" + fill="hsla(0, 0%, 100%, 1)" fill-rule="evenodd" - stroke="hsla(220, 27%, 98%, 1)" + stroke="hsla(0, 0%, 100%, 1)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" @@ -948,12 +972,12 @@ exports[` should set to indeterminate state of checkbox 1`] = ` class="c7" data-blade-component="base-box" /> -
Remember password -
+

diff --git a/packages/blade/src/components/Checkbox/checkboxTokens.ts b/packages/blade/src/components/Checkbox/checkboxTokens.ts index b8c0d6142ad..f5ad3f966db 100644 --- a/packages/blade/src/components/Checkbox/checkboxTokens.ts +++ b/packages/blade/src/components/Checkbox/checkboxTokens.ts @@ -1,5 +1,5 @@ +import type { DotNotationToken } from '../../utils/lodashButBetter/get'; import type { Theme } from '~components/BladeProvider'; -import type { DotNotationColorStringToken } from '~utils/types'; import type { SelectorInputHoverTokens } from '~components/Form/Selector/types'; import { size } from '~tokens/global'; @@ -28,7 +28,7 @@ const checkboxSizes = { }, } as const; -type ColorTokens = `colors.${DotNotationColorStringToken}` | 'transparent'; +type ColorTokens = `colors.${DotNotationToken}`; type Variant = { border: { checked: ColorTokens; @@ -52,32 +52,32 @@ const checkboxIconColors: CheckboxIconColors = { variants: { default: { border: { - checked: 'colors.brand.primary.500', - unchecked: 'colors.brand.gray.500.lowContrast', + checked: 'colors.interactive.border.primary.default', + unchecked: 'colors.interactive.border.gray.default', }, background: { - checked: 'colors.brand.primary.500', - unchecked: 'transparent', + checked: 'colors.interactive.background.primary.default', + unchecked: 'colors.transparent', }, }, disabled: { border: { - checked: 'transparent', - unchecked: 'colors.brand.gray.a100.lowContrast', + checked: 'colors.interactive.border.primary.disabled', + unchecked: 'colors.interactive.border.gray.disabled', }, background: { - checked: 'colors.brand.gray.a100.lowContrast', - unchecked: 'transparent', + checked: 'colors.interactive.background.primary.disabled', + unchecked: 'colors.transparent', }, }, negative: { border: { - checked: 'colors.feedback.border.negative.highContrast', - unchecked: 'colors.feedback.border.negative.highContrast', + checked: 'colors.interactive.border.negative.default', + unchecked: 'colors.interactive.border.negative.default', }, background: { - checked: 'colors.feedback.background.negative.highContrast', - unchecked: 'colors.feedback.background.negative.lowContrast', + checked: 'colors.interactive.background.negative.default', + unchecked: 'colors.transparent', }, }, }, @@ -86,12 +86,12 @@ const checkboxIconColors: CheckboxIconColors = { const checkboxHoverTokens: SelectorInputHoverTokens = { default: { background: { - checked: 'colors.brand.primary.600', - unchecked: 'colors.brand.gray.a50.lowContrast', + checked: 'colors.interactive.background.primary.highlighted', + unchecked: 'colors.interactive.background.gray.faded', }, border: { - checked: 'colors.brand.primary.600', - unchecked: 'colors.brand.gray.500.lowContrast', + checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color + unchecked: 'colors.interactive.border.gray.default', }, }, }; diff --git a/packages/blade/src/components/Form/FormHint.tsx b/packages/blade/src/components/Form/FormHint.tsx index d6a4d5afd6d..64e12f7343c 100644 --- a/packages/blade/src/components/Form/FormHint.tsx +++ b/packages/blade/src/components/Form/FormHint.tsx @@ -2,37 +2,29 @@ import type { ReactElement } from 'react'; import React from 'react'; import { FormHintWrapper } from './FormHintWrapper'; -import { BaseText } from '~components/Typography/BaseText'; +import type { TextProps } from '~components/Typography/Text'; +import { Text } from '~components/Typography/Text'; import BaseBox from '~components/Box/BaseBox'; import { CheckIcon, InfoIcon } from '~components/Icons'; -import type { BaseTextProps } from '~components/Typography/BaseText/types'; import { getPlatformType } from '~utils/getPlatformType'; type HintTextProps = { icon?: React.ElementType; children: string; id?: string; - color: BaseTextProps['color']; + color: TextProps<{ variant: 'caption' }>['color']; }; const HintText = ({ icon: Icon, children, id, color }: HintTextProps): ReactElement => { const isReactNative = getPlatformType() === 'react-native'; return ( - + {Icon ? : null} - + {children} - + ); @@ -76,13 +68,13 @@ export type FormHintProps = { const Icons = { error: (): ReactElement => ( <> - + ), success: (): ReactElement => ( <> - + ), @@ -97,11 +89,11 @@ const FormHint = ({ errorTextId, successTextId, }: FormHintProps): React.ReactElement => { - const colors = { - help: 'surface.text.muted.lowContrast', - error: 'feedback.text.negative.lowContrast', - success: 'feedback.text.positive.lowContrast', - } as const; + const colors: Record['color']> = { + help: 'surface.text.gray.muted', + error: 'feedback.text.negative.intense', + success: 'feedback.text.positive.intense', + }; const showError = type === 'error' && errorText; const showSuccess = type === 'success' && successText; diff --git a/packages/blade/src/components/Form/FormLabel.tsx b/packages/blade/src/components/Form/FormLabel.tsx index e00886eb0b0..8adfe4e0aa1 100644 --- a/packages/blade/src/components/Form/FormLabel.tsx +++ b/packages/blade/src/components/Form/FormLabel.tsx @@ -1,12 +1,10 @@ import React from 'react'; import { VisuallyHidden } from '~components/VisuallyHidden'; import { Text } from '~components/Typography'; -import { BaseText } from '~components/Typography/BaseText'; import { getPlatformType, useBreakpoint } from '~utils'; import { metaAttribute, MetaConstants } from '~utils/metaAttribute'; import BaseBox from '~components/Box/BaseBox'; import { useTheme } from '~components/BladeProvider'; -import type { ColorContrastTypes } from '~tokens/theme/theme'; import { makeSpace } from '~utils/makeSpace'; import { makeSize } from '~utils/makeSize'; import { size } from '~tokens/global'; @@ -18,7 +16,6 @@ type CommonProps = { accessibilityText?: string; children: string | undefined; id?: string; - contrast?: ColorContrastTypes; }; type LabelProps = CommonProps & { @@ -56,7 +53,6 @@ const FormLabel = ({ children, id, htmlFor, - contrast = 'low', }: FormLabelProps): React.ReactElement => { const { theme } = useTheme(); const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints }); @@ -69,23 +65,20 @@ const FormLabel = ({ if (necessityIndicator === 'optional') { necessityLabel = ( - + (optional) ); } if (necessityIndicator === 'required') { necessityLabel = ( - * - + ); } @@ -106,10 +99,9 @@ const FormLabel = ({ maxHeight={makeSpace(size[36])} > ( ({ theme, isChecked, isDisabled, hasError, hoverTokens }) => ({ ...screenReaderStyles, '&:focus-visible + div': { - // TODO: Replace with focus outline token - // outline: `1px solid ${theme.colors.surface.background.level1.lowContrast}`, - // boxShadow: `0px 0px 0px 4px ${theme.colors.brand.primary[400]}`, + ...getFocusRingStyles(theme), }, '&:hover + div': { ...getHoverStyles({ theme, isChecked, isDisabled, hasError, hoverTokens }), diff --git a/packages/blade/src/components/Form/Selector/SelectorSupportText.tsx b/packages/blade/src/components/Form/Selector/SelectorSupportText.tsx index 05fc41e1a16..f83fb44b337 100644 --- a/packages/blade/src/components/Form/Selector/SelectorSupportText.tsx +++ b/packages/blade/src/components/Form/Selector/SelectorSupportText.tsx @@ -1,27 +1,29 @@ -import { BaseText } from '~components/Typography/BaseText'; -import { getPlatformType } from '~utils'; +import { Box } from '~components/Box'; +import { Text } from '~components/Typography/Text'; +import { castWebType, getPlatformType } from '~utils'; const SelectorSupportText = ({ children, id, + isNegative, }: { children: React.ReactNode; id?: string; + isNegative?: boolean; }): React.ReactElement => { const isReactNative = getPlatformType() === 'react-native'; return ( - - {children} - + + + {children} + + ); }; diff --git a/packages/blade/src/components/Form/Selector/SelectorTitle.tsx b/packages/blade/src/components/Form/Selector/SelectorTitle.tsx index 9716458865b..b06cf55c6c9 100644 --- a/packages/blade/src/components/Form/Selector/SelectorTitle.tsx +++ b/packages/blade/src/components/Form/Selector/SelectorTitle.tsx @@ -1,5 +1,5 @@ import BaseBox from '~components/Box/BaseBox'; -import { BaseText } from '~components/Typography/BaseText'; +import { Text } from '~components/Typography/Text'; const SelectorTitle = ({ children, @@ -10,29 +10,15 @@ const SelectorTitle = ({ isDisabled?: boolean; size: 'small' | 'medium'; }): React.ReactElement => { - const lineHeight = { - small: 75, - medium: 100, - } as const; - const fontSize = { - small: 50, - medium: 100, - } as const; - return ( <> - {children} - + ); }; diff --git a/packages/blade/src/components/Form/Selector/types.ts b/packages/blade/src/components/Form/Selector/types.ts index 83843176fb6..6f82e8bd2ae 100644 --- a/packages/blade/src/components/Form/Selector/types.ts +++ b/packages/blade/src/components/Form/Selector/types.ts @@ -1,6 +1,7 @@ import type React from 'react'; -import type { DotNotationColorStringToken, TestID } from '~utils/types'; +import type { TestID } from '~utils/types'; import type { Theme } from '~components/BladeProvider'; +import type { DotNotationToken } from '~utils/lodashButBetter/get'; /* eslint-disable @typescript-eslint/no-explicit-any */ type SelectorLabelProps = { @@ -29,7 +30,7 @@ type SelectorInputProps = HoverProps & { accessibilityLabel?: string; }; -type ColorTokens = `colors.${DotNotationColorStringToken}` | 'transparent'; +type ColorTokens = `colors.${DotNotationToken}`; type SelectorInputHoverTokens = { default: { background: { diff --git a/packages/blade/src/components/Radio/Radio.tsx b/packages/blade/src/components/Radio/Radio.tsx index 699ce1d09f3..f88daada639 100644 --- a/packages/blade/src/components/Radio/Radio.tsx +++ b/packages/blade/src/components/Radio/Radio.tsx @@ -127,7 +127,9 @@ const _Radio: React.ForwardRefRenderFunction = ( {showHelpText && ( - {helpText} + + {helpText} + )} diff --git a/packages/blade/src/components/Radio/RadioIcon/RadioIcon.tsx b/packages/blade/src/components/Radio/RadioIcon/RadioIcon.tsx index 82e2579d72f..a00546b176d 100644 --- a/packages/blade/src/components/Radio/RadioIcon/RadioIcon.tsx +++ b/packages/blade/src/components/Radio/RadioIcon/RadioIcon.tsx @@ -41,7 +41,8 @@ const RadioIcon = ({ isChecked, isDisabled, isNegative, size }: RadioIconProps) let variant: 'default' | 'disabled' | 'negative' = 'default'; if (isDisabled) variant = 'disabled'; if (isNegative) variant = 'negative'; - const dotColor = getIn(theme, radioIconColors.variants[variant].dot[state]); + const dotColorToken = radioIconColors.variants[variant].dot[state]; + const dotColor = getIn(theme, dotColorToken); return ( should render radio with label 1`] = ` > should render radio with label 1`] = ` style={ [ { - "color": "hsla(217, 18%, 45%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 12, "fontStyle": "normal", @@ -130,7 +130,7 @@ exports[` should render radio with label 1`] = ` > should render radio with label 1`] = ` style={ [ { - "color": "hsla(217, 56%, 17%, 1)", + "color": "hsla(212, 39%, 16%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -287,8 +287,8 @@ exports[` should render radio with label 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(214, 18%, 69%, 1)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(211, 27%, 76%, 1)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1.5, @@ -317,16 +317,17 @@ exports[` should render radio with label 1`] = ` /> should set disabled state with isDisabled 1`] = ` > should set disabled state with isDisabled 1`] = ` style={ [ { - "color": "hsla(217, 18%, 45%, 1)", + "color": "hsla(211, 26%, 34%, 1)", "fontFamily": "Inter", "fontSize": 12, "fontStyle": "normal", @@ -490,7 +491,7 @@ exports[` should set disabled state with isDisabled 1`] = ` > should set disabled state with isDisabled 1`] = ` style={ [ { - "color": "hsla(217, 56%, 17%, 1)", + "color": "hsla(212, 39%, 16%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -647,8 +648,8 @@ exports[` should set disabled state with isDisabled 1`] = ` [ { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "hsla(216, 15%, 54%, 0.18)", + "backgroundColor": "hsla(0, 0%, 100%, 0)", + "borderColor": "hsla(214, 40%, 92%, 1)", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1.5, @@ -677,16 +678,17 @@ exports[` should set disabled state with isDisabled 1`] = ` /> should render with help text 1`] = `"

Select fruit

,Select One

Select One
"`; +exports[` should render with help text 1`] = `"

Select fruit

,Select One

Select One
"`; exports[` should render with help text 2`] = ` .c9.c9.c9.c9.c9 { @@ -23,8 +23,8 @@ exports[` should render with help text 2`] = ` border-style: solid; margin: 2px; border-radius: 9999px; - background-color: transparent; - border-color: hsla(214,18%,69%,1); + background-color: hsla(0,0%,100%,0); + border-color: hsla(211,27%,76%,1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.5,1); @@ -95,16 +95,20 @@ exports[` should render with help text 2`] = ` margin-left: 24px; } -.c14.c14.c14.c14.c14 { - margin-bottom: 0px; +.c13.c13.c13.c13.c13 { + display: contents; } .c15.c15.c15.c15.c15 { + margin-bottom: 0px; +} + +.c16.c16.c16.c16.c16 { margin-top: 4px; } .c3.c3.c3.c3.c3 { - color: hsla(217,18%,45%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.75rem; font-weight: 600; @@ -126,7 +130,7 @@ exports[` should render with help text 2`] = ` } .c5.c5.c5.c5.c5 { - color: hsla(217,56%,17%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -143,7 +147,7 @@ exports[` should render with help text 2`] = ` } .c11.c11.c11.c11.c11 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -159,8 +163,25 @@ exports[` should render with help text 2`] = ` padding: 0; } -.c13.c13.c13.c13.c13 { - color: hsla(216,16%,60%,1); +.c14.c14.c14.c14.c14 { + color: hsla(0,83%,33%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.6875rem; + font-weight: 400; + font-style: italic; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c17.c17.c17.c17.c17 { + color: hsla(211,22%,56%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.6875rem; font-weight: 400; @@ -211,13 +232,19 @@ exports[` should render with help text 2`] = ` } .c8.c8.c8.c8.c8:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); } .c8.c8.c8.c8.c8:hover + div { - border-color: hsla(214,18%,69%,1); - background-color: hsla(216,15%,54%,0.09); + border-color: hsla(211,27%,76%,1); + background-color: hsla(211,20%,52%,0.12); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 70ms; @@ -318,31 +345,36 @@ exports[` should render with help text 2`] = ` class="c10" data-blade-component="base-box" /> -
Apple -
+

- - Apple Help - + + Apple Help + +
should render with help text 2`] = ` class="c10" data-blade-component="base-box" /> -
Mango -
+

@@ -394,7 +426,7 @@ exports[` should render with help text 2`] = `
should render with help text 2`] = ` style="word-break:break-all" > Select One diff --git a/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.web.test.tsx.snap b/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.web.test.tsx.snap index 2450cee73a2..c260916e5c8 100644 --- a/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.web.test.tsx.snap +++ b/packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.web.test.tsx.snap @@ -21,8 +21,8 @@ exports[` should render radio with label 1`] = ` border-style: solid; margin: 2px; border-radius: 9999px; - background-color: transparent; - border-color: hsla(214,18%,69%,1); + background-color: hsla(0,0%,100%,0); + border-color: hsla(211,27%,76%,1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.5,1); @@ -94,7 +94,7 @@ exports[` should render radio with label 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(217,18%,45%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.75rem; font-weight: 600; @@ -116,7 +116,7 @@ exports[` should render radio with label 1`] = ` } .c5.c5.c5.c5.c5 { - color: hsla(217,56%,17%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -133,7 +133,7 @@ exports[` should render radio with label 1`] = ` } .c12.c12.c12.c12.c12 { - color: hsla(216,27%,36%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -184,13 +184,19 @@ exports[` should render radio with label 1`] = ` } .c9.c9.c9.c9.c9:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); } .c9.c9.c9.c9.c9:hover + div { - border-color: hsla(214,18%,69%,1); - background-color: hsla(216,15%,54%,0.09); + border-color: hsla(211,27%,76%,1); + background-color: hsla(211,20%,52%,0.12); -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); transition-timing-function: cubic-bezier(0.3,0,0.2,1); -webkit-transition-duration: 70ms; @@ -287,12 +293,12 @@ exports[` should render radio with label 1`] = ` class="c11" data-blade-component="base-box" /> -
Apple -
+

@@ -326,8 +332,8 @@ exports[` should set disabled state with isDisabled 1`] = ` border-style: solid; margin: 2px; border-radius: 9999px; - background-color: transparent; - border-color: hsla(216,15%,54%,0.18); + background-color: hsla(0,0%,100%,0); + border-color: hsla(214,40%,92%,1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.5,1); @@ -399,7 +405,7 @@ exports[` should set disabled state with isDisabled 1`] = ` } .c3.c3.c3.c3.c3 { - color: hsla(217,18%,45%,1); + color: hsla(211,26%,34%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.75rem; font-weight: 600; @@ -421,7 +427,7 @@ exports[` should set disabled state with isDisabled 1`] = ` } .c5.c5.c5.c5.c5 { - color: hsla(217,56%,17%,1); + color: hsla(212,39%,16%,1); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -438,7 +444,7 @@ exports[` should set disabled state with isDisabled 1`] = ` } .c12.c12.c12.c12.c12 { - color: hsla(214,18%,69%,1); + color: hsla(211,20%,52%,0.32); font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; font-size: 0.875rem; font-weight: 400; @@ -489,8 +495,14 @@ exports[` should set disabled state with isDisabled 1`] = ` } .c9.c9.c9.c9.c9:focus-visible + div { - outline: 1px solid hsla(220,30%,96%,1); - box-shadow: 0px 0px 0px 4px hsla(218,89%,51%,0.18); + outline: 4px solid hsla(227,100%,59%,0.18); + outline-offset: 1px; + -webkit-transition-property: outline-width; + transition-property: outline-width; + -webkit-transition-duration: 70ms; + transition-duration: 70ms; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); }
@@ -584,12 +596,12 @@ exports[` should set disabled state with isDisabled 1`] = ` class="c11" data-blade-component="base-box" /> -
Apple -
+

diff --git a/packages/blade/src/components/Radio/radioTokens.ts b/packages/blade/src/components/Radio/radioTokens.ts index 1e31853ef2b..7b3ffaf2e79 100644 --- a/packages/blade/src/components/Radio/radioTokens.ts +++ b/packages/blade/src/components/Radio/radioTokens.ts @@ -1,6 +1,6 @@ import type { Theme } from '~components/BladeProvider'; -import type { DotNotationColorStringToken } from '~utils/types'; import type { SelectorInputHoverTokens } from '~components/Form/Selector/types'; +import type { DotNotationToken } from '~utils/lodashButBetter/get'; import { size } from '~tokens/global'; const radioSizes = { @@ -30,7 +30,7 @@ const radioSizes = { }, } as const; -type ColorTokens = `colors.${DotNotationColorStringToken}` | 'transparent'; +type ColorTokens = `colors.${DotNotationToken}`; type Variant = { dot: { checked: ColorTokens; @@ -58,44 +58,44 @@ const radioIconColors: RadioIconColors = { variants: { default: { dot: { - checked: 'colors.brand.gray.200.lowContrast', - unchecked: 'colors.brand.gray.200.lowContrast', + checked: 'colors.interactive.icon.staticWhite.normal', + unchecked: 'colors.transparent', }, border: { - checked: 'colors.brand.primary.500', - unchecked: 'colors.brand.gray.500.lowContrast', + checked: 'colors.interactive.border.primary.default', + unchecked: 'colors.interactive.border.gray.default', }, background: { - checked: 'colors.brand.primary.500', - unchecked: 'transparent', + checked: 'colors.interactive.background.primary.default', + unchecked: 'colors.transparent', }, }, disabled: { dot: { - checked: 'colors.brand.gray.200.lowContrast', - unchecked: 'colors.brand.gray.200.lowContrast', + checked: 'colors.interactive.icon.staticWhite.normal', + unchecked: 'colors.interactive.icon.staticWhite.normal', }, border: { - checked: 'transparent', - unchecked: 'colors.brand.gray.a100.lowContrast', + checked: 'colors.transparent', + unchecked: 'colors.interactive.border.gray.disabled', }, background: { - checked: 'colors.brand.gray.a100.lowContrast', - unchecked: 'transparent', + checked: 'colors.interactive.background.primary.disabled', + unchecked: 'colors.transparent', }, }, negative: { dot: { - checked: 'colors.brand.gray.200.lowContrast', - unchecked: 'colors.brand.gray.200.lowContrast', + checked: 'colors.interactive.icon.staticWhite.normal', + unchecked: 'colors.transparent', }, border: { - checked: 'colors.feedback.border.negative.highContrast', - unchecked: 'colors.feedback.border.negative.highContrast', + checked: 'colors.interactive.border.negative.default', + unchecked: 'colors.interactive.border.negative.default', }, background: { - checked: 'colors.feedback.background.negative.highContrast', - unchecked: 'colors.feedback.background.negative.lowContrast', + checked: 'colors.interactive.background.negative.default', + unchecked: 'colors.transparent', }, }, }, @@ -104,12 +104,12 @@ const radioIconColors: RadioIconColors = { const radioHoverTokens: SelectorInputHoverTokens = { default: { background: { - checked: 'colors.brand.primary.600', - unchecked: 'colors.brand.gray.a50.lowContrast', + checked: 'colors.interactive.background.primary.highlighted', + unchecked: 'colors.interactive.background.gray.faded', }, border: { - checked: 'colors.brand.primary.600', - unchecked: 'colors.brand.gray.500.lowContrast', + checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color + unchecked: 'colors.interactive.border.gray.default', }, }, }; diff --git a/packages/blade/src/components/index.ts b/packages/blade/src/components/index.ts index c7b26bca876..f6654dcd9dd 100644 --- a/packages/blade/src/components/index.ts +++ b/packages/blade/src/components/index.ts @@ -10,16 +10,18 @@ export * from './Card'; export * from './Counter'; export * from './Collapsible'; export * from './Carousel'; +export * from './Checkbox'; export * from './Divider'; export * from './Icons'; export * from './Indicator'; export * from './Link'; export * from './List'; export * from './Modal'; +export * from './Radio'; +export * from './Spinner'; export * from './Tabs'; export * from './Tag'; export * from './Tooltip'; -export * from './Spinner'; export * from './Typography'; export * from './SkipNav'; export * from './VisuallyHidden'; diff --git a/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.d.ts b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.d.ts new file mode 100644 index 00000000000..0d33942962b --- /dev/null +++ b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.d.ts @@ -0,0 +1 @@ +export * from './getFocusRingStyles.web'; diff --git a/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.test.ts b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.test.ts new file mode 100644 index 00000000000..55ab644395e --- /dev/null +++ b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.test.ts @@ -0,0 +1,9 @@ +import { bladeTheme } from '../../tokens'; +import { getFocusRingStyles } from './getFocusRingStyles'; + +describe('getFocusRingStyles', () => { + it('should return correct styles when called with valid parameters', () => { + const result = getFocusRingStyles({ ...bladeTheme, colors: bladeTheme.colors.onLight }); + expect(result).toMatchObject({}); + }); +}); diff --git a/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.ts b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.ts new file mode 100644 index 00000000000..7f4295cbf28 --- /dev/null +++ b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.native.ts @@ -0,0 +1,10 @@ +import type { CSSProperties } from 'styled-components'; +import type { Theme } from '../../components/BladeProvider'; + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +function getFocusRingStyles(theme: Theme): CSSProperties { + // React Native does not need focus rings + return {}; +} + +export { getFocusRingStyles }; diff --git a/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.test.ts b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.test.ts new file mode 100644 index 00000000000..df2b4e53cf7 --- /dev/null +++ b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.test.ts @@ -0,0 +1,15 @@ +import { bladeTheme } from '../../tokens'; +import { getFocusRingStyles } from './getFocusRingStyles'; + +describe('getFocusRingStyles', () => { + it('should return correct styles when called with valid parameters', () => { + const result = getFocusRingStyles({ ...bladeTheme, colors: bladeTheme.colors.onLight }); + expect(result).toMatchObject({ + outline: '4px solid hsla(227, 100%, 59%, 0.18)', + outlineOffset: '1px', + transitionDuration: '70ms', + transitionProperty: 'outline-width', + transitionTimingFunction: 'cubic-bezier(0.3, 0, 0.2, 1)', + }); + }); +}); diff --git a/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.ts b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.ts new file mode 100644 index 00000000000..ec3fcdeff83 --- /dev/null +++ b/packages/blade/src/utils/getFocusRingStyles/getFocusRingStyles.web.ts @@ -0,0 +1,15 @@ +import type { CSSProperties } from 'styled-components'; +import type { Theme } from '../../components/BladeProvider'; +import { castWebType, makeMotionTime } from '~utils'; + +function getFocusRingStyles(theme: Theme): CSSProperties { + return { + outline: `4px solid ${theme.colors.surface.border.primary.muted}`, + outlineOffset: '1px', + transitionProperty: 'outline-width', + transitionDuration: castWebType(makeMotionTime(theme.motion.duration['2xquick'])), + transitionTimingFunction: castWebType(theme.motion.easing.standard.effective), + }; +} + +export { getFocusRingStyles }; diff --git a/packages/blade/src/utils/getFocusRingStyles/index.ts b/packages/blade/src/utils/getFocusRingStyles/index.ts new file mode 100644 index 00000000000..066c6cac225 --- /dev/null +++ b/packages/blade/src/utils/getFocusRingStyles/index.ts @@ -0,0 +1 @@ +export * from './getFocusRingStyles'; From 6194eb1fe766cc1ef971bebb36f3f9a261296168 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Wed, 10 Jan 2024 08:14:33 +0530 Subject: [PATCH 3/4] chore: add PR template (#1937) --- .github/pull_request_template.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 .github/pull_request_template.md diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 00000000000..e0aea699366 --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,21 @@ +## Description + + + +## Changes + + + +## Additional Information + + + +## Component Checklist + + + +- [ ] Update Component Status Page +- [ ] Perform Manual Testing in Other Browsers +- [ ] Add KitchenSink Story +- [ ] Add Interaction Tests (if applicable) +- [ ] Add changeset From bc8425b4960813b15e3dc7a1df0c9d7e138e80d2 Mon Sep 17 00:00:00 2001 From: Saurabh Daware Date: Wed, 10 Jan 2024 12:53:50 +0530 Subject: [PATCH 4/4] feat(Rebranding / Storybook): add version in toolbar (#1924) --- packages/blade/.storybook/react/preview.tsx | 31 +++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/packages/blade/.storybook/react/preview.tsx b/packages/blade/.storybook/react/preview.tsx index f328d05855d..9bdf373a423 100644 --- a/packages/blade/.storybook/react/preview.tsx +++ b/packages/blade/.storybook/react/preview.tsx @@ -72,6 +72,13 @@ export const parameters = { } return bladeTheme; }; + + if (context.store.globals.globals.version === '10' && window.top) { + window.top.location.href = + 'https://v10--61c19ee8d3d282003ac1d81c.chromatic.com' + + window.top.location.pathname + + window.top.location.search; + } return ( @@ -164,6 +178,23 @@ export const decorators = [ ]; export const globalTypes = { + version: { + name: 'Blade Documentation Version', + description: 'Version of the Blade', + defaultValue: '11', + toolbar: { + icon: 'time', + title: ' v11 - Rebranded', + // Array of plain string values or MenuItem shape (see below) + items: [ + { value: '10', title: ' v10 - Old' }, + { value: '11', title: ' v11 - Rebranded', default: true }, + ], + dynamicTitle: true, + // Property that specifies if the name of the item will be displayed + showName: false, + }, + }, colorScheme: { name: 'Color Scheme', description: 'Color Scheme for Blade',