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 dcef46268d2..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 @@ -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 }} 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/" diff --git a/packages/components/package.json b/packages/components/package.json index 57f352f5ed2..257370df58b 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -36,6 +36,7 @@ "dependencies": { "@popperjs/core": "^2.11.8", "@talend/bootstrap-theme": "^7.0.1", + "@talend/design-tokens": "^2.7.3", "@talend/react-a11y": "^1.1.0", "@talend/icons": "^6.58.1", "@talend/utils": "^2.5.1", diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md index 21581ad1c86..20d58b7e1d2 100644 --- a/packages/design-system/CHANGELOG.md +++ b/packages/design-system/CHANGELOG.md @@ -1,5 +1,29 @@ # @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 + +- 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 + +- 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..439f945b729 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.14.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/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); } 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'); + }); +}); 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; + } } } 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/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 3082f97c196..9a18baa0fc7 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", @@ -47,7 +47,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", 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; 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" } 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 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 ( - + diff --git a/packages/theme/package.json b/packages/theme/package.json index 1c13d77b5fa..e5fae13fdcd 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -5,7 +5,7 @@ "mainSrc": "src/index.js", "license": "Apache-2.0", "scripts": { - "build:lib": "webpack", + "build:lib": "rimraf ./dist && webpack", "start": "webpack serve --mode=development", "test": "echo no test for @talend/bootstrap-theme", "test:cov": "echo no test for @talend/bootstrap-theme", diff --git a/packages/theme/src/theme/_buttons.scss b/packages/theme/src/theme/_buttons.scss index d3f5b8dda5a..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,33 +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 { --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; + + 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; + } - &: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; + } + + &: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; + } } } - &-inverse, - &--secondary, &-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, &[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; - &[disabled] { &:hover { --t-button-background-color: transparent; background-color: transparent; @@ -181,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/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"