fix some css, fix imports and remove useless functions in toolbar

Talend · Jul 27, 2023 · bb8fd7b · bb8fd7b
1 parent cec4a60
commit bb8fd7b
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 48 deletions.
diff --git a/packages/storybook-docs/src/globalStyles.scss b/packages/storybook-docs/src/globalStyles.scss
@@ -189,25 +189,25 @@ html {
 		font: tokens.$coral-data-m;
 	}
 
-	.sbdocs-content,
-	.sbdocs-div,
-	.sbdocs-p,
-	.sbdocs-ul,
-	.sbdocs-ol {
+	content,
+	div,
+	p,
+	ul,
+	ol {
 		margin-top: 0;
 		font: tokens.$coral-paragraph-m;
 		color: tokens.$coral-color-neutral-text;
 	}
 
-	.sbdocs-li {
+	li {
 		font: tokens.$coral-paragraph-m;
 		color: tokens.$coral-color-neutral-text;
 	}
 
-	.sbdocs-blockquote {
+	blockquote {
 		border-left: 4px solid tokens.$coral-color-accent-icon;
 
-		.sbdocs-p {
+		p {
 			font: tokens.$coral-paragraph-m;
 			color: tokens.$coral-color-neutral-text-weak;
 			font-size: 1.6rem;
@@ -223,7 +223,7 @@ html {
 		max-width: 100%;
 	}
 
-	.sbdocs-hr {
+	hr {
 		border-top: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
 		margin: 0 0 tokens.$coral-spacing-m 0;
 	}
@@ -247,7 +247,7 @@ html {
 		}
 	}
 
-	.sbdocs-h1 {
+	h1 {
 		font: tokens.$coral-heading-l;
 		font-size: 3.2rem;
 		margin-bottom: tokens.$coral-spacing-xs;
@@ -260,7 +260,7 @@ html {
 			margin-top: tokens.$coral-spacing-l;
 		}
 
-		+ .sbdocs-p {
+		+ p {
 			font: tokens.$coral-heading-m;
 			color: tokens.$coral-color-neutral-text-weak;
 
@@ -270,32 +270,32 @@ html {
 		}
 	}
 
-	.sbdocs-h2 {
+	h2 {
 		font: tokens.$coral-heading-l;
 		font-size: 2rem;
 		border-bottom: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
 	}
 
-	.sbdocs-h3 {
+	h3 {
 		font: tokens.$coral-heading-m;
 	}
 
-	.sbdocs-h4 {
+	h4 {
 		font: tokens.$coral-heading-s;
 	}
 
-	.sbdocs-h5 {
+	h5 {
 		font: tokens.$coral-heading-s;
 	}
 
-	.sbdocs-h6 {
+	h6 {
 		font: tokens.$coral-heading-s;
 	}
 
-	.sbdocs-p {
+	p {
 		margin-bottom: tokens.$coral-spacing-m;
 
-		+ .sbdocs-p {
+		+ .p {
 			margin-top: calc(#{tokens.$coral-spacing-xs} * -1);
 		}
 
@@ -314,7 +314,7 @@ html {
 		background: tokens.$coral-color-neutral-background-medium;
 	}
 
-	.sbdocs-a {
+	a {
 		font: tokens.$coral-paragraph-m-bold;
 		color: tokens.$coral-color-accent-text;
 		transition: tokens.$coral-transition-fast;
@@ -325,7 +325,7 @@ html {
 		}
 	}
 
-	.sbdocs-table {
+	table {
 		width: 100%;
 		border-collapse: collapse;
 		overflow: hidden;
@@ -379,6 +379,24 @@ html {
 	footer {
 		text-align: center;
 	}
+
+	div {
+		& > dt {
+			font-size: 1.6rem;
+			font-weight: 600;
+		}
+
+		& > dt::before {
+			content: '#';
+			color: #ff6d70;
+			padding-right: 1ch;
+		}
+
+		& > dd {
+			margin: 0.5rem 0;
+			font-size: 1.4rem;
+		}
+	}
 }
 
 .sr-only {
@@ -391,21 +409,3 @@ html {
 	clip: rect(0, 0, 0, 0);
 	border: 0;
 }
-
-.sbdocs-div {
-	& > dt {
-		font-size: 1.6rem;
-		font-weight: 600;
-	}
-
-	& > dt::before {
-		content: '#';
-		color: #ff6d70;
-		padding-right: 1ch;
-	}
-
-	& > dd {
-		margin: 0.5rem 0;
-		font-size: 1.4rem;
-	}
-}
diff --git a/packages/storybook/.storybook/docs/Grid.module.scss b/packages/storybook/.storybook/docs/Grid.module.scss
@@ -2,6 +2,6 @@
 
 .grid {
 	display: grid;
-	gap: tokens.$coral-spacing-l calc(#{tokens.$coral-spacing-l}*2);
-	margin: calc(#{tokens.$coral-spacing-l}*2) 0;
+	gap: tokens.$coral-spacing-l calc(#{tokens.$coral-spacing-l}* 2);
+	margin: calc(#{tokens.$coral-spacing-l}* 2) 0 !important;
 }
diff --git a/packages/storybook/.storybook/docs/StatusTable.module.scss b/packages/storybook/.storybook/docs/StatusTable.module.scss
@@ -3,7 +3,7 @@
 .legend {
 	margin: tokens.$coral-spacing-m 0;
 	padding: tokens.$coral-spacing-xs tokens.$coral-spacing-m;
-	color: tokens.$coral-color-neutral-text-weak;
+	color: tokens.$coral-color-neutral-text-weak !important;
 	background: tokens.$coral-color-neutral-background-medium;
 	border-radius: tokens.$coral-radius-s;
 }
@@ -12,6 +12,10 @@
 	display: grid;
 	gap: 1ch;
 	grid-template: auto / auto 1fr;
+
+	dt {
+		font: tokens.$coral-paragraph-m-bold;
+	}
 }
 
 .table.table {

diff --git a/packages/storybook/.storybook/docs/StatusTable.tsx b/packages/storybook/.storybook/docs/StatusTable.tsx
@@ -1,6 +1,5 @@
 import { FunctionComponent, Suspense, ReactNode } from 'react';
 
-import { Unstyled } from '@storybook/blocks';
 import tokens from '@talend/design-tokens';
 
 import theme from './StatusTable.module.scss';
@@ -127,7 +126,7 @@ const getComputedHTMLStatus = (status?: ComponentStatus) => {
 
 const StatusTable = (props: FunctionComponent & { filter?: string }) => {
 	return (
-		<Unstyled>
+		<>
 			<div className={theme.legend}>
 				<dl className={theme.dl}>
 					<dt>Figma</dt>
@@ -181,7 +180,7 @@ const StatusTable = (props: FunctionComponent & { filter?: string }) => {
 					</tbody>
 				</table>
 			</Suspense>
-		</Unstyled>
+		</>
 	);
 };
 

diff --git a/packages/storybook/src/Catalog.stories.mdx b/packages/storybook/src/Catalog.stories.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Unstyled, Canvas, Meta, Story } from '@storybook/blocks';
 import {
 	ButtonDestructive,
 	ButtonIcon,

diff --git a/packages/storybook/src/DesignSystem.stories.mdx b/packages/storybook/src/DesignSystem.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Principles" />
 

diff --git a/packages/storybook/src/Status.stories.mdx b/packages/storybook/src/Status.stories.mdx
@@ -1,8 +1,10 @@
-import { Meta } from '@storybook/addon-docs';
 import { StatusTable } from '~docs';
+import { Unstyled, Meta } from '@storybook/blocks';
 
 <Meta title="Component status" />
 
 # Component status
 
-<StatusTable />
+<Unstyled>
+	<StatusTable />
+</Unstyled>
diff --git a/tools/scripts-config-storybook-lib/.storybook-templates/preview.js b/tools/scripts-config-storybook-lib/.storybook-templates/preview.js
@@ -116,6 +116,9 @@ const defaultPreview = {
 		},
 		cmfDecorator
 	].filter(Boolean),
+	parameters:{
+		backgrounds: { disable: true, grid: { disable: true } },
+	}
 };