From 1c53807b71697a79715a10ff1687ba88771740e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Moreno?= Date: Mon, 10 Jul 2023 15:49:45 +0100 Subject: [PATCH 01/13] chore: update rich radio button (#4791) --- .changeset/young-carrots-turn.md | 5 +++++ .../RichRadioButton.component.tsx | 13 +++++++++---- .../RichRadioButton/RichRadioButton.module.scss | 17 ++++++++++++++--- 3 files changed, 28 insertions(+), 7 deletions(-) create mode 100644 .changeset/young-carrots-turn.md diff --git a/.changeset/young-carrots-turn.md b/.changeset/young-carrots-turn.md new file mode 100644 index 00000000000..a3e82c04c2e --- /dev/null +++ b/.changeset/young-carrots-turn.md @@ -0,0 +1,5 @@ +--- +'@talend/design-system': patch +--- + +chore: update rich radio button diff --git a/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx b/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx index 5921a39cae6..da0b1894d78 100644 --- a/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx +++ b/packages/design-system/src/components/RichRadioButton/RichRadioButton.component.tsx @@ -7,7 +7,6 @@ import { import { StackVertical, StackHorizontal } from '../Stack'; import { getIconWithDeprecatedSupport } from '../Icon/DeprecatedIconHelper'; import style from './RichRadioButton.module.scss'; -import classnames from 'classnames'; import { Tag } from '../Tag'; import { Icon } from '../Icon'; import { DataAttributes } from 'src/types'; @@ -15,17 +14,17 @@ import { DataAttributes } from 'src/types'; function RichRadioButtonIcon({ asset }: { asset?: LogoAsset | IllustrationAsset | IconAsset }) { if (asset?.illustration) { return ( - + ); } if (asset?.logo) { - return ; + return ; } if (asset?.name) { return ( - + {getIconWithDeprecatedSupport({ iconSrc: asset.name || '', size: 'L', @@ -68,6 +67,12 @@ const RichRadioButton = ({ data-test={dataTest} onChange={() => onChange(id)} data-checked={isChecked} + onKeyDown={event => { + if (event.key === 'Enter') { + event.preventDefault(); + onChange(id); + } + }} /> diff --git a/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss b/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss index c92f9d7c202..c3e6366d008 100644 --- a/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss +++ b/packages/design-system/src/components/RichRadioButton/RichRadioButton.module.scss @@ -34,12 +34,17 @@ &__wrapper { display: flex; flex: 1; + height: 100%; margin: 0; max-width: 400px; min-height: 77px; min-width: 220px; position: relative; width: 100%; + + input { + margin: 0; + } } &__input { @@ -152,6 +157,11 @@ &:checked { &:not(:disabled, [readonly]) { + + .rich-radio-button { + background-color: tokens.$coral-color-accent-background-selected; + border: tokens.$coral-border-m-solid tokens.$coral-color-accent-border; + } + &:hover { + .rich-radio-button { border-color: tokens.$coral-color-accent-border-hover; @@ -164,9 +174,10 @@ } } - + .rich-radio-button { - background-color: tokens.$coral-color-accent-background-selected; - border: tokens.$coral-border-m-solid tokens.$coral-color-accent-border; + &:focus { + + .rich-radio-button { + outline-offset: -2px; + } } } From dc4df924edf6eabae913e68aa2111bef014427b0 Mon Sep 17 00:00:00 2001 From: Talend bot Date: Mon, 10 Jul 2023 17:25:02 +0200 Subject: [PATCH 02/13] chore: prepare release (#4792) Co-authored-by: github-actions[bot] --- .changeset/young-carrots-turn.md | 5 ----- packages/design-system/CHANGELOG.md | 6 ++++++ packages/design-system/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/young-carrots-turn.md diff --git a/.changeset/young-carrots-turn.md b/.changeset/young-carrots-turn.md deleted file mode 100644 index a3e82c04c2e..00000000000 --- a/.changeset/young-carrots-turn.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@talend/design-system': patch ---- - -chore: update rich radio button diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md index 21581ad1c86..72a503cefcd 100644 --- a/packages/design-system/CHANGELOG.md +++ b/packages/design-system/CHANGELOG.md @@ -1,5 +1,11 @@ # @talend/design-system +## 7.12.2 + +### Patch Changes + +- 1c53807b7: chore: update rich radio button + ## 7.12.1 ### Patch Changes diff --git a/packages/design-system/package.json b/packages/design-system/package.json index b5c193c1499..e526902c1df 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -1,6 +1,6 @@ { "name": "@talend/design-system", - "version": "7.12.1", + "version": "7.12.2", "description": "Talend Design System", "main": "lib/index.js", "types": "lib/index.d.ts", From 4292de3ea61ec303ae30601c02e283f4b04f69c6 Mon Sep 17 00:00:00 2001 From: dlcaldeira <124570762+dlcaldeira@users.noreply.github.com> Date: Wed, 12 Jul 2023 14:42:07 +0100 Subject: [PATCH 03/13] feat(TDC-7254/Stepper): Add a new props `currentStepIndex` to control current step. Set to zero by default This fixes an issue as the previous code is based on react ref which is not updated when dom is changed. As we don't want to observe mutation on the DOM, let's go back to classic react patterns, make it pure, and ask for a state --- .changeset/pink-llamas-cheer.md | 7 ++ .../Progress.horizontal.module.scss | 8 +-- .../variations/Progress.vertical.module.scss | 8 +-- .../Stepper/Step/Primitive/Step.module.scss | 2 +- .../src/components/Stepper/Stepper.cy.tsx | 71 +++++++++++++++++++ .../src/components/Stepper/Stepper.tsx | 37 ++++------ .../design-system/Stepper/Stepper.stories.mdx | 11 ++- 7 files changed, 103 insertions(+), 41 deletions(-) create mode 100644 .changeset/pink-llamas-cheer.md create mode 100644 packages/design-system/src/components/Stepper/Stepper.cy.tsx diff --git a/.changeset/pink-llamas-cheer.md b/.changeset/pink-llamas-cheer.md new file mode 100644 index 00000000000..65a9aa0e477 --- /dev/null +++ b/.changeset/pink-llamas-cheer.md @@ -0,0 +1,7 @@ +--- +'@talend/design-system': minor +--- + +feat(TDC-7254/Stepper): Add a new props `currentStepIndex` to control current step. Set to zero by default. + +This fix an issue as the previous code is based on react ref which is not updated when dom is changed. As we don't want to observe mutation on the DOM, let's go back on classic react patterns, make it pure and ask for a state diff --git a/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.scss b/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.scss index 9ed053fb1b8..434208a7005 100644 --- a/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.scss +++ b/packages/design-system/src/components/Stepper/Progress/variations/Progress.horizontal.module.scss @@ -1,11 +1,5 @@ @use '~@talend/design-tokens/lib/tokens'; -@keyframes progress { - 0% { - width: 0; - } -} - .horizontal { top: calc(#{tokens.$coral-sizing-xxxs} / 2 - 0.05rem); right: 10rem; @@ -18,6 +12,6 @@ div { top: 0; height: 0.2rem; - animation: progress 1s ease-in-out; + transition: width tokens.$coral-transition-slow; } } diff --git a/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.scss b/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.scss index a2aaa311aad..e9db081407a 100644 --- a/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.scss +++ b/packages/design-system/src/components/Stepper/Progress/variations/Progress.vertical.module.scss @@ -1,11 +1,5 @@ @use '~@talend/design-tokens/lib/tokens'; -@keyframes progress { - 0% { - height: 0; - } -} - .vertical { top: tokens.$coral-sizing-xxs; right: calc(#{tokens.$coral-sizing-xxxs} / 2 - 0.05rem); @@ -15,6 +9,6 @@ div { width: 0.2rem; - animation: progress 1s ease-in-out; + transition: height tokens.$coral-transition-slow; } } diff --git a/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.scss b/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.scss index 39b84b8f9d3..39b2142f6e3 100644 --- a/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.scss +++ b/packages/design-system/src/components/Stepper/Step/Primitive/Step.module.scss @@ -71,7 +71,7 @@ box-shadow: 0 0 0 0.3rem tokens.$coral-color-accent-background; z-index: 1; transform: scale(1); - animation: pulse 2s infinite; + animation: pulse 2s 0.2s infinite; } } diff --git a/packages/design-system/src/components/Stepper/Stepper.cy.tsx b/packages/design-system/src/components/Stepper/Stepper.cy.tsx new file mode 100644 index 00000000000..a9bb698aaa6 --- /dev/null +++ b/packages/design-system/src/components/Stepper/Stepper.cy.tsx @@ -0,0 +1,71 @@ +/* eslint-disable testing-library/prefer-screen-queries */ +/* eslint-disable testing-library/await-async-query */ +import Stepper from '.'; + +context('', () => { + it('should render first step as current step', () => { + cy.mount( + + + + + , + ); + cy.get('ol li').first().should('have.attr', 'aria-current', 'step'); + }); + + it('should have last step as current step', () => { + cy.mount( + + + + + , + ); + cy.get('ol li').last().should('have.attr', 'aria-current', 'step'); + }); + + it('should render progressbar with no height', () => { + cy.mount( + + + + + , + ); + cy.get("[role='progressbar'] div").should('have.attr', 'style', 'height: 0%;'); + }); + + it('should render progressbar with 100% height', () => { + cy.mount( + + + + + , + ); + cy.get("[role='progressbar'] div").should('have.attr', 'style', 'height: 100%;'); + }); + + it('should render progressbar with no height if the currentStepIndex is outside of the range of steps', () => { + cy.mount( + + + + + , + ); + cy.get("[role='progressbar'] div").should('have.attr', 'style', 'height: 0%;'); + }); + + it('should render progressbar with no height if the currentStepIndex is outside of the range of steps', () => { + cy.mount( + + + + + , + ); + cy.get("[role='progressbar'] div").should('have.attr', 'style', 'height: 0%;'); + }); +}); diff --git a/packages/design-system/src/components/Stepper/Stepper.tsx b/packages/design-system/src/components/Stepper/Stepper.tsx index 909c2368353..e89a0e02531 100644 --- a/packages/design-system/src/components/Stepper/Stepper.tsx +++ b/packages/design-system/src/components/Stepper/Stepper.tsx @@ -1,24 +1,16 @@ -import { - Children, - cloneElement, - forwardRef, - ReactElement, - Ref, - useEffect, - useRef, - useState, -} from 'react'; import classnames from 'classnames'; +import { Children, cloneElement, forwardRef, ReactElement, Ref, useMemo } from 'react'; import { isElement } from 'react-is'; -import ProgressVertical from './Progress/variations/Progress.vertical'; import ProgressHorizontal from './Progress/variations/Progress.horizontal'; +import ProgressVertical from './Progress/variations/Progress.vertical'; import styles from './Stepper.module.scss'; export type StepperOrientation = 'horizontal' | 'vertical'; export type StepperProps = { + currentStepIndex?: number; orientation?: StepperOrientation; children: ReactElement | ReactElement[]; loading?: boolean; @@ -26,21 +18,17 @@ export type StepperProps = { const Stepper = forwardRef( ( - { children, orientation = 'vertical', loading, ...rest }: StepperProps, + { currentStepIndex = 0, children, orientation = 'vertical', loading, ...rest }: StepperProps, ref: Ref, ) => { - const listRef = useRef(null); - const [progressIndex, setProgressIndex] = useState(0); - - useEffect(() => { - // Find the last active step in the list and store its index - const listEntries = listRef.current ? Array.from(listRef.current.children) : []; - const indexOfProgress = listEntries.map(entry => entry.ariaCurrent).lastIndexOf('step'); - setProgressIndex(indexOfProgress); - }, []); - - const value = progressIndex + 1; const max = Children.count(children); + const value = useMemo(() => { + if (typeof currentStepIndex !== 'number' || currentStepIndex < 0 || currentStepIndex > max) { + return 0; + } + + return currentStepIndex + 1; + }, [currentStepIndex, max]); return (
{orientation === 'vertical' && } {orientation === 'horizontal' && } -
    + +
      {children && Children.map( children, diff --git a/packages/storybook/src/design-system/Stepper/Stepper.stories.mdx b/packages/storybook/src/design-system/Stepper/Stepper.stories.mdx index 20df886b687..cf3367d97c8 100644 --- a/packages/storybook/src/design-system/Stepper/Stepper.stories.mdx +++ b/packages/storybook/src/design-system/Stepper/Stepper.stories.mdx @@ -146,6 +146,7 @@ In case of an error in the current step, please inform the user by using an inli name="usage" args={{ variant: 'Vertical', + currentStepIndex: 1, }} argTypes={{ variant: { @@ -155,13 +156,19 @@ In case of an error in the current step, please inform the user by using an inli options: ['Vertical', 'Horizontal'], }, }, + currentStepIndex: { + description: 'Current step index', + control: { + type: 'number', + }, + }, }} > - {({ variant, index, title }) => { + {({ currentStepIndex, variant, index, title }) => { const StepperComponent = Stepper[variant]; StepperComponent.displayName = `Stepper.${variant}`; return ( - + From 6cc95498331b71e56210294b89543d8c3389c0df Mon Sep 17 00:00:00 2001 From: Jean-Michel FRANCOIS Date: Mon, 17 Jul 2023 09:24:04 +0200 Subject: [PATCH 04/13] feat(TDOPS-4779): add qlik icon (#4801) --- .changeset/gentle-melons-ring.md | 5 +++++ packages/icons/src/svg/products/qlik-colored.svg | 15 +++++++++++++++ 2 files changed, 20 insertions(+) create mode 100644 .changeset/gentle-melons-ring.md create mode 100644 packages/icons/src/svg/products/qlik-colored.svg diff --git a/.changeset/gentle-melons-ring.md b/.changeset/gentle-melons-ring.md new file mode 100644 index 00000000000..049add037b3 --- /dev/null +++ b/.changeset/gentle-melons-ring.md @@ -0,0 +1,5 @@ +--- +'@talend/icons': minor +--- + +feat: add qlik icon diff --git a/packages/icons/src/svg/products/qlik-colored.svg b/packages/icons/src/svg/products/qlik-colored.svg new file mode 100644 index 00000000000..97b51b5c43a --- /dev/null +++ b/packages/icons/src/svg/products/qlik-colored.svg @@ -0,0 +1,15 @@ + + + + + + \ No newline at end of file From 10d6dd07fe5eaee68b21bd5fbdb59db73f089dbc Mon Sep 17 00:00:00 2001 From: Talend bot Date: Mon, 17 Jul 2023 09:59:55 +0200 Subject: [PATCH 05/13] chore: prepare release (#4798) Co-authored-by: github-actions[bot] --- .changeset/gentle-melons-ring.md | 5 ----- .changeset/pink-llamas-cheer.md | 7 ------- packages/design-system/CHANGELOG.md | 8 ++++++++ packages/design-system/package.json | 4 ++-- packages/icons/CHANGELOG.md | 6 ++++++ packages/icons/package.json | 2 +- 6 files changed, 17 insertions(+), 15 deletions(-) delete mode 100644 .changeset/gentle-melons-ring.md delete mode 100644 .changeset/pink-llamas-cheer.md diff --git a/.changeset/gentle-melons-ring.md b/.changeset/gentle-melons-ring.md deleted file mode 100644 index 049add037b3..00000000000 --- a/.changeset/gentle-melons-ring.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@talend/icons': minor ---- - -feat: add qlik icon diff --git a/.changeset/pink-llamas-cheer.md b/.changeset/pink-llamas-cheer.md deleted file mode 100644 index 65a9aa0e477..00000000000 --- a/.changeset/pink-llamas-cheer.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@talend/design-system': minor ---- - -feat(TDC-7254/Stepper): Add a new props `currentStepIndex` to control current step. Set to zero by default. - -This fix an issue as the previous code is based on react ref which is not updated when dom is changed. As we don't want to observe mutation on the DOM, let's go back on classic react patterns, make it pure and ask for a state diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md index 72a503cefcd..be9c71baaed 100644 --- a/packages/design-system/CHANGELOG.md +++ b/packages/design-system/CHANGELOG.md @@ -1,5 +1,13 @@ # @talend/design-system +## 7.13.0 + +### Minor Changes + +- 4292de3ea: feat(TDC-7254/Stepper): Add a new props `currentStepIndex` to control current step. Set to zero by default. + + This fix an issue as the previous code is based on react ref which is not updated when dom is changed. As we don't want to observe mutation on the DOM, let's go back on classic react patterns, make it pure and ask for a state + ## 7.12.2 ### Patch Changes diff --git a/packages/design-system/package.json b/packages/design-system/package.json index e526902c1df..7c170efdcc8 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -1,6 +1,6 @@ { "name": "@talend/design-system", - "version": "7.12.2", + "version": "7.13.0", "description": "Talend Design System", "main": "lib/index.js", "types": "lib/index.d.ts", @@ -60,7 +60,7 @@ "@storybook/theming": "^6.5.16", "@svgr/webpack": "^5.5.0", "@talend/bootstrap-theme": "^7.0.1", - "@talend/icons": "^6.58.1", + "@talend/icons": "^6.59.0", "@talend/locales-design-system": "^7.3.0", "@talend/scripts-core": "^13.3.0", "@talend/scripts-config-react-webpack": "^15.4.0", diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index eebe02c341e..96dc081a7cf 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,11 @@ # @talend/icons +## 6.59.0 + +### Minor Changes + +- 6cc954983: feat: add qlik icon + ## 6.58.1 ### Patch Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index dc3354da1ac..6f00ff67170 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -63,5 +63,5 @@ "publishConfig": { "access": "public" }, - "version": "6.58.1" + "version": "6.59.0" } From cd79a04a86363acc1617e6a5db5ecab0225166b7 Mon Sep 17 00:00:00 2001 From: Gbacc Date: Tue, 18 Jul 2023 10:52:12 +0200 Subject: [PATCH 06/13] feat(TDOPS-4682): Design System to allow maxlength on InlineEdit field (#4803) --- .changeset/fast-hornets-run.md | 5 +++ .../Primitives/InlineEditingPrimitive.tsx | 3 ++ .../variations/InlineEditing.textarea.cy.tsx | 41 +++++++++++++++++++ 3 files changed, 49 insertions(+) create mode 100644 .changeset/fast-hornets-run.md create mode 100644 packages/design-system/src/components/InlineEditing/variations/InlineEditing.textarea.cy.tsx diff --git a/.changeset/fast-hornets-run.md b/.changeset/fast-hornets-run.md new file mode 100644 index 00000000000..8a8f88d8943 --- /dev/null +++ b/.changeset/fast-hornets-run.md @@ -0,0 +1,5 @@ +--- +'@talend/design-system': minor +--- + +Design System - InlineEdit and InlineEditMulti can now have a maxLength attribute diff --git a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx index fd0bb640a14..72af8a0e640 100644 --- a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx +++ b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx @@ -43,6 +43,7 @@ export type InlineEditingPrimitiveProps = { onToggle?: (isEditionMode: boolean) => void; label: string; required?: boolean; + maxLength?: number; placeholder: string; ariaLabel?: string; renderValueAs?: ElementType | ReactElement; @@ -85,6 +86,7 @@ const InlineEditingPrimitive = forwardRef( onCancel = () => {}, onToggle = () => {}, required = false, + maxLength, label, hasError, description, @@ -176,6 +178,7 @@ const InlineEditingPrimitive = forwardRef( label, name: label.replace(/\s/g, ''), required, + maxLength, placeholder, onChange: (event: ChangeEvent | ChangeEvent): void => { if (onChangeValue) { diff --git a/packages/design-system/src/components/InlineEditing/variations/InlineEditing.textarea.cy.tsx b/packages/design-system/src/components/InlineEditing/variations/InlineEditing.textarea.cy.tsx new file mode 100644 index 00000000000..21f0dacdbf2 --- /dev/null +++ b/packages/design-system/src/components/InlineEditing/variations/InlineEditing.textarea.cy.tsx @@ -0,0 +1,41 @@ +import InlineEditingMulti from './InlineEditing.textarea'; + +context('', () => { + const defaultProps = { + label: 'Textarea inline edit', + placeholder: 'Type here', + }; + + it('should render with filled value', () => { + cy.mount(); + + cy.get('[data-testid="inlineediting.button.edit"]').should('exist'); + cy.get('p').should('have.text', 'Some text'); + }); + + it('should allow inline editing', () => { + cy.mount(); + + // Switch to edit mode + cy.get('[data-testid="inlineediting.button.edit"]').click(); + cy.get('[data-testid="inlineediting.textarea"]').should('be.visible'); + cy.get('[data-testid="inlineediting.button.cancel"]').should('be.visible'); + cy.get('[data-testid="inlineediting.button.submit"]').should('be.visible'); + + // Input some text and submit + cy.get('[data-testid="inlineediting.textarea"]').type('Here is a description'); + cy.get('[data-testid="inlineediting.button.submit"]').click(); + + cy.get('p').should('have.text', 'Here is a description'); + }); + + it('should allow to have some constraints', () => { + cy.mount(); + + cy.get('[data-testid="inlineediting.button.edit"]').click(); + cy.get('[data-testid="inlineediting.textarea"]').should('have.attr', 'required'); + cy.get('[data-testid="inlineediting.textarea"]') + .invoke('attr', 'maxLength') + .should('equal', '10'); + }); +}); From 0789cda914bb2008b740a0d2dfed559b9a2e70ff Mon Sep 17 00:00:00 2001 From: Gbacc Date: Tue, 18 Jul 2023 11:43:44 +0200 Subject: [PATCH 07/13] fix(TDOPS-4682): Fix design system form file to integrate on TMC (#4800) * fix(TDOPS-4682): Fix design system form file to integrate on TMC * added tests --- .changeset/lovely-apricots-behave.md | 5 +++ .../Form/Field/Input/Input.File.cy.tsx | 36 +++++++++++++++++++ .../Form/Field/Input/Input.File.tsx | 9 +++-- 3 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 .changeset/lovely-apricots-behave.md create mode 100644 packages/design-system/src/components/Form/Field/Input/Input.File.cy.tsx diff --git a/.changeset/lovely-apricots-behave.md b/.changeset/lovely-apricots-behave.md new file mode 100644 index 00000000000..2ed360f4498 --- /dev/null +++ b/.changeset/lovely-apricots-behave.md @@ -0,0 +1,5 @@ +--- +'@talend/design-system': patch +--- + +Design system - Form file will now update on files prop change and will trigger onChange when file is cleared diff --git a/packages/design-system/src/components/Form/Field/Input/Input.File.cy.tsx b/packages/design-system/src/components/Form/Field/Input/Input.File.cy.tsx new file mode 100644 index 00000000000..6fc136ec4c3 --- /dev/null +++ b/packages/design-system/src/components/Form/Field/Input/Input.File.cy.tsx @@ -0,0 +1,36 @@ +import InputFile from './Input.File'; + +context('', () => { + const defaultProps = { + label: 'Select file here', + name: 'file', + }; + it('should render', () => { + cy.mount(); + + cy.get('label').should('have.text', defaultProps.label); + cy.get('ol[role="list"]').should('not.exist'); + cy.get('button').should('not.exist'); + }); + + it('should render with filled value', () => { + cy.mount(); + + cy.get('ol[role="list"]').should('have.text', 'file.js'); + cy.get('button').should('exist'); + }); + + it('should trigger dom events', () => { + cy.document().then(doc => { + doc.addEventListener('change', cy.stub().as('onChange')); + }); + + cy.mount(); + + cy.get('input').selectFile(Cypress.Buffer.from('Hello world')); + cy.get('@onChange').should('have.been.calledOnce'); + + cy.get('button').click({ force: true }); + cy.get('@onChange').should('have.been.calledTwice'); + }); +}); diff --git a/packages/design-system/src/components/Form/Field/Input/Input.File.tsx b/packages/design-system/src/components/Form/Field/Input/Input.File.tsx index 36aa2d0660c..596ffd0c21b 100644 --- a/packages/design-system/src/components/Form/Field/Input/Input.File.tsx +++ b/packages/design-system/src/components/Form/Field/Input/Input.File.tsx @@ -29,18 +29,22 @@ function getFileSize(size: number, t: TFunction) { type InputType = Omit; type FileProps = InputType & { - files?: string[] | FileList; + files?: string[] | FileList | null; }; const InputFile = forwardRef((props: FileProps, ref: Ref) => { const [drag, setDrag] = useState(false); - const [files, setFiles] = useState(props.files || null); + const [files, setFiles] = useState(); const inputRef = useRef(null); const { t } = useTranslation(I18N_DOMAIN_DESIGN_SYSTEM); const { hasError, ...rest } = props; + useEffect(() => { + setFiles(props.files); + }, [props.files]); + function handleChange() { const input = inputRef.current; if (input) { @@ -52,6 +56,7 @@ const InputFile = forwardRef((props: FileProps, ref: Ref) => { const input = inputRef.current; if (input) { input.value = ''; + input.dispatchEvent(new Event('change', { bubbles: true })); } setFiles(() => null); } From a17306fc95aff313ce16ebd3d4649d1fbeebf0bb Mon Sep 17 00:00:00 2001 From: Inna Ivashchuk Date: Tue, 18 Jul 2023 14:42:49 +0300 Subject: [PATCH 08/13] fix(TDOPS-4795): faceted search wrong plural label (#4804) * fix(TDOPS-4795): faceted search wrong plural label * chore: update faceted-search version * fix: use patch version --- .changeset/smart-dodos-battle.md | 5 +++++ .../Badges/BadgeCheckboxes/BadgeCheckboxes.component.js | 3 +-- .../src/components/Badges/BadgeTags/BadgeTags.component.js | 3 +-- 3 files changed, 7 insertions(+), 4 deletions(-) create mode 100644 .changeset/smart-dodos-battle.md diff --git a/.changeset/smart-dodos-battle.md b/.changeset/smart-dodos-battle.md new file mode 100644 index 00000000000..9c15c6e47ab --- /dev/null +++ b/.changeset/smart-dodos-battle.md @@ -0,0 +1,5 @@ +--- +'@talend/react-faceted-search': patch +--- + +TDOPS-4795 - [TUI] Faceted search display wrong plural label diff --git a/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.component.js b/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.component.js index caab3750496..bee22be6dfd 100644 --- a/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.component.js +++ b/packages/faceted-search/src/components/Badges/BadgeCheckboxes/BadgeCheckboxes.component.js @@ -12,8 +12,7 @@ const getSelectBadgeLabel = (value, t) => { if (checkedCheckboxes.length > 3) { return t('FACETED_SEARCH_VALUES_COUNT', { count: checkedCheckboxes.length, - defaultValue: '{{count}} value', - defaultValue_plural: '{{count}} values', + defaultValue: '{{count}} values', }); } else if (!checkedCheckboxes.length) { return labelAll; diff --git a/packages/faceted-search/src/components/Badges/BadgeTags/BadgeTags.component.js b/packages/faceted-search/src/components/Badges/BadgeTags/BadgeTags.component.js index 5a28d4bd7e0..deef59700e4 100644 --- a/packages/faceted-search/src/components/Badges/BadgeTags/BadgeTags.component.js +++ b/packages/faceted-search/src/components/Badges/BadgeTags/BadgeTags.component.js @@ -17,8 +17,7 @@ const getSelectBadgeLabel = (value, t) => { if (checkedCheckboxes.length > 3) { return t('FACETED_SEARCH_VALUES_COUNT', { count: checkedCheckboxes.length, - defaultValue: '{{count}} value', - defaultValue_plural: '{{count}} values', + defaultValue: '{{count}} values', }); } else if (!checkedCheckboxes.length) { return labelAll; From 4bedbc0a948a2c734ee07224a8d5b225e5c637c6 Mon Sep 17 00:00:00 2001 From: Talend bot Date: Tue, 18 Jul 2023 14:19:50 +0200 Subject: [PATCH 09/13] chore: prepare release (#4805) Co-authored-by: github-actions[bot] --- .changeset/fast-hornets-run.md | 5 ----- .changeset/lovely-apricots-behave.md | 5 ----- .changeset/smart-dodos-battle.md | 5 ----- packages/design-system/CHANGELOG.md | 10 ++++++++++ packages/design-system/package.json | 2 +- packages/faceted-search/CHANGELOG.md | 6 ++++++ packages/faceted-search/package.json | 4 ++-- 7 files changed, 19 insertions(+), 18 deletions(-) delete mode 100644 .changeset/fast-hornets-run.md delete mode 100644 .changeset/lovely-apricots-behave.md delete mode 100644 .changeset/smart-dodos-battle.md diff --git a/.changeset/fast-hornets-run.md b/.changeset/fast-hornets-run.md deleted file mode 100644 index 8a8f88d8943..00000000000 --- a/.changeset/fast-hornets-run.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@talend/design-system': minor ---- - -Design System - InlineEdit and InlineEditMulti can now have a maxLength attribute diff --git a/.changeset/lovely-apricots-behave.md b/.changeset/lovely-apricots-behave.md deleted file mode 100644 index 2ed360f4498..00000000000 --- a/.changeset/lovely-apricots-behave.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@talend/design-system': patch ---- - -Design system - Form file will now update on files prop change and will trigger onChange when file is cleared diff --git a/.changeset/smart-dodos-battle.md b/.changeset/smart-dodos-battle.md deleted file mode 100644 index 9c15c6e47ab..00000000000 --- a/.changeset/smart-dodos-battle.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@talend/react-faceted-search': patch ---- - -TDOPS-4795 - [TUI] Faceted search display wrong plural label diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md index be9c71baaed..20d58b7e1d2 100644 --- a/packages/design-system/CHANGELOG.md +++ b/packages/design-system/CHANGELOG.md @@ -1,5 +1,15 @@ # @talend/design-system +## 7.14.0 + +### Minor Changes + +- cd79a04a8: Design System - InlineEdit and InlineEditMulti can now have a maxLength attribute + +### Patch Changes + +- 0789cda91: Design system - Form file will now update on files prop change and will trigger onChange when file is cleared + ## 7.13.0 ### Minor Changes diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 7c170efdcc8..439f945b729 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -1,6 +1,6 @@ { "name": "@talend/design-system", - "version": "7.13.0", + "version": "7.14.0", "description": "Talend Design System", "main": "lib/index.js", "types": "lib/index.d.ts", diff --git a/packages/faceted-search/CHANGELOG.md b/packages/faceted-search/CHANGELOG.md index 9bc84e9035e..5814939a545 100644 --- a/packages/faceted-search/CHANGELOG.md +++ b/packages/faceted-search/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 10.0.1 + +### Patch Changes + +- a17306fc9: TDOPS-4795 - [TUI] Faceted search display wrong plural label + ## 10.0.0 ### Major Changes diff --git a/packages/faceted-search/package.json b/packages/faceted-search/package.json index 0df6fb943a5..44d2c916b00 100644 --- a/packages/faceted-search/package.json +++ b/packages/faceted-search/package.json @@ -1,6 +1,6 @@ { "name": "@talend/react-faceted-search", - "version": "10.0.0", + "version": "10.0.1", "description": "Faceted search", "main": "lib/index.js", "mainSrc": "src/index.js", @@ -46,7 +46,7 @@ "@storybook/addon-actions": "^6.5.16", "@storybook/testing-library": "^0.0.13", "@talend/bootstrap-theme": "^7.0.1", - "@talend/design-system": "^7.10.0", + "@talend/design-system": "^7.14.0", "@talend/icons": "^6.58.1", "@talend/locales-tui-components": "^9.5.0", "@talend/locales-tui-faceted-search": "^8.1.0", From d6e53abd98ed1bdf35153dbf37484ebecf3bb260 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 19 Jul 2023 09:12:13 +0200 Subject: [PATCH 10/13] chore(deps): bump word-wrap from 1.2.3 to 1.2.4 (#4806) Bumps [word-wrap](https://github.com/jonschlinkert/word-wrap) from 1.2.3 to 1.2.4. - [Release notes](https://github.com/jonschlinkert/word-wrap/releases) - [Commits](https://github.com/jonschlinkert/word-wrap/compare/1.2.3...1.2.4) --- updated-dependencies: - dependency-name: word-wrap dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index d0bedd99d9d..e7f326f15b5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -19449,9 +19449,9 @@ wildcard@^2.0.0: integrity sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ== word-wrap@^1.2.3, word-wrap@~1.2.3: - version "1.2.3" - resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c" - integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ== + version "1.2.4" + resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.4.tgz#cb4b50ec9aca570abd1f52f33cd45b6c61739a9f" + integrity sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA== wordwrap@^1.0.0: version "1.0.0" From 84fc7a5a56820852996ec64e4f336b69925e0379 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 19 Jul 2023 09:22:39 +0200 Subject: [PATCH 11/13] chore(deps): bump tj-actions/changed-files from 37.0.5 to 37.1.2 (#4802) Bumps [tj-actions/changed-files](https://github.com/tj-actions/changed-files) from 37.0.5 to 37.1.2. - [Release notes](https://github.com/tj-actions/changed-files/releases) - [Changelog](https://github.com/tj-actions/changed-files/blob/main/HISTORY.md) - [Commits](https://github.com/tj-actions/changed-files/compare/54849deb963ca9f24185fb5de2965e002d066e6b...2a968ff601949c81b47d9c1fdb789b0d25ddeea2) --- updated-dependencies: - dependency-name: tj-actions/changed-files dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- .github/workflows/pr-lint.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/pr-lint.yml b/.github/workflows/pr-lint.yml index dcef46268d2..21816288510 100644 --- a/.github/workflows/pr-lint.yml +++ b/.github/workflows/pr-lint.yml @@ -46,7 +46,7 @@ jobs: - name: Get changed files id: changed-files - uses: tj-actions/changed-files@54849deb963ca9f24185fb5de2965e002d066e6b #v37.0.5 + uses: tj-actions/changed-files@2a968ff601949c81b47d9c1fdb789b0d25ddeea2 #v37.1.2 - name: Merge lint run: node merge-report.js ${{ steps.changed-files.outputs.all_changed_files }} From fab2624bc603cc2e85a1309cae1d2fa07c4a62c7 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 19 Jul 2023 09:23:25 +0200 Subject: [PATCH 12/13] chore(deps): bump actions/setup-node from 3.6.0 to 3.7.0 (#4793) Bumps [actions/setup-node](https://github.com/actions/setup-node) from 3.6.0 to 3.7.0. - [Release notes](https://github.com/actions/setup-node/releases) - [Commits](https://github.com/actions/setup-node/compare/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c...e33196f7422957bea03ed53f6fbb155025ffc7b8) --- updated-dependencies: - dependency-name: actions/setup-node dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- .github/workflows/changeset.yml | 2 +- .github/workflows/dependencies.yml | 2 +- .github/workflows/design-system-component-testing.yml | 2 +- .github/workflows/icons.yml | 2 +- .github/workflows/pr-demo.yml | 2 +- .github/workflows/pr-lint.yml | 2 +- .github/workflows/pr-playground.yml | 2 +- .github/workflows/pr-test.yml | 2 +- .github/workflows/surge-cleanup.yml | 2 +- .github/workflows/tests-cron.yml | 2 +- .github/workflows/visual-testing.yml | 2 +- .github/workflows/yarn-deduplicate.yml | 2 +- 12 files changed, 12 insertions(+), 12 deletions(-) diff --git a/.github/workflows/changeset.yml b/.github/workflows/changeset.yml index e5fb0253c26..0fd1665269b 100644 --- a/.github/workflows/changeset.yml +++ b/.github/workflows/changeset.yml @@ -30,7 +30,7 @@ jobs: persist-credentials: false - name: Setup Node.js - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 18 registry-url: "https://registry.npmjs.org/" diff --git a/.github/workflows/dependencies.yml b/.github/workflows/dependencies.yml index 63ee72fbf44..4a1d6da1d30 100644 --- a/.github/workflows/dependencies.yml +++ b/.github/workflows/dependencies.yml @@ -22,7 +22,7 @@ jobs: uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v3.5.3 - name: Use Node.js - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 18 registry-url: "https://registry.npmjs.org/" diff --git a/.github/workflows/design-system-component-testing.yml b/.github/workflows/design-system-component-testing.yml index 9c9a873546b..e89ded5f597 100644 --- a/.github/workflows/design-system-component-testing.yml +++ b/.github/workflows/design-system-component-testing.yml @@ -24,7 +24,7 @@ jobs: - name: Checkout repository uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v3.5.3 - - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 18 registry-url: "https://registry.npmjs.org/" diff --git a/.github/workflows/icons.yml b/.github/workflows/icons.yml index 973531c99ea..e20952a7dd5 100644 --- a/.github/workflows/icons.yml +++ b/.github/workflows/icons.yml @@ -25,7 +25,7 @@ jobs: persist-credentials: false - name: Use Node.js - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 18 check-latest: true diff --git a/.github/workflows/pr-demo.yml b/.github/workflows/pr-demo.yml index de001b21718..acedaf9ae15 100644 --- a/.github/workflows/pr-demo.yml +++ b/.github/workflows/pr-demo.yml @@ -28,7 +28,7 @@ jobs: uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v3.5.3 - name: Use Node.js - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 18 registry-url: "https://registry.npmjs.org/" diff --git a/.github/workflows/pr-lint.yml b/.github/workflows/pr-lint.yml index 21816288510..8a25ad47a33 100644 --- a/.github/workflows/pr-lint.yml +++ b/.github/workflows/pr-lint.yml @@ -28,7 +28,7 @@ jobs: fetch-depth: 0 # otherwise, you will failed to push refs to dest repo - name: Use Node.js - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 18 check-latest: true diff --git a/.github/workflows/pr-playground.yml b/.github/workflows/pr-playground.yml index 659b70dd2bd..123f60a6542 100644 --- a/.github/workflows/pr-playground.yml +++ b/.github/workflows/pr-playground.yml @@ -27,7 +27,7 @@ jobs: uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v3.5.3 - name: Use Node.js - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 18 registry-url: "https://registry.npmjs.org/" diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml index 96d588673db..1f88e184c02 100644 --- a/.github/workflows/pr-test.yml +++ b/.github/workflows/pr-test.yml @@ -24,7 +24,7 @@ jobs: uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v3.5.3 - name: Use Node.js - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 18 check-latest: true diff --git a/.github/workflows/surge-cleanup.yml b/.github/workflows/surge-cleanup.yml index 7613395a5c1..c45b02de358 100644 --- a/.github/workflows/surge-cleanup.yml +++ b/.github/workflows/surge-cleanup.yml @@ -14,7 +14,7 @@ jobs: steps: - name: Use Node.js - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 18 diff --git a/.github/workflows/tests-cron.yml b/.github/workflows/tests-cron.yml index acd9baaac5c..82f5e69832a 100644 --- a/.github/workflows/tests-cron.yml +++ b/.github/workflows/tests-cron.yml @@ -20,7 +20,7 @@ jobs: uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v3.5.3 - name: Use Node.js - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 18 registry-url: "https://registry.npmjs.org/" diff --git a/.github/workflows/visual-testing.yml b/.github/workflows/visual-testing.yml index 1466ab1bef2..04036609ea2 100644 --- a/.github/workflows/visual-testing.yml +++ b/.github/workflows/visual-testing.yml @@ -32,7 +32,7 @@ jobs: with: fetch-depth: 0 - - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 18 cache: "yarn" diff --git a/.github/workflows/yarn-deduplicate.yml b/.github/workflows/yarn-deduplicate.yml index 15b38405910..4397e4a90dc 100644 --- a/.github/workflows/yarn-deduplicate.yml +++ b/.github/workflows/yarn-deduplicate.yml @@ -29,7 +29,7 @@ jobs: fetch-depth: 0 # otherwise, you will failed to push refs to dest repo - name: Use Node.js - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 18 registry-url: "https://registry.npmjs.org/" From f66e7c8d55454018042bbe01dc0b3087d648c47e Mon Sep 17 00:00:00 2001 From: jmfrancois Date: Wed, 19 Jul 2023 10:54:19 +0200 Subject: [PATCH 13/13] fix: theme --- packages/theme/src/theme/_buttons.scss | 96 +++++++++++++++++++++---- packages/theme/src/theme/_popovers.scss | 17 +++++ 2 files changed, 100 insertions(+), 13 deletions(-) diff --git a/packages/theme/src/theme/_buttons.scss b/packages/theme/src/theme/_buttons.scss index ea3cb3443c5..f686133792c 100644 --- a/packages/theme/src/theme/_buttons.scss +++ b/packages/theme/src/theme/_buttons.scss @@ -122,21 +122,23 @@ } } - &-inverse, - &--secondary, - &-tertiary, - &--tertiary, - &-link { + &-inverse { --t-button-color: tokens.$coral-color-accent-text; + --t-button-border-color: tokens.$coral-border-s-solid tokens.$coral-color-accent-border; + --t-button-background-color: transparent; + background-color: transparent; + color: tokens.$coral-color-accent-text; &:hover { + --t-button-background-color: var(--t-button-secondary-background--hover); --t-button-color: tokens.$coral-color-accent-text-strong-hover; color: tokens.$coral-color-accent-text-strong-hover; background: tokens.$coral-color-accent-background-weak-hover; } &:active { + --t-button-background-color: var(--t-button-secondary-background--hover); --t-button-color: tokens.$coral-color-accent-text-strong-active; color: tokens.$coral-color-accent-text-strong-active; background: tokens.$coral-color-accent-background-weak-active; @@ -147,31 +149,77 @@ &[aria-busy='true'] { background: transparent; color: tokens.$coral-color-neutral-text-disabled; + border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled; + + &:hover { + --t-button-background-color: transparent; + background-color: transparent; + } } } - &-inverse, - &--secondary, - &-tertiary, - &--tertiary { + &--secondary { --t-button-border-color: tokens.$coral-border-s-solid tokens.$coral-color-accent-border; + --t-button-color: tokens.$coral-color-accent-text; --t-button-background-color: transparent; background-color: transparent; - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border; - &:hover, + color: tokens.$coral-color-accent-text; + + &:hover { + --t-button-background-color: var(--t-button-secondary-background--hover); + --t-button-color: tokens.$coral-color-accent-text-strong-hover; + color: tokens.$coral-color-accent-text-strong-hover; + background: tokens.$coral-color-accent-background-weak-hover; + } + &:active { --t-button-background-color: var(--t-button-secondary-background--hover); - border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border-hover; + --t-button-color: tokens.$coral-color-accent-text-strong-active; + color: tokens.$coral-color-accent-text-strong-active; + background: tokens.$coral-color-accent-background-weak-active; } &:disabled, &[aria-disabled='true'], &[aria-busy='true'] { + background: transparent; + color: tokens.$coral-color-neutral-text-disabled; border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled; + + &:hover { + --t-button-background-color: transparent; + background-color: transparent; + } + } + } + + &-tertiary, + &--tertiary { + --t-button-color: tokens.$coral-color-accent-text; + --t-button-background-color: transparent; + background-color: transparent; + color: tokens.$coral-color-accent-text; + + &:hover { + --t-button-color: tokens.$coral-color-accent-text-strong-hover; + color: tokens.$coral-color-accent-text-strong-hover; + background: tokens.$coral-color-accent-background-weak-hover; + } + + &:active { + --t-button-color: tokens.$coral-color-accent-text-strong-active; + color: tokens.$coral-color-accent-text-strong-active; + background: tokens.$coral-color-accent-background-weak-active; } - &[disabled] { + &:disabled, + &[aria-disabled='true'], + &[aria-busy='true'] { + background: transparent; + border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled; + color: tokens.$coral-color-neutral-text-disabled; + &:hover { --t-button-background-color: transparent; background-color: transparent; @@ -179,6 +227,28 @@ } } + &-link { + --t-button-color: tokens.$coral-color-accent-text; + color: tokens.$coral-color-accent-text; + + &:hover { + --t-button-color: tokens.$coral-color-accent-text-strong-hover; + color: tokens.$coral-color-accent-text-strong-hover; + } + + &:active { + --t-button-color: tokens.$coral-color-accent-text-strong-active; + color: tokens.$coral-color-accent-text-strong-active; + } + + &:disabled, + &[aria-disabled='true'], + &[aria-busy='true'] { + color: tokens.$coral-color-neutral-text-disabled; + border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled; + } + } + &.btn-danger, &.btn--destructive { --t-button-background-color: var(--t-button-destructive-background); diff --git a/packages/theme/src/theme/_popovers.scss b/packages/theme/src/theme/_popovers.scss index 8c91fbba3c6..0662b773396 100644 --- a/packages/theme/src/theme/_popovers.scss +++ b/packages/theme/src/theme/_popovers.scss @@ -3,20 +3,37 @@ .popover { background-color: tokens.$coral-color-neutral-background; color: tokens.$coral-color-neutral-text; + border-color: tokens.$coral-color-neutral-border; +} + +.popover.left .arrow { + border-left-color: tokens.$coral-color-neutral-border; } .popover.left .arrow::after { border-left-color: tokens.$coral-color-neutral-background; } +.popover.top .arrow { + border-top-color: tokens.$coral-color-neutral-border; +} + .popover.top .arrow::after { border-top-color: tokens.$coral-color-neutral-background; } +.popover.right .arrow { + border-right-color: tokens.$coral-color-neutral-border; +} + .popover.right .arrow::after { border-right-color: tokens.$coral-color-neutral-background; } +.popover.bottom .arrow { + border-bottom-color: tokens.$coral-color-neutral-border; +} + .popover.bottom .arrow::after { border-bottom-color: tokens.$coral-color-neutral-background; }