fix(TDOPS-4875): elevation improvements and added story in DS

Talend · Jul 27, 2023 · 8eff585 · 8eff585
1 parent ffded8c
commit 8eff585
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 10 deletions.
diff --git a/fork/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss b/fork/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss
@@ -274,14 +274,13 @@ $dropdown-caret-color:           #000 !default;
 //
 // Note: These variables are not generated into the Customizer.
 
-$zindex-navbar:            1000 !default;
-$zindex-dropdown:          1000 !default;
-$zindex-popover:           1060 !default;
-$zindex-tooltip:           1070 !default;
-$zindex-navbar-fixed:      1030 !default;
-$zindex-modal-background:  1040 !default;
-$zindex-modal:             1050 !default;
-
+$zindex-navbar:            tokens.$coral-elevation-layer-flat !default; // 0
+$zindex-dropdown:          tokens.$coral-elevation-layer-interactive-front !default; // 8
+$zindex-navbar-fixed:      tokens.$coral-elevation-layer-standard-front !default; // 4
+$zindex-modal-background:  tokens.$coral-elevation-layer-standard-front !default; // 4
+$zindex-modal:             tokens.$coral-elevation-layer-standard-front !default; // 4
+$zindex-popover:           tokens.$coral-elevation-layer-interactive-front !default; // 8
+$zindex-tooltip:           tokens.$coral-elevation-layer-overlay !default; // 16
 
 //== Media queries breakpoints
 //

diff --git a/packages/components/src/TooltipTrigger/TooltipTrigger.module.scss b/packages/components/src/TooltipTrigger/TooltipTrigger.module.scss
@@ -8,7 +8,6 @@ $tc-tooltip-background: tokens.$coral-color-neutral-text !default;
 $tc-tooltip-border-radius: 0.2rem !default;
 $tc-tooltip-box-shadow: 0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.2) !default;
 $tc-tooltip-margin: 1rem !default;
-$tc-tooltip-z-index: $zindex-tooltip !default;
 
 $tc-tooltip-arrow-border-size: 0.5rem !default;
 $tc-tooltip-arrow-color: $tc-tooltip-background !default;
@@ -21,7 +20,7 @@ $tc-tooltip-arrow-color: $tc-tooltip-background !default;
 		padding: 0 $tc-tooltip-margin;
 		width: $tc-tooltip-max-width;
 		pointer-events: none;
-		z-index: $tc-tooltip-z-index;
+		z-index: tokens.$coral-elevation-layer-overlay;
 	}
 
 	&-body {

diff --git a/packages/storybook/src/design-system/Elevation/Elevation.stories.mdx b/packages/storybook/src/design-system/Elevation/Elevation.stories.mdx
@@ -0,0 +1,38 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import { FigmaImage, FigmaLink, Use } from '~docs';
+
+import { Modal } from '@talend/design-system';
+
+import * as Stories from './Elevation.stories';
+
+<Meta
+	title="Design System/Elevation"
+	parameters={{
+		status: { figma: 'ok', storybook: 'wip', react: 'ok', i18n: 'na' },
+		figmaLink: 'https://www.figma.com/file/0Jolh2prAAdfO5224n3OU3/Modal',
+	}}
+/>
+
+# Elevation for different components combination
+
+Different component overlay
+
+## Zoning
+
+### Variations
+
+**Modal with info in Popover**
+
+<Canvas>
+	<Story height="5rem" story={Stories.DialogWithTooltipAndPopover} />
+</Canvas>
+
+## States
+
+## Interactions
+
+## Content
+
+## Usage
+
+## Accessibility
diff --git a/packages/storybook/src/design-system/Elevation/Elevation.stories.tsx b/packages/storybook/src/design-system/Elevation/Elevation.stories.tsx
@@ -0,0 +1,49 @@
+import { Story, ComponentStory } from '@storybook/react';
+import { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+
+import { Popover, ButtonIcon, ButtonPrimary, Modal } from '@talend/design-system';
+import { ModalPropsType } from '@talend/design-system/lib/components/Modal';
+
+export default {
+	component: Modal,
+};
+
+function ModalStory(props: Partial<ModalPropsType>) {
+	const [modalOpen, setModalOpen] = useState(false);
+
+	return (
+		<>
+			<ButtonPrimary onClick={() => setModalOpen(true)} data-test="open-modal">
+				See
+			</ButtonPrimary>
+
+			{modalOpen && (
+				<Modal
+					header={{ title: '(Default story title)' }}
+					onClose={() => {
+						action('onClose');
+						setModalOpen(false);
+					}}
+					{...props}
+				/>
+			)}
+		</>
+	);
+}
+
+export const DialogWithTooltipAndPopover: ComponentStory<typeof Modal> = props => (
+	<ModalStory {...props} header={{ title: 'Dialog with Tooltip and Popover' }}>
+		<Popover
+			isFixed
+			disclosure={
+				<ButtonIcon size="M" icon="pencil" onClick={() => action('click')}>
+					Hey I am tooltip. Click to see the Popover
+				</ButtonIcon>
+			}
+		>
+			Hey I am Popover
+		</Popover>
+		Default story child
+	</ModalStory>
+);