chore(TDOPS-5724): remove bootstrap theme from packages (#5115)

Talend · Jan 15, 2024 · 7d73eb9 · 7d73eb9
1 parent daf8cf0
commit 7d73eb9
Show file tree

Hide file tree

Showing 19 changed files with 28 additions and 69 deletions.
diff --git a/.changeset/nice-colts-fly.md b/.changeset/nice-colts-fly.md
@@ -0,0 +1,6 @@
+---
+'@talend/react-containers': minor
+'@talend/react-dataviz': minor
+---
+
+TDOPS-5724 - Remove bootstrap theme styling and dependency from packages
diff --git a/packages/containers/package.json b/packages/containers/package.json
@@ -49,7 +49,6 @@
   },
   "devDependencies": {
     "@storybook/addon-actions": "^7.6.4",
-    "@talend/bootstrap-theme": "^8.3.1",
     "@talend/icons": "^7.3.1",
     "@talend/locales-tui-components": "^11.4.5",
     "@talend/locales-tui-containers": "^9.1.3",

diff --git a/packages/containers/src/ActionIconToggle/ActionIconToggle.stories.js b/packages/containers/src/ActionIconToggle/ActionIconToggle.stories.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
-import { Drawer } from '@talend/react-components';
+
 import { cmfConnect } from '@talend/react-cmf';
+import { Drawer } from '@talend/react-components';
 
 import ActionIconToggle from '.';
 
@@ -18,11 +19,9 @@ function MyDrawer({ opened }) {
 	return opened ? (
 		<Drawer>
 			<form>
-				<div className="form-group">
-					<input className="form-control" id="my-input" type="text" autoFocus />
-					<label className="control-label" htmlFor="my-input">
-						Your name
-					</label>
+				<div>
+					<input id="my-input" type="text" autoFocus />
+					<label htmlFor="my-input">Your name</label>
 				</div>
 				<button
 					className="btn btn-primary"

diff --git a/packages/containers/src/Form/Form.stories.js b/packages/containers/src/Form/Form.stories.js
@@ -55,12 +55,7 @@ class SchemaInState extends Component {
 				</div>
 				<div className="col-md-6">
 					<h2>Schema</h2>
-					<textarea
-						rows="20"
-						className="form-control"
-						onChange={this.onChange}
-						value={this.state.schema}
-					/>
+					<textarea rows="20" onChange={this.onChange} value={this.state.schema} />
 				</div>
 			</div>
 		);

diff --git a/packages/containers/src/SelectObject/SelectObject.module.scss b/packages/containers/src/SelectObject/SelectObject.module.scss
@@ -1,5 +1,3 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
 .wrapper {
 	min-height: 300px;
 	max-width: 500px;
@@ -37,36 +35,18 @@
 				}
 			}
 
-			margin-top: $padding-smaller;
+			margin-top: 4px;
 			overflow-y: auto;
 			flex: 4 0 0;
 
-			:global(.list-group-item) {
-				border: none;
-				padding-left: $padding-small;
-				padding-bottom: $padding-smaller;
-				border-radius: unset;
-			}
-
-			:global(.list-group-item-heading) {
-				font-size: 15px;
-			}
-
 			:global(.active) {
-				background: rgba($black, 0.05);
-			}
-
-			:global(.list-group-item-text) {
-				color: $gray;
-				font-size: 13px;
+				background: rgba(#000, 0.05);
 			}
 		}
 
 		.preview {
 			flex: 3 0 0;
 			overflow-y: auto;
-			margin-top: 0;
-			padding-top: $padding-large;
 
 			:global(.text-renderer-label) {
 				dt {

diff --git a/packages/dataviz/package.json b/packages/dataviz/package.json
@@ -49,7 +49,6 @@
   "devDependencies": {
     "@cypress/react": "^7.0.3",
     "@cypress/webpack-dev-server": "^3.7.1",
-    "@talend/bootstrap-theme": "^8.3.1",
     "@talend/design-system": "^8.8.3",
     "@talend/eslint-config": "^13.0.2",
     "@talend/eslint-plugin": "^1.1.0",

diff --git a/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.module.scss b/packages/dataviz/src/components/BarChart/ColoredBar/ColoredBar.component.module.scss
@@ -1,4 +1,3 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
 @use '~@talend/design-tokens/lib/tokens';
 @import '../bar-chart';
 
@@ -29,9 +28,7 @@ $module: colored-bar;
 
 	&__label-container {
 		pointer-events: none;
-		font-size: 1.2rem;
-		font-family: 'Source Sans Pro', sans-serif;
-		font-weight: $font-weight-semi-bold;
+		font: tokens.$coral-paragraph-s-bold;
 	}
 
 	&__label {

diff --git a/...taviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.component.module.scss b/...taviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.component.module.scss
@@ -1,5 +1,3 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
 @import '../bar-chart';
 
 .horizontal-bar-chart {

diff --git a/packages/dataviz/src/components/BarChart/_bar-chart.scss b/packages/dataviz/src/components/BarChart/_bar-chart.scss
@@ -1,4 +1,3 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
 @use '~@talend/design-tokens/lib/tokens';
 
 $pattern-bar-primary-color: tokens.$coral-color-charts-warning-weak;

diff --git a/packages/dataviz/src/components/BoxPlot/BoxPlot.component.module.scss b/packages/dataviz/src/components/BoxPlot/BoxPlot.component.module.scss
@@ -1,9 +1,8 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
 @use '~@talend/design-tokens/lib/tokens';
 // Imported (almost) as-is from TDP
 
 .box-plot {
-	font: 11px 'Source Sans Pro', sans-serif;
+	font: tokens.$coral-paragraph-s;
 
 	line,
 	rect {

diff --git a/...z/src/components/ChartPanel/VerticalChartFilter/VerticalChartFilter.component.module.scss b/...z/src/components/ChartPanel/VerticalChartFilter/VerticalChartFilter.component.module.scss
@@ -1,5 +1,3 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
 $module: vertical-chart-panel;
 
 .#{$module} {

diff --git a/packages/dataviz/src/components/GeoChart/GeoChart.module.scss b/packages/dataviz/src/components/GeoChart/GeoChart.module.scss
@@ -1,4 +1,3 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
 @use '~@talend/design-tokens/lib/tokens';
 
 :export {

diff --git a/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.module.scss b/packages/dataviz/src/components/KeyValueTooltip/KeyValueTooltip.component.module.scss
@@ -1,4 +1,3 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
 @use '~@talend/design-tokens/lib/tokens';
 
 $module: key-value-tooltip;
@@ -16,8 +15,7 @@ $module: key-value-tooltip;
 
 	&__key {
 		margin-top: 0; // override dt margin
-		font-weight: $font-weight-regular;
-		line-height: $line-height-base;
+		font: tokens.$coral-paragraph-m;
 		color: tokens.$coral-color-neutral-background;
 
 		&::after {
@@ -26,7 +24,7 @@ $module: key-value-tooltip;
 	}
 
 	&__value {
-		margin-left: 5px;
+		margin-left: tokens.$coral-spacing-xxs;
 		color: tokens.$coral-color-accent-text-weak-active;
 	}
 

diff --git a/packages/dataviz/src/components/LineChart/LineChart.module.scss b/packages/dataviz/src/components/LineChart/LineChart.module.scss
@@ -1,5 +1,3 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
 @use '~@talend/design-tokens/lib/_tokens.scss' as tokens;
 
 $module: line-chart;
@@ -88,8 +86,7 @@ $module: line-chart;
 		display: inline-block;
 		width: 16px;
 		height: 2px;
-		margin-right: 0.8rem;
-		margin-bottom: 0.3rem;
-		border-radius: 25px;
+		margin-right: tokens.$coral-spacing-xs;
+		border-radius: tokens.$coral-radius-round;
 	}
 }
diff --git a/packages/dataviz/src/components/RangeFilter/RangeFilter.component.module.scss b/packages/dataviz/src/components/RangeFilter/RangeFilter.component.module.scss
@@ -1,4 +1,3 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
 @use '~@talend/design-tokens/lib/tokens';
 
 $module: range-filter;
@@ -57,7 +56,7 @@ $module: range-filter;
 	}
 
 	&__label {
-		font-weight: $font-weight-semi-bold;
-		margin-right: 10px;
+		font: tokens.$coral-paragraph-m-bold;
+		margin-right: tokens.$coral-spacing-s;
 	}
 }
diff --git a/...onents/RangeFilter/handlers/DateTimeRangeHandler/DateTimeInputField.component.module.scss b/...onents/RangeFilter/handlers/DateTimeRangeHandler/DateTimeInputField.component.module.scss
@@ -1,6 +1,4 @@
 /* stylelint-disable declaration-no-important */
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
 .date-time-input-field {
 	input {
 		width: 100% !important;

diff --git a/...components/RangeFilter/handlers/NumberRangeHandler/NumberInputField.component.module.scss b/...components/RangeFilter/handlers/NumberRangeHandler/NumberInputField.component.module.scss
@@ -1,5 +1,3 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
 .number-input-field {
 	width: 100px;
 }
diff --git a/...ges/dataviz/src/components/RangeFilter/handlers/NumberRangeHandler/NumberRangeHandler.tsx b/...ges/dataviz/src/components/RangeFilter/handlers/NumberRangeHandler/NumberRangeHandler.tsx
@@ -1,11 +1,13 @@
 import classNames from 'classnames';
 import { scaleLinear } from 'd3';
-import useRangeInputField, { InputFieldProps } from '../useRangeInputField.hook';
-import styles from './NumberInputField.component.module.scss';
+
 import { formatNumber, getFractionDigits } from '../../../../formatters/formatters';
+import { Range } from '../../../../types';
 import { RangeHandler, Ticks } from '../range-handler.types';
 import { formatD3Ticks } from '../slider-ticks.utils';
-import { Range } from '../../../../types';
+import useRangeInputField, { InputFieldProps } from '../useRangeInputField.hook';
+
+import styles from './NumberInputField.component.module.scss';
 
 const formatter = (input: number) => `${input}`;
 const parser = (input: string) => +input;
@@ -50,7 +52,7 @@ export function NumberInputField({
 	return (
 		<input
 			id={id}
-			className={classNames('form-control', styles['number-input-field'])}
+			className={classNames(styles['number-input-field'])}
 			type="number"
 			step="any"
 			onChange={event => setInputValue(event.target.value)}

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -61,7 +61,6 @@
     "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "^7.6.4",
     "@svgr/webpack": "^5.5.0",
-    "@talend/bootstrap-theme": "^8.3.1",
     "@talend/eslint-config": "^13.0.2",
     "@talend/eslint-plugin": "^1.1.0",
     "@talend/icons": "^7.4.0",