From 788e8a0ca2c3e60306cb59790d89736cde8fe209 Mon Sep 17 00:00:00 2001 From: Gbacc Date: Fri, 9 Feb 2024 10:19:56 +0100 Subject: [PATCH] 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 --- .changeset/cyan-cars-fix.md | 5 ++ .../components/src/Drawer/Drawer.component.js | 32 ++++++----- .../components/src/Drawer/Drawer.module.scss | 54 +++---------------- .../components/src/Drawer/Drawer.stories.js | 33 ++++++++++-- .../Drawer/__snapshots__/Drawer.test.js.snap | 7 --- .../__snapshots__/withDrawer.test.js.snap | 7 --- 6 files changed, 60 insertions(+), 78 deletions(-) create mode 100644 .changeset/cyan-cars-fix.md diff --git a/.changeset/cyan-cars-fix.md b/.changeset/cyan-cars-fix.md new file mode 100644 index 00000000000..5118a4a3532 --- /dev/null +++ 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 index 28c7fbd4d90..6b2474df21b 100644 --- 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 ( {children} -
- -
+ {displayFooter && ( +
+ +
+ )} ); diff --git a/packages/components/src/Drawer/Drawer.module.scss b/packages/components/src/Drawer/Drawer.module.scss index 870bfb9efc6..871bf37c32b 100644 --- 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,22 +18,10 @@ $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; @@ -47,7 +29,7 @@ $tc-drawer-z-index: $drawer-z-index !default; } .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 index 306ff0eacab..307f5360abb 100644 --- a/packages/components/src/Drawer/Drawer.stories.js +++ b/packages/components/src/Drawer/Drawer.stories.js @@ -295,6 +295,29 @@ export const Layout2Columns = () => ( ); +export const WithoutFooterActions = () => { + const drawersWithoutFooterActions = ( + +

Hello drawer 2

+

The scroll is defined by the content

+

Hello drawer 3

+ {scrollableContent()} + + ); + + return ( + + zone with drawer + {twentyRows} + + ); +}; + export const WithEditableHeader = () => ( zone with drawer @@ -639,7 +662,7 @@ export const WithSubtitleComponent = () => { header={header} mode="OneColumn" drawers={[ - + { onCancelAction={onCancelAction} editable /> -

Hello drawer 1

-

You should not being able to read this because I'm first

- , + +

Hello drawer 1

+

You should not being able to read this because I'm first

+ + , ]} > Select subtitle tag variants diff --git a/packages/components/src/Drawer/__snapshots__/Drawer.test.js.snap b/packages/components/src/Drawer/__snapshots__/Drawer.test.js.snap index 7495e505f62..4259d4ee393 100644 --- 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`] = ` -
-
-
diff --git a/packages/components/src/WithDrawer/__snapshots__/withDrawer.test.js.snap b/packages/components/src/WithDrawer/__snapshots__/withDrawer.test.js.snap index d1061b1d36a..f40ba9fd3c0 100644 --- 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 -
-
-