From 62bcde60842620d59528452f1bfe82e2e0757460 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Romain?= Date: Thu, 27 Jul 2023 11:25:01 +0200 Subject: [PATCH 1/3] fix(components): accent color in subheader actions (#4819) --- .changeset/large-carpets-film.md | 5 ++++ .../SubHeaderBar/SubHeaderBar.component.js | 23 +++++++++++-------- .../src/SubHeaderBar/SubHeaderBar.module.scss | 9 +++++--- .../src/SubHeaderBar/SubHeaderBar.test.js | 2 +- .../__snapshots__/SubHeaderBar.test.js.snap | 20 ++++++++-------- .../src/SubHeaderBar/SubHeaderBar.test.js | 5 ++-- .../__snapshots__/SubHeaderBar.test.js.snap | 20 ++++++++-------- 7 files changed, 49 insertions(+), 35 deletions(-) create mode 100644 .changeset/large-carpets-film.md diff --git a/.changeset/large-carpets-film.md b/.changeset/large-carpets-film.md new file mode 100644 index 00000000000..ee605fa4499 --- /dev/null +++ b/.changeset/large-carpets-film.md @@ -0,0 +1,5 @@ +--- +'@talend/react-components': patch +--- + +fix: setup the interactive stuff in accent color for the subheader bar diff --git a/packages/components/src/SubHeaderBar/SubHeaderBar.component.js b/packages/components/src/SubHeaderBar/SubHeaderBar.component.js index 7b6d4952576..8867d49b76e 100644 --- a/packages/components/src/SubHeaderBar/SubHeaderBar.component.js +++ b/packages/components/src/SubHeaderBar/SubHeaderBar.component.js @@ -2,6 +2,7 @@ import has from 'lodash/has'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { useTranslation } from 'react-i18next'; +import { ButtonIcon } from '@talend/design-system'; import I18N_DOMAIN_COMPONENTS from '../constants'; import getDefaultT from '../translate'; import { Action } from '../Actions'; @@ -111,16 +112,20 @@ function SubHeaderBar({ {injected('before-back')} {onGoBack && ( - + > + + {t('BACK_ARROW_TOOLTIP', { defaultValue: 'Go back' })} + + )} {injected('before-title')} diff --git a/packages/components/src/SubHeaderBar/SubHeaderBar.module.scss b/packages/components/src/SubHeaderBar/SubHeaderBar.module.scss index 3bd5e957233..907c01028f8 100644 --- a/packages/components/src/SubHeaderBar/SubHeaderBar.module.scss +++ b/packages/components/src/SubHeaderBar/SubHeaderBar.module.scss @@ -18,15 +18,15 @@ $tc-svg-icon-size: $padding-large !default; :global(.btn-link), :global(.btn-icon-only) { - color: $tc-subheader-color; + color: tokens.$coral-color-accent-icon; &:focus, &:hover { - color: tokens.$coral-color-accent-text-hover; + color: tokens.$coral-color-accent-icon-hover; } &:active { - color: tokens.$coral-color-accent-text-active; + color: tokens.$coral-color-accent-icon-active; } } @@ -79,6 +79,9 @@ $tc-svg-icon-size: $padding-large !default; background-color: tokens.$coral-color-neutral-background-strong !important; width: $tc-subheader-bar-height; height: $tc-subheader-bar-height; + display: flex; + align-items: center; + justify-content: center; &:focus, &:hover, diff --git a/packages/components/src/SubHeaderBar/SubHeaderBar.test.js b/packages/components/src/SubHeaderBar/SubHeaderBar.test.js index 3b03e8bd9c0..8cef5a144ee 100644 --- a/packages/components/src/SubHeaderBar/SubHeaderBar.test.js +++ b/packages/components/src/SubHeaderBar/SubHeaderBar.test.js @@ -200,7 +200,7 @@ describe('SubHeaderBar', () => { }; render(); expect(screen.getByText('myTitle')).toBeVisible(); - expect(screen.getByLabelText('Go back')).toBeVisible(); + expect(screen.getByTestId('tc-subheader-backArrow')).toBeVisible(); }); it('Should render SubHeader component if right actions are in loading state', () => { diff --git a/packages/components/src/SubHeaderBar/__snapshots__/SubHeaderBar.test.js.snap b/packages/components/src/SubHeaderBar/__snapshots__/SubHeaderBar.test.js.snap index fedea6d22a4..cc58823123f 100644 --- a/packages/components/src/SubHeaderBar/__snapshots__/SubHeaderBar.test.js.snap +++ b/packages/components/src/SubHeaderBar/__snapshots__/SubHeaderBar.test.js.snap @@ -13,18 +13,18 @@ exports[`SubHeaderBar should render 1`] = `
- + class="CoralButtonIcon" + data-testid="tc-subheader-backArrow" + icon="arrow-left" + id="backArrow" + > + Go back + +
diff --git a/packages/containers/src/SubHeaderBar/SubHeaderBar.test.js b/packages/containers/src/SubHeaderBar/SubHeaderBar.test.js index 7190bf41bdc..bf9d111fcc0 100644 --- a/packages/containers/src/SubHeaderBar/SubHeaderBar.test.js +++ b/packages/containers/src/SubHeaderBar/SubHeaderBar.test.js @@ -23,7 +23,8 @@ describe('SubHeaderBar container', () => { }; // When render(); - fireEvent.click(screen.getByLabelText('Go back')); + + fireEvent.click(screen.getByTestId('tc-subheader-backArrow')); // Then expect(props.onGoBack).toHaveBeenCalled(); }); @@ -35,7 +36,7 @@ describe('SubHeaderBar container', () => { }; // When render(); - fireEvent.click(screen.getByLabelText('Go back')); + fireEvent.click(screen.getByTestId('tc-subheader-backArrow')); // Then expect(props.dispatchActionCreator).toHaveBeenCalledWith( props.actionCreatorGoBack, diff --git a/packages/containers/src/SubHeaderBar/__snapshots__/SubHeaderBar.test.js.snap b/packages/containers/src/SubHeaderBar/__snapshots__/SubHeaderBar.test.js.snap index 5c232c5af2f..6377eda1996 100644 --- a/packages/containers/src/SubHeaderBar/__snapshots__/SubHeaderBar.test.js.snap +++ b/packages/containers/src/SubHeaderBar/__snapshots__/SubHeaderBar.test.js.snap @@ -13,18 +13,18 @@ exports[`SubHeaderBar container should render 1`] = `
- + class="CoralButtonIcon" + data-testid="tc-subheader-backArrow" + icon="arrow-left" + id="backArrow" + > + Go back + +
From 2553a2cc6691ab8957f369e18fadf605d35552a0 Mon Sep 17 00:00:00 2001 From: Talend bot Date: Thu, 27 Jul 2023 11:32:23 +0200 Subject: [PATCH 2/3] chore: prepare release (#4818) --- .changeset/ninety-badgers-rescue.md | 6 ------ packages/components/CHANGELOG.md | 7 +++++++ packages/components/package.json | 2 +- 3 files changed, 8 insertions(+), 7 deletions(-) delete mode 100644 .changeset/ninety-badgers-rescue.md diff --git a/.changeset/ninety-badgers-rescue.md b/.changeset/ninety-badgers-rescue.md deleted file mode 100644 index abc417d479e..00000000000 --- a/.changeset/ninety-badgers-rescue.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@talend/react-components': patch ---- - -fix: change icon color to neutral in subheader as it's not an interactive component -fix: change the border color of the grid layout to be weaker diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index acaab259a97..e59133ab457 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,12 @@ # @talend/react-components +## 11.1.1 + +### Patch Changes + +- a38d7b28a: fix: change icon color to neutral in subheader as it's not an interactive component + fix: change the border color of the grid layout to be weaker + ## 11.1.0 ### Minor Changes diff --git a/packages/components/package.json b/packages/components/package.json index c8ca4373b5b..290b4af99a9 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -113,5 +113,5 @@ "publishConfig": { "access": "public" }, - "version": "11.1.0" + "version": "11.1.1" } From 3054b407ddd19604e56e82a31cf3c5f6f7bfc7be Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 27 Jul 2023 09:45:51 +0000 Subject: [PATCH 3/3] chore: yarn-deduplicate --- yarn.lock | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/yarn.lock b/yarn.lock index a8b096e235a..a658a7a7401 100644 --- a/yarn.lock +++ b/yarn.lock @@ -310,7 +310,7 @@ regexpu-core "^5.3.1" semver "^6.3.1" -"@babel/helper-define-polyfill-provider@^0.4.1", "@babel/helper-define-polyfill-provider@^0.4.2": +"@babel/helper-define-polyfill-provider@^0.4.2": version "0.4.2" resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.2.tgz#82c825cadeeeee7aad237618ebbe8fa1710015d7" integrity sha512-k0qnnOqHn5dK9pZpfD5XXZ9SojAITdCKRn2Lp6rnDGzIbaP0rHyMPk/4wsSxVBVz4RfN0q6VpXWP2pDGIoQ7hw== @@ -724,7 +724,7 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-async-generator-functions@^7.22.5", "@babel/plugin-transform-async-generator-functions@^7.22.7": +"@babel/plugin-transform-async-generator-functions@^7.22.7": version "7.22.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.7.tgz#053e76c0a903b72b573cb1ab7d6882174d460a1b" integrity sha512-7HmE7pk/Fmke45TODvxvkxRMV9RazV+ZZzhOL9AG8G29TLrr3jkjwF7uJfxZ30EoXpO+LJkq4oA8NjO2DTnEDg== @@ -774,7 +774,7 @@ "@babel/helper-plugin-utils" "^7.22.5" "@babel/plugin-syntax-class-static-block" "^7.14.5" -"@babel/plugin-transform-classes@^7.22.5", "@babel/plugin-transform-classes@^7.22.6": +"@babel/plugin-transform-classes@^7.22.6": version "7.22.6" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.6.tgz#e04d7d804ed5b8501311293d1a0e6d43e94c3363" integrity sha512-58EgM6nuPNG6Py4Z3zSuu0xWu2VfodiMi72Jt5Kj2FECmaYk1RrTXA45z6KBFsu9tRgwQDwIiY4FXTt+YsSFAQ== @@ -2310,11 +2310,6 @@ dependencies: eslint-scope "5.1.1" -"@nicolo-ribaudo/semver-v6@^6.3.3": - version "6.3.3" - resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz#ea6d23ade78a325f7a52750aab1526b02b628c29" - integrity sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg== - "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5" @@ -5704,7 +5699,7 @@ babel-plugin-named-exports-order@^0.0.2: resolved "https://registry.yarnpkg.com/babel-plugin-named-exports-order/-/babel-plugin-named-exports-order-0.0.2.tgz#ae14909521cf9606094a2048239d69847540cb09" integrity sha512-OgOYHOLoRK+/mvXU9imKHlG6GkPLYrUCvFXG/CM93R/aNNO8pOOF4aS+S8CCHMDQoNSeiOYEZb/G6RwL95Jktw== -babel-plugin-polyfill-corejs2@^0.4.3, babel-plugin-polyfill-corejs2@^0.4.4: +babel-plugin-polyfill-corejs2@^0.4.4: version "0.4.5" resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.5.tgz#8097b4cb4af5b64a1d11332b6fb72ef5e64a054c" integrity sha512-19hwUH5FKl49JEsvyTcoHakh6BE0wgXLLptIyKZ3PijHc/Ci521wygORCUCCred+E/twuqRyAkE02BAWPmsHOg== @@ -5713,7 +5708,7 @@ babel-plugin-polyfill-corejs2@^0.4.3, babel-plugin-polyfill-corejs2@^0.4.4: "@babel/helper-define-polyfill-provider" "^0.4.2" semver "^6.3.1" -babel-plugin-polyfill-corejs3@^0.8.1, babel-plugin-polyfill-corejs3@^0.8.2: +babel-plugin-polyfill-corejs3@^0.8.2: version "0.8.3" resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.3.tgz#b4f719d0ad9bb8e0c23e3e630c0c8ec6dd7a1c52" integrity sha512-z41XaniZL26WLrvjy7soabMXrfPWARN25PZoriDEiLMxAp50AUW3t35BGQUMg5xK3UrpVTtagIDklxYa+MhiNA== @@ -5721,7 +5716,7 @@ babel-plugin-polyfill-corejs3@^0.8.1, babel-plugin-polyfill-corejs3@^0.8.2: "@babel/helper-define-polyfill-provider" "^0.4.2" core-js-compat "^3.31.0" -babel-plugin-polyfill-regenerator@^0.5.0, babel-plugin-polyfill-regenerator@^0.5.1: +babel-plugin-polyfill-regenerator@^0.5.1: version "0.5.2" resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.2.tgz#80d0f3e1098c080c8b5a65f41e9427af692dc326" integrity sha512-tAlOptU0Xj34V1Y2PNTL4Y0FOJMDB6bZmoW39FeCQIhigGLkqu3Fj6uiXpxIf6Ij274ENdYx64y6Au+ZKlb1IA== @@ -6868,7 +6863,7 @@ core-js-bundle@^3.31.0: resolved "https://registry.yarnpkg.com/core-js-bundle/-/core-js-bundle-3.31.0.tgz#4e1a85e96ffe03691d40fb57754cfc15656c9950" integrity sha512-MIfemYRT6s0Fly7JN/EuYKaR9zv4h769XHEiel/x2/Z+QOh/zOrWVyD9p9QyVY+CTSZgsWtspBC2cxyYVLwnqg== -core-js-compat@^3.30.2, core-js-compat@^3.31.0: +core-js-compat@^3.31.0: version "3.31.1" resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.31.1.tgz#5084ad1a46858df50ff89ace152441a63ba7aae0" integrity sha512-wIDWd2s5/5aJSdpOJHfSibxNODxoGoWOBHt8JSPB41NOE94M7kuTPZCYLOlTtuoXTsBPKobpJ6T+y0SSy5L9SA==