fix(Components): fix drawer empty footer and remove bootstrap styles (#…

…5174) * fix(Components): fix drawer empty footer and remove bootstrap styles * fix(Components): fix drawer empty footer and remove bootstrap styles
Talend · Feb 9, 2024 · 788e8a0 · 788e8a0
1 parent 9332af5
commit 788e8a0
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 78 deletions.
diff --git a/.changeset/cyan-cars-fix.md b/.changeset/cyan-cars-fix.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-components': patch
+---
+
+Components Drawer - Fix styling when no actions in footer and remove bootstrap styles
diff --git a/packages/components/src/Drawer/Drawer.component.js b/packages/components/src/Drawer/Drawer.component.js
@@ -1,18 +1,21 @@
-import PropTypes from 'prop-types';
 import { useState } from 'react';
-import get from 'lodash/get';
-import omit from 'lodash/omit';
-import noop from 'lodash/noop';
 import { Transition } from 'react-transition-group';
+
 import classnames from 'classnames';
+import get from 'lodash/get';
+import noop from 'lodash/noop';
+import omit from 'lodash/omit';
+import PropTypes from 'prop-types';
+
 import { StackHorizontal, Tag, TagVariantsNames, Tooltip } from '@talend/design-system';
+import { randomUUID } from '@talend/utils';
+
 import ActionBar from '../ActionBar';
 import Action from '../Actions/Action';
-import TabBar from '../TabBar';
-import Inject from '../Inject';
 import EditableText from '../EditableText';
+import Inject from '../Inject';
+import TabBar from '../TabBar';
 import { getTheme } from '../theme';
-import { randomUUID } from '@talend/utils';
 
 import theme from './Drawer.module.scss';
 
@@ -325,6 +328,10 @@ function Drawer({
 		}
 		activeTabItem = get(activeTab, 'footerActions', {});
 	}
+	const combinedFooterProps = combinedFooterActions(onCancelAction, footerActions, activeTabItem);
+	const displayFooter = Object.values(combinedFooterProps.actions).some(
+		footerAction => !!footerAction.length,
+	);
 
 	return (
 		<DrawerContainer
@@ -349,12 +356,11 @@ function Drawer({
 			)}
 			<div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, overflow: 'hidden' }}>
 				<DrawerContent>{children}</DrawerContent>
-				<div className={css('tc-drawer-actionbar-container')}>
-					<ActionBar
-						{...combinedFooterActions(onCancelAction, footerActions, activeTabItem)}
-						className={css('tc-drawer-actionbar')}
-					/>
-				</div>
+				{displayFooter && (
+					<div className={css('tc-drawer-actionbar-container')}>
+						<ActionBar {...combinedFooterProps} className={css('tc-drawer-actionbar')} />
+					</div>
+				)}
 			</div>
 		</DrawerContainer>
 	);

diff --git a/packages/components/src/Drawer/Drawer.module.scss b/packages/components/src/Drawer/Drawer.module.scss
@@ -1,20 +1,14 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-// rewrite using design tokens
 @use '~@talend/design-tokens/lib/tokens';
 
-$tc-drawer-initial-offset: 1000px !default;
 $tc-drawer-bgcolor: tokens.$coral-color-neutral-background !default;
-$tc-drawer-transition-duration: 230ms !default;
-$tc-drawer-transition-easing: cubic-bezier(0.18, 0.89, 0.32, 1.28) !default;
-$tc-drawer-padding: $padding-large !default;
+$tc-drawer-padding: tokens.$coral-spacing-m !default;
 $tc-drawer-header-height: 3.4375rem !default;
 $tc-drawer-header-color: tokens.$coral-color-neutral-text !default;
 $tc-drawer-header-background: tokens.$coral-color-neutral-background !default;
 $tc-drawer-header-border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak !default;
 $tc-drawer-tabs-background: tokens.$coral-color-accent-background-weak !default;
-$tc-drawer-content-max-width: 40.625rem !default;
 $tc-action-bar-background-color: tokens.$coral-color-neutral-background-medium !default;
-$tc-drawer-z-index: $drawer-z-index !default;
+$tc-drawer-z-index: tokens.$coral-elevation-layer-standard-front !default;
 
 .tc-drawer {
 	pointer-events: all;
@@ -24,30 +18,18 @@ $tc-drawer-z-index: $drawer-z-index !default;
 	top: 0;
 	right: 0;
 	bottom: 0;
-	width: 50vw;
+	width: tokens.$coral-sizing-maximal;
 	z-index: $tc-drawer-z-index;
 }
 
-@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
-	.tc-drawer {
-		width: 40vw;
-	}
-}
-
-@media (min-width: $screen-lg-min) {
-	.tc-drawer {
-		width: 30vw;
-	}
-}
-
 .tc-drawer-container {
 	display: flex;
 	flex-direction: column;
 	height: 100%;
 }
 
 .tc-drawer-tabs-container {
-	background-color: $tc-drawer-tabs-background;
+	margin: tokens.$coral-spacing-xs tokens.$coral-spacing-xs 0 tokens.$coral-spacing-xs;
 }
 
 .tc-drawer-actionbar {
@@ -58,27 +40,6 @@ $tc-drawer-z-index: $drawer-z-index !default;
 	width: 100%;
 }
 
-@media screen and (min-width: $screen-xs-max) {
-	.drawer-stacked {
-		.tc-drawer-header-title,
-		.tc-drawer-tabs,
-		.tc-drawer-content-wrapper,
-		.tc-drawer-actionbar,
-		.tc-drawer-footer > nav {
-			width: $tc-drawer-content-max-width;
-			margin: 0 auto;
-		}
-
-		:global {
-			.tc-actionbar-container {
-				margin: 0 auto;
-				padding: 0 $tc-drawer-padding;
-				width: $tc-drawer-content-max-width;
-			}
-		}
-	}
-}
-
 .tc-drawer-header {
 	background-color: $tc-drawer-header-background;
 	border-bottom: $tc-drawer-header-border;
@@ -144,13 +105,12 @@ $tc-drawer-z-index: $drawer-z-index !default;
 	}
 
 	&-subtitle {
-		padding-top: $padding-smaller;
+		padding-top: tokens.$coral-spacing-xxs;
 	}
 }
 
 .tc-drawer-header-with-tabs {
-	padding: 0;
-	background-color: tokens.$coral-color-neutral-background;
+	margin: 0 tokens.$coral-spacing-xs -0.4rem tokens.$coral-spacing-xs;
 }
 
 .tc-drawer-content {
@@ -167,7 +127,7 @@ $tc-drawer-z-index: $drawer-z-index !default;
 
 .tc-drawer-footer,
 .tc-drawer-actionbar-container {
-	padding: $padding-small $tc-drawer-padding;
+	padding: tokens.$coral-spacing-xs tokens.$coral-spacing-m;
 	background: $tc-action-bar-background-color;
 
 	:global {

diff --git a/packages/components/src/Drawer/Drawer.stories.js b/packages/components/src/Drawer/Drawer.stories.js
@@ -295,6 +295,29 @@ export const Layout2Columns = () => (
 	</Layout>
 );
 
+export const WithoutFooterActions = () => {
+	const drawersWithoutFooterActions = (
+		<Drawer title="Im drawer 2" footerActions={{}} key="drawer-2">
+			<h1>Hello drawer 2</h1>
+			<p>The scroll is defined by the content</p>
+			<h1>Hello drawer 3</h1>
+			{scrollableContent()}
+		</Drawer>
+	);
+
+	return (
+		<Layout
+			header={header}
+			mode="TwoColumns"
+			one={sidePanel}
+			drawers={[drawersWithoutFooterActions]}
+		>
+			<span>zone with drawer</span>
+			{twentyRows}
+		</Layout>
+	);
+};
+
 export const WithEditableHeader = () => (
 	<Layout header={header} mode="TwoColumns" one={sidePanel} drawers={editableDrawers}>
 		<span>zone with drawer</span>
@@ -639,7 +662,7 @@ export const WithSubtitleComponent = () => {
 			header={header}
 			mode="OneColumn"
 			drawers={[
-				<Drawer key="drawer-1">
+				<Drawer.Container key="drawer-1">
 					<Drawer.Title
 						title="Im drawer 1"
 						subtitle="Drawer subtitle"
@@ -652,9 +675,11 @@ export const WithSubtitleComponent = () => {
 						onCancelAction={onCancelAction}
 						editable
 					/>
-					<h1>Hello drawer 1</h1>
-					<p>You should not being able to read this because I'm first</p>
-				</Drawer>,
+					<Drawer.Content>
+						<h1>Hello drawer 1</h1>
+						<p>You should not being able to read this because I'm first</p>
+					</Drawer.Content>
+				</Drawer.Container>,
 			]}
 		>
 			<span>Select subtitle tag variants</span>

diff --git a/packages/components/src/Drawer/__snapshots__/Drawer.test.js.snap b/packages/components/src/Drawer/__snapshots__/Drawer.test.js.snap
@@ -23,13 +23,6 @@ exports[`Drawer should render 1`] = `
           </h1>
         </div>
       </div>
-      <div
-        class="tc-drawer-actionbar-container theme-tc-drawer-actionbar-container"
-      >
-        <div
-          class="theme-tc-actionbar-container tc-actionbar-container nav tc-drawer-actionbar theme-tc-drawer-actionbar"
-        />
-      </div>
     </div>
   </div>
 </div>

diff --git a/packages/components/src/WithDrawer/__snapshots__/withDrawer.test.js.snap b/packages/components/src/WithDrawer/__snapshots__/withDrawer.test.js.snap
@@ -55,13 +55,6 @@ exports[`WithDrawer should render 1`] = `
                 test
               </div>
             </div>
-            <div
-              class="tc-drawer-actionbar-container theme-tc-drawer-actionbar-container"
-            >
-              <div
-                class="theme-tc-actionbar-container tc-actionbar-container nav tc-drawer-actionbar theme-tc-drawer-actionbar"
-              />
-            </div>
           </div>
         </div>
       </div>