diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 3012fc1bf72..89ed6f4f008 100644 --- 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 index 99d87db7550..46e0996d9d7 100644 --- 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 index 32c2280749e..ab8a123e9fc 100644 --- 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 index c758395cbfd..f021b4cc1e8 100644 --- 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 index 859efd7c092..6b6a612953a 100644 --- 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 = () => ( 
 			{`// 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;
 
 		
 
diff --git a/packages/components/src/DateTimePickers/InputDatePicker/DatePicker.stories.js b/packages/components/src/DateTimePickers/InputDatePicker/DatePicker.stories.js
index 8af21fe225a..60202185075 100644
--- 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 = () => (
-	

+	

 		
 			
 		
diff --git a/packages/components/src/DateTimePickers/InputDateTimePicker/__snapshots__/InputDateTimePicker.component.test.js.snap b/packages/components/src/DateTimePickers/InputDateTimePicker/__snapshots__/InputDateTimePicker.component.test.js.snap
index b8d51b90b12..7820cc5b9eb 100644
--- a/packages/components/src/DateTimePickers/InputDateTimePicker/__snapshots__/InputDateTimePicker.component.test.js.snap
+++ b/packages/components/src/DateTimePickers/InputDateTimePicker/__snapshots__/InputDateTimePicker.component.test.js.snap
@@ -20,7 +20,7 @@ exports[`InputDateTimePicker should render 1`] = `
     />
     
       YYYY-MM-DD
     
@@ -42,7 +42,7 @@ exports[`InputDateTimePicker should render 1`] = `
     />
     
       HH:mm:ss
     
diff --git a/packages/components/src/DateTimePickers/InputDateTimeRangePicker/__snapshots__/InputDateTimeRangePicker.component.test.js.snap b/packages/components/src/DateTimePickers/InputDateTimeRangePicker/__snapshots__/InputDateTimeRangePicker.component.test.js.snap
index 6efeaa8782b..6d045d0129c 100644
--- a/packages/components/src/DateTimePickers/InputDateTimeRangePicker/__snapshots__/InputDateTimeRangePicker.component.test.js.snap
+++ b/packages/components/src/DateTimePickers/InputDateTimeRangePicker/__snapshots__/InputDateTimeRangePicker.component.test.js.snap
@@ -33,7 +33,7 @@ exports[`InputDateTimeRangePicker should render 1`] = `
         />
         
           YYYY-MM-DD
         
@@ -55,7 +55,7 @@ exports[`InputDateTimeRangePicker should render 1`] = `
         />
         
           HH:mm:ss
         
@@ -103,7 +103,7 @@ exports[`InputDateTimeRangePicker should render 1`] = `
         />
         
           YYYY-MM-DD
         
@@ -125,7 +125,7 @@ exports[`InputDateTimeRangePicker should render 1`] = `
         />
         
           HH:mm:ss
         
diff --git a/packages/components/src/DateTimePickers/InputTimePicker/TimePicker.stories.js b/packages/components/src/DateTimePickers/InputTimePicker/TimePicker.stories.js
index 442a9f673d3..ffa3be0a7b6 100644
--- 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
index 7c0e6f67217..71c38ddc462 100644
--- 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
index 99cd7decc09..5e38c4b04e0 100644
--- 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
index 10159645e5b..306ff0eacab 100644
--- a/packages/components/src/Drawer/Drawer.stories.js
+++ b/packages/components/src/Drawer/Drawer.stories.js
@@ -562,7 +562,7 @@ export const Interactive = () => {
 
 	return (
 		
-			

+			

 				
@@ -622,7 +622,7 @@ export const _Interactive = () => {
 
 	return (
 		
-			

+			

 				
diff --git a/packages/components/src/FilterBar/Filter.stories.js b/packages/components/src/FilterBar/Filter.stories.js
index 120e8ad7bca..09a23b52aea 100644
--- 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
index f920999dabb..521575571d3 100644
--- 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 = () => (
 	>
 		
 (
 		
 		

@@ -259,9 +261,9 @@ const getLayoutWithLoremIpsum = () => (