From 5fe84595926c3e1e6d334eb197bcfd72d423e4d4 Mon Sep 17 00:00:00 2001 From: Douglas Fabris Date: Thu, 1 Aug 2024 11:20:10 -0300 Subject: [PATCH] feat(fuselage): Introduce `Callout` actions (#1415) --- .changeset/sharp-paws-mix.md | 5 + packages/fuselage/.jest/setup.ts | 6 + .../components/Callout/Callout.stories.tsx | 16 +- .../components/Callout/Callout.styles.scss | 29 ++- .../src/components/Callout/Callout.tsx | 21 ++- .../__snapshots__/Callout.spec.tsx.snap | 174 +++++++++++++----- 6 files changed, 201 insertions(+), 50 deletions(-) create mode 100644 .changeset/sharp-paws-mix.md diff --git a/.changeset/sharp-paws-mix.md b/.changeset/sharp-paws-mix.md new file mode 100644 index 0000000000..a9ee90e3d1 --- /dev/null +++ b/.changeset/sharp-paws-mix.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/fuselage": minor +--- + +feat(fuselage): Introduce Callout actions diff --git a/packages/fuselage/.jest/setup.ts b/packages/fuselage/.jest/setup.ts index 9fa64ce408..d692d1688a 100644 --- a/packages/fuselage/.jest/setup.ts +++ b/packages/fuselage/.jest/setup.ts @@ -32,3 +32,9 @@ expect.extend({ }); expect.extend(toHaveNoViolations); + +window.ResizeObserver = jest.fn().mockImplementation(() => ({ + observe: jest.fn(), + unobserve: jest.fn(), + disconnect: jest.fn(), +})); diff --git a/packages/fuselage/src/components/Callout/Callout.stories.tsx b/packages/fuselage/src/components/Callout/Callout.stories.tsx index 5ba7510305..da5c968828 100644 --- a/packages/fuselage/src/components/Callout/Callout.stories.tsx +++ b/packages/fuselage/src/components/Callout/Callout.stories.tsx @@ -10,7 +10,7 @@ import { import type { ComponentStory, ComponentMeta } from '@storybook/react'; import React from 'react'; -import { Callout } from '../..'; +import { Button, ButtonGroup, Callout } from '../..'; import { setStoryDescription } from '../../helpers/setStoryDescription'; export default { @@ -87,3 +87,17 @@ CustomIcon.args = { title: 'This is a message with custom icon', icon: 'hash', }; + +export const WithActions: ComponentStory = (args) => ( + +); +WithActions.args = { + title: 'This is a generic title', + children: 'This is a generic description.', + actions: ( + + + + + ), +}; diff --git a/packages/fuselage/src/components/Callout/Callout.styles.scss b/packages/fuselage/src/components/Callout/Callout.styles.scss index dc143b3a27..e842ad1870 100644 --- a/packages/fuselage/src/components/Callout/Callout.styles.scss +++ b/packages/fuselage/src/components/Callout/Callout.styles.scss @@ -73,15 +73,36 @@ $callout-text-color: theme('callout-text-color', colors.font(default)); } &__wrapper { - display: flex; - overflow: hidden; - flex-flow: column nowrap; + + justify-content: space-between; + flex: 1 1 0; margin-inline-start: lengths.margin(12); - @include typography.use-font-scale(c1); + > :nth-child(2) { + margin-block-start: lengths.margin(12); + } + + &--large { + display: flex; + + overflow: hidden; + flex-direction: row; + align-items: center; + + > :nth-child(2) { + margin-block-start: lengths.margin(0); + } + } + } + + &__wrapper-content { + display: flex; + + overflow: hidden; + flex-flow: column nowrap; > :nth-child(2) { margin-block-start: lengths.margin(4); diff --git a/packages/fuselage/src/components/Callout/Callout.tsx b/packages/fuselage/src/components/Callout/Callout.tsx index 034fc4472f..14a06f4fe3 100644 --- a/packages/fuselage/src/components/Callout/Callout.tsx +++ b/packages/fuselage/src/components/Callout/Callout.tsx @@ -1,4 +1,5 @@ -import type { ComponentProps, ReactNode } from 'react'; +import { useResizeObserver } from '@rocket.chat/fuselage-hooks'; +import type { ComponentProps, ReactElement, ReactNode } from 'react'; import React from 'react'; import Box from '../Box'; @@ -9,16 +10,24 @@ type CalloutProps = Omit, 'type' | 'name'> & { title?: ReactNode; children?: ReactNode; icon?: ComponentProps['name']; + actions?: ReactElement; }; +const WRAPPER_LIMIT_SIZE = 420; + export const Callout = ({ type, title, children, icon, className, + actions, ...props }: CalloutProps) => { + const { ref, borderBoxSize } = useResizeObserver(); + const isLarge = + borderBoxSize.inlineSize && borderBoxSize.inlineSize >= WRAPPER_LIMIT_SIZE; + const defaultIcon = (type === 'info' && 'info-circled') || (type === 'success' && 'checkmark-circled') || @@ -28,6 +37,7 @@ export const Callout = ({ return ( - - {title && {title}} - {children && {children}} + + + {title && {title}} + {children && {children}} + + {actions && {actions}} ); diff --git a/packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap b/packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap index ac7449ea89..894f5f158a 100644 --- a/packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap +++ b/packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap @@ -16,14 +16,18 @@ exports[`[CheckBox Rendering] renders CustomIcon without crashing 1`] = ` class="rcx-box rcx-box--full rcx-callout__wrapper" >
- This is a message with custom icon -
-
- This is a generic description. +
+ This is a message with custom icon +
+
+ This is a generic description. +
@@ -47,14 +51,18 @@ exports[`[CheckBox Rendering] renders Danger without crashing 1`] = ` class="rcx-box rcx-box--full rcx-callout__wrapper" >
- This is a danger message -
-
- This is a generic description. +
+ This is a danger message +
+
+ This is a generic description. +
@@ -78,14 +86,18 @@ exports[`[CheckBox Rendering] renders Default without crashing 1`] = ` class="rcx-box rcx-box--full rcx-callout__wrapper" >
- This is a generic title -
-
- This is a generic description. +
+ This is a generic title +
+
+ This is a generic description. +
@@ -109,14 +121,18 @@ exports[`[CheckBox Rendering] renders Info without crashing 1`] = ` class="rcx-box rcx-box--full rcx-callout__wrapper" >
- This is a info message -
-
- This is a generic description. +
+ This is a info message +
+
+ This is a generic description. +
@@ -140,14 +156,18 @@ exports[`[CheckBox Rendering] renders Success without crashing 1`] = ` class="rcx-box rcx-box--full rcx-callout__wrapper" >
- This is a success message -
-
- This is a generic description. +
+ This is a success message +
+
+ This is a generic description. +
@@ -171,14 +191,82 @@ exports[`[CheckBox Rendering] renders Warning without crashing 1`] = ` class="rcx-box rcx-box--full rcx-callout__wrapper" >
+
+ This is a warning message +
+
+ This is a generic description. +
+
+ + + + +`; + +exports[`[CheckBox Rendering] renders WithActions without crashing 1`] = ` + +
+
+ +
+
- This is a warning message +
+ This is a generic title +
+
+ This is a generic description. +
- This is a generic description. +
+ + +
@@ -202,9 +290,13 @@ exports[`[CheckBox Rendering] renders WithDescriptionOnly without crashing 1`] = class="rcx-box rcx-box--full rcx-callout__wrapper" >
- This is a generic description. +
+ This is a generic description. +