Merge branch 'jmfrancois/chore/storybook-beta' of github.com:Talend/u…

…i into jmfrancois/chore/storybook-beta
Talend · Jul 27, 2023 · 4d73458 · 4d73458
2 parents 9cd0bd1 + 3054b40
commit 4d73458
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 54 deletions.
diff --git a/.changeset/large-carpets-film.md 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/.changeset/ninety-badgers-rescue.md b/.changeset/ninety-badgers-rescue.md
diff --git 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
@@ -113,5 +113,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "11.1.0"
+  "version": "11.1.1"
 }
diff --git 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({
 				<SubHeaderBarActions left>
 					{injected('before-back')}
 					{onGoBack && (
-						<Renderer.Action
-							id="backArrow"
-							onClick={onGoBack}
-							label={t('BACK_ARROW_TOOLTIP', { defaultValue: 'Go back' })}
-							icon="talend-arrow-left"
-							bsStyle="link"
-							data-feature={goBackDataFeature}
+						<div
 							className={classNames(theme['tc-subheader-back-button'], 'tc-subheader-back-button')}
-							hideLabel
-						/>
+						>
+							<ButtonIcon
+								icon="arrow-left"
+								size="M"
+								onClick={onGoBack}
+								id="backArrow"
+								data-testid="tc-subheader-backArrow"
+								data-feature={goBackDataFeature}
+							>
+								{t('BACK_ARROW_TOOLTIP', { defaultValue: 'Go back' })}
+							</ButtonIcon>
+						</div>
 					)}
 					{injected('before-title')}
 					<TitleSubHeader t={t} getComponent={getComponent} {...rest} />

diff --git 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
@@ -200,7 +200,7 @@ describe('SubHeaderBar', () => {
 		};
 		render(<SubHeaderBar {...props} />);
 		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
@@ -13,18 +13,18 @@ exports[`SubHeaderBar should render 1`] = `
       <div
         class="theme-navbar-left navbar-left"
       >
-        <button
-          aria-describedby="42"
-          aria-label="Go back"
-          class="theme-tc-subheader-back-button tc-subheader-back-button btn-icon-only btn btn-link"
-          id="backArrow"
-          type="button"
+        <div
+          class="theme-tc-subheader-back-button tc-subheader-back-button"
         >
           <span
-            class="CoralIcon"
-            name="talend-arrow-left"
-          />
-        </button>
+            class="CoralButtonIcon"
+            data-testid="tc-subheader-backArrow"
+            icon="arrow-left"
+            id="backArrow"
+          >
+            Go back
+          </span>
+        </div>
         <div
           class="tc-subheader-details theme-tc-subheader-details"
         >

diff --git 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(<Container {...props} />);
-		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(<Container {...props} />);
-		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
@@ -13,18 +13,18 @@ exports[`SubHeaderBar container should render 1`] = `
       <div
         class="theme-navbar-left navbar-left"
       >
-        <button
-          aria-describedby="42"
-          aria-label="Go back"
-          class="theme-tc-subheader-back-button tc-subheader-back-button btn-icon-only btn btn-link"
-          id="backArrow"
-          type="button"
+        <div
+          class="theme-tc-subheader-back-button tc-subheader-back-button"
         >
           <span
-            class="CoralIcon"
-            name="talend-arrow-left"
-          />
-        </button>
+            class="CoralButtonIcon"
+            data-testid="tc-subheader-backArrow"
+            icon="arrow-left"
+            id="backArrow"
+          >
+            Go back
+          </span>
+        </div>
         <div
           class="tc-subheader-details theme-tc-subheader-details"
         >

diff --git 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/[email protected]":
   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,15 +5708,15 @@ 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==
   dependencies:
     "@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==