Merge branch 'master' into ywang/chore/faceted-search-period

Talend · Jan 31, 2024 · 5b5bd40 · 5b5bd40
2 parents 62d843c + 70105e2
commit 5b5bd40
Show file tree

Hide file tree

Showing 55 changed files with 309 additions and 236 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @talend/react-components
 
+## 15.0.2
+
+### Patch Changes
+
+- 1964aac: fix: rem values for JS files
+
 ## 15.0.1
 
 ### Patch Changes

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -73,7 +73,7 @@
   "devDependencies": {
     "@storybook/addon-actions": "^7.6.4",
     "@talend/bootstrap-theme": "^9.0.0",
-    "@talend/design-system": "^9.0.1",
+    "@talend/design-system": "^9.0.2",
     "@talend/eslint-config": "^13.0.2",
     "@talend/eslint-plugin": "^1.1.0",
     "@talend/locales-design-system": "^7.15.1",
@@ -120,5 +120,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "15.0.1"
+  "version": "15.0.2"
 }
diff --git a/packages/components/src/ActionIntercom/Intercom.service.js b/packages/components/src/ActionIntercom/Intercom.service.js
@@ -81,7 +81,7 @@ function setPosition(domElement) {
 		const { bottom, left, right } = domElement.getBoundingClientRect();
 		const intercomRight = Math.max(
 			window.innerWidth /* window */ -
-			(right - (right - left) / 2) /* right position of trigger element center */ -
+				(right - (right - left) / 2) /* right position of trigger element center */ -
 				INTERCOM_MAIN_FRAME_WIDTH / 2 /* center intercom window  */,
 			0,
 		);
@@ -96,7 +96,7 @@ function setPosition(domElement) {
 				top: ${intercomTop}px;
 				left: ${intercomLeft}px;
 				right: ${intercomRight}px;
-				margin-top: 2rem;
+				margin-top: 1.25rem;
 			}
 		`),
 		);

diff --git a/packages/components/src/ActionIntercom/Intercom.service.test.js b/packages/components/src/ActionIntercom/Intercom.service.test.js
@@ -158,7 +158,7 @@ describe('Intercom service', () => {
 			// then
 			const styleElement = intercomContainer.querySelector('style');
 			expect(styleElement.textContent.trim().replace(/\s/g, ' ')).toBe(
-				'.intercom-namespace .intercom-app div.intercom-messenger-frame {     top: 39px;     left: 427px;     right: 221px;     margin-top: 2rem;    }',
+				'.intercom-namespace .intercom-app div.intercom-messenger-frame {     top: 39px;     left: 427px;     right: 221px;     margin-top: 1.25rem;    }',
 			);
 			jest.useRealTimers();
 		});

diff --git a/packages/components/src/Actions/ActionIconToggle/IconToggle.stories.js b/packages/components/src/Actions/ActionIconToggle/IconToggle.stories.js
@@ -1,4 +1,5 @@
 import { Component, Fragment } from 'react';
+
 import { action } from '@storybook/addon-actions';
 
 import ActionIconToggle from './ActionIconToggle.component';
@@ -94,8 +95,8 @@ export const CustomizeSizes = () => (
 		<pre>
 			{`// sass file
 @import '~@talend/react-components/lib/Actions/ActionIconToggle/ActionIconToggle.scss'
-$my-btn-size: 4rem;
-$my-btn-icon-size: 2.5rem;
+$my-btn-size: 2.5rem;
+$my-btn-icon-size: 1.5625rem;
 .tc-icon-toggle.my-custom-icon-toggle {
     @include tc-icon-toggle($my-btn-size, $my-btn-icon-size);
 }`}
@@ -110,14 +111,14 @@ $my-btn-icon-size: 2.5rem;
 
 		<style>
 			{`.tc-icon-toggle.my-custom-icon-toggle {
-                        height: 4rem;
-                        width: 4rem;
-                        border-radius:2rem;
+                        height: 2.5rem;
+                        width: 2.5rem;
+                        border-radius:1.25rem;
                     }
 
                     .tc-icon-toggle.my-custom-icon-toggle svg {
-                        height: 2.5rem;
-                        width: 2.5rem;
+                        height: 1.5625rem;
+                        width: 1.5625rem;
                     }`}
 		</style>
 

diff --git a/packages/components/src/DateTimePickers/InputDatePicker/DatePicker.stories.js b/packages/components/src/DateTimePickers/InputDatePicker/DatePicker.stories.js
@@ -34,7 +34,7 @@ export const Input = () => (
 );
 
 export const Picker = () => (
-	<div style={{ border: '1px solid black', width: '32rem' }}>
+	<div style={{ border: '1px solid black', width: '20rem' }}>
 		<DateManager id="simple" onChange={action('onChange', { depth: 3 })}>
 			<DatePicker />
 		</DateManager>

diff --git a/...eTimePickers/InputDateTimePicker/__snapshots__/InputDateTimePicker.component.test.js.snap b/...eTimePickers/InputDateTimePicker/__snapshots__/InputDateTimePicker.component.test.js.snap
@@ -20,7 +20,7 @@ exports[`InputDateTimePicker should render 1`] = `
     />
     <span
       data-testid="InputSizer"
-      style="padding: 0px 1rem; font-size: 1.4rem; visibility: hidden; position: absolute;"
+      style="padding: 0px 0.625rem; font-size: 0.875rem; visibility: hidden; position: absolute;"
     >
       YYYY-MM-DD
     </span>
@@ -42,7 +42,7 @@ exports[`InputDateTimePicker should render 1`] = `
     />
     <span
       data-testid="InputSizer"
-      style="padding: 0px 1rem; font-size: 1.4rem; visibility: hidden; position: absolute;"
+      style="padding: 0px 0.625rem; font-size: 0.875rem; visibility: hidden; position: absolute;"
     >
       HH:mm:ss
     </span>

diff --git a/...rs/InputDateTimeRangePicker/__snapshots__/InputDateTimeRangePicker.component.test.js.snap b/...rs/InputDateTimeRangePicker/__snapshots__/InputDateTimeRangePicker.component.test.js.snap
@@ -33,7 +33,7 @@ exports[`InputDateTimeRangePicker should render 1`] = `
         />
         <span
           data-testid="InputSizer"
-          style="padding: 0px 1rem; font-size: 1.4rem; visibility: hidden; position: absolute;"
+          style="padding: 0px 0.625rem; font-size: 0.875rem; visibility: hidden; position: absolute;"
         >
           YYYY-MM-DD
         </span>
@@ -55,7 +55,7 @@ exports[`InputDateTimeRangePicker should render 1`] = `
         />
         <span
           data-testid="InputSizer"
-          style="padding: 0px 1rem; font-size: 1.4rem; visibility: hidden; position: absolute;"
+          style="padding: 0px 0.625rem; font-size: 0.875rem; visibility: hidden; position: absolute;"
         >
           HH:mm:ss
         </span>
@@ -103,7 +103,7 @@ exports[`InputDateTimeRangePicker should render 1`] = `
         />
         <span
           data-testid="InputSizer"
-          style="padding: 0px 1rem; font-size: 1.4rem; visibility: hidden; position: absolute;"
+          style="padding: 0px 0.625rem; font-size: 0.875rem; visibility: hidden; position: absolute;"
         >
           YYYY-MM-DD
         </span>
@@ -125,7 +125,7 @@ exports[`InputDateTimeRangePicker should render 1`] = `
         />
         <span
           data-testid="InputSizer"
-          style="padding: 0px 1rem; font-size: 1.4rem; visibility: hidden; position: absolute;"
+          style="padding: 0px 0.625rem; font-size: 0.875rem; visibility: hidden; position: absolute;"
         >
           HH:mm:ss
         </span>

diff --git a/packages/components/src/DateTimePickers/InputTimePicker/TimePicker.stories.js b/packages/components/src/DateTimePickers/InputTimePicker/TimePicker.stories.js
@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 
-import InputTimePicker from './InputTimePicker.component';
 import TimePicker from '../pickers/TimePicker';
+import InputTimePicker from './InputTimePicker.component';
 
 export default {
 	title: 'Components/Form - Controls/DatePicker/Time',
@@ -43,8 +43,8 @@ export const Input = () => {
 export const Picker = () => {
 	const containerStyle = {
 		overflow: 'auto',
-		width: '7rem',
-		height: '17rem',
+		width: '4.375rem',
+		height: '10.625rem',
 		marginRight: 60,
 	};
 	return (

diff --git a/packages/components/src/DateTimePickers/shared/InputSizer/InputSizer.component.test.js b/packages/components/src/DateTimePickers/shared/InputSizer/InputSizer.component.test.js
@@ -1,4 +1,4 @@
-import { screen, render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import InputSizer from './InputSizer.component';
 
@@ -27,7 +27,7 @@ describe('InputSizer', () => {
 		// then
 		const style = screen.getByTestId('InputSizer').getAttribute('style');
 		expect(style).toEqual(
-			'padding: 0px 1rem; font-size: 1.4rem; visibility: hidden; position: absolute;',
+			'padding: 0px 0.625rem; font-size: 0.875rem; visibility: hidden; position: absolute;',
 		);
 	});
 });
diff --git a/packages/components/src/DateTimePickers/shared/InputSizer/InputSizer.component.tsx b/packages/components/src/DateTimePickers/shared/InputSizer/InputSizer.component.tsx
@@ -1,10 +1,10 @@
-import { Fragment, useState, useRef, useEffect, CSSProperties } from 'react';
+import { CSSProperties, Fragment, useEffect, useRef, useState } from 'react';
 
 const EXTRA_SPACE = 5;
 
 const inputTextSizerStyle: CSSProperties = {
-	padding: '0 1rem',
-	fontSize: '1.4rem',
+	padding: '0 0.625rem',
+	fontSize: '0.875rem',
 	visibility: 'hidden',
 	position: 'absolute',
 };

diff --git a/packages/components/src/Drawer/Drawer.stories.js b/packages/components/src/Drawer/Drawer.stories.js
@@ -562,7 +562,7 @@ export const Interactive = () => {
 
 	return (
 		<Layout header={header} mode="OneColumn" drawers={Object.values(displayedDrawers)}>
-			<div style={{ padding: '1.5rem' }}>
+			<div style={{ padding: '0.9375rem' }}>
 				<button className="btn btn-primary" onClick={() => setDisplayedDrawers(allDrawers)}>
 					Set back the drawers
 				</button>
@@ -622,7 +622,7 @@ export const _Interactive = () => {
 
 	return (
 		<Layout header={header} mode="OneColumn" drawers={Object.values(displayedDrawers)}>
-			<div style={{ padding: '1.5rem' }}>
+			<div style={{ padding: '0.9375rem' }}>
 				<button className="btn btn-primary" onClick={() => setDisplayedDrawers(allDrawers)}>
 					Set back the drawers
 				</button>

diff --git a/packages/components/src/FilterBar/Filter.stories.js b/packages/components/src/FilterBar/Filter.stories.js
@@ -36,7 +36,7 @@ const propsNoDockToggle = {
 const propsDisabled = { ...propsDockToggle, disabled: true };
 
 const divStyle = {
-	width: '30rem',
+	width: '18.75rem',
 };
 
 export default {

diff --git a/packages/components/src/GuidedTour/GuidedTour.stories.js b/packages/components/src/GuidedTour/GuidedTour.stories.js
@@ -1,11 +1,13 @@
 /* eslint-disable react/prop-types */
 import { Component, Fragment } from 'react';
+import { withTranslation } from 'react-i18next';
+
 import { action } from '@storybook/addon-actions';
+
 import tokens from '@talend/design-tokens';
-import { withTranslation } from 'react-i18next';
 
-import GuidedTour from './GuidedTour.component';
 import I18N_DOMAIN_COMPONENTS from '../constants';
+import GuidedTour from './GuidedTour.component';
 
 class ImportDemo extends Component {
 	state = {
@@ -165,11 +167,11 @@ const getLayoutWithLoremIpsum = () => (
 	>
 		<header
 			style={{
-				height: '5rem',
+				height: '3.125rem',
 				display: 'flex',
 				alignItems: 'center',
 				justifyContent: 'space-between',
-				padding: '1rem 10rem 1rem 2rem',
+				padding: '0.625rem 6.25rem 0.625rem 1.25rem',
 				flexBasis: '100vw',
 				background: '#eee',
 			}}
@@ -182,7 +184,7 @@ const getLayoutWithLoremIpsum = () => (
 		<aside
 			style={{
 				flexBasis: '19vw',
-				paddingTop: '3rem',
+				paddingTop: '1.875rem',
 			}}
 		>
 			<ul>
@@ -195,7 +197,7 @@ const getLayoutWithLoremIpsum = () => (
 		</aside>
 		<main
 			style={{
-				padding: '1rem',
+				padding: '0.625rem',
 				flexBasis: '79vw',
 			}}
 		>
@@ -259,9 +261,9 @@ const getLayoutWithLoremIpsum = () => (
 		</main>
 		<footer
 			style={{
-				height: '5rem',
+				height: '3.125rem',
 				marginTop: 'auto',
-				padding: '1rem 2rem',
+				padding: '0.625rem 1.25rem',
 				flexBasis: '100vw',
 				alignItems: 'center',
 				textAlign: 'right',

diff --git a/packages/components/src/HeaderBar/HeaderBar.stories.js b/packages/components/src/HeaderBar/HeaderBar.stories.js
@@ -79,8 +79,8 @@ function IntercomComponent() {
 	const style = {
 		color: 'white',
 		margin: '0 10px',
-		width: '3.2rem',
-		height: '3.2rem',
+		width: '2rem',
+		height: '2rem',
 		borderRadius: '50%',
 		background: 'green',
 		display: 'flex',

diff --git a/packages/components/src/HttpError/HttpError.stories.js b/packages/components/src/HttpError/HttpError.stories.js
diff --git a/...es/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.stories.js b/...es/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.stories.js
@@ -1,7 +1,9 @@
 import { action } from '@storybook/addon-actions';
-import ColumnChooser from './ColumnChooser.component';
+
 import { Card } from '@talend/design-system';
 
+import ColumnChooser from './ColumnChooser.component';
+
 const columns = [
 	{ key: 'id', label: 'Id', order: 1 },
 	{ key: 'name', label: 'Name', order: 2 },
@@ -39,7 +41,7 @@ export default {
 			<div>
 				<h1>{parameters?.title}</h1>
 				<p>{parameters?.description}</p>
-				<div style={{ width: '50rem', height: '50rem' }}>
+				<div style={{ width: '31.25rem', height: '31.25rem' }}>
 					<Card>
 						<Story />
 					</Card>

diff --git a/packages/components/src/ResourcePicker/ResourcePicker.stories.js b/packages/components/src/ResourcePicker/ResourcePicker.stories.js
@@ -144,7 +144,7 @@ export const Default = () => (
 export const GenericSubtitle = () => (
 	<div>
 		<p>By default :</p>
-		<div style={{ width: '40rem', height: '10rem' }}>
+		<div style={{ width: '25rem', height: '6.25rem' }}>
 			<ResourcePicker
 				id="default"
 				{...props}

diff --git a/packages/components/src/SidePanel/SidePanel.component.js b/packages/components/src/SidePanel/SidePanel.component.js
@@ -16,8 +16,8 @@ import '../translate';
 
 import theme from './SidePanel.module.scss';
 
-const DOCKED_MIN_WIDTH = '6rem';
-const LARGE_DOCKED_MIN_WIDTH = '7rem';
+const DOCKED_MIN_WIDTH = '3.75rem';
+const LARGE_DOCKED_MIN_WIDTH = '4.375rem';
 
 function getInitialWidth(docked, large) {
 	if (docked && large) {
@@ -119,8 +119,8 @@ function SidePanel({
 						position: absolute;
 						left: 0;
 						bottom: -50px;
-						height: 31rem;
-						width: 31rem;
+						height: 19.375rem;
+						width: 19.375rem;
 						background-repeat: no-repeat;
 						opacity: 0.1;
 						background-color: ${tokens.coralColorBrandIcon};

diff --git a/packages/components/src/Skeleton/Skeleton.stories.js b/packages/components/src/Skeleton/Skeleton.stories.js
@@ -38,7 +38,7 @@ export const Default = () => (
 		<Skeleton
 			type={Skeleton.TYPES.icon}
 			name="talend-table"
-			style={{ width: '9.6rem', height: '9.6rem' }}
+			style={{ width: '6rem', height: '6rem' }}
 		/>
 	</div>
 );