From e5d3f7aa6559507289dd43d8a11d155046190ce0 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Wed, 10 Jan 2024 16:00:33 -0300 Subject: [PATCH 01/18] feat(fuselage): `Bubble` (wip) --- .../src/components/Bubble/Bubble.spec.tsx | 31 ++++++++++++ .../src/components/Bubble/Bubble.stories.tsx | 23 +++++++++ .../src/components/Bubble/Bubble.styles.scss | 33 +++++++++++++ .../fuselage/src/components/Bubble/Bubble.tsx | 48 +++++++++++++++++++ .../fuselage/src/components/Bubble/index.ts | 1 + packages/fuselage/src/components/index.scss | 1 + packages/fuselage/src/components/index.ts | 1 + 7 files changed, 138 insertions(+) create mode 100644 packages/fuselage/src/components/Bubble/Bubble.spec.tsx create mode 100644 packages/fuselage/src/components/Bubble/Bubble.stories.tsx create mode 100644 packages/fuselage/src/components/Bubble/Bubble.styles.scss create mode 100644 packages/fuselage/src/components/Bubble/Bubble.tsx create mode 100644 packages/fuselage/src/components/Bubble/index.ts diff --git a/packages/fuselage/src/components/Bubble/Bubble.spec.tsx b/packages/fuselage/src/components/Bubble/Bubble.spec.tsx new file mode 100644 index 0000000000..088d7d0538 --- /dev/null +++ b/packages/fuselage/src/components/Bubble/Bubble.spec.tsx @@ -0,0 +1,31 @@ +import { composeStories } from '@storybook/testing-react'; +import { render } from '@testing-library/react'; +import { axe } from 'jest-axe'; +import React from 'react'; + +import * as stories from './Bubble.stories'; + +const testCases = Object.values(composeStories(stories)).map((Story) => [ + Story.storyName || 'Story', + Story, +]); + +describe('[Bubble Rendering]', () => { + test.each(testCases)( + `renders %s without crashing`, + async (_storyname, Story) => { + const tree = render(); + expect(tree.baseElement).toMatchSnapshot(); + } + ); + + test.each(testCases)( + '%s should have no a11y violations', + async (_storyname, Story) => { + const { container } = render(); + + const results = await axe(container); + expect(results).toHaveNoViolations(); + } + ); +}); diff --git a/packages/fuselage/src/components/Bubble/Bubble.stories.tsx b/packages/fuselage/src/components/Bubble/Bubble.stories.tsx new file mode 100644 index 0000000000..3057bf7735 --- /dev/null +++ b/packages/fuselage/src/components/Bubble/Bubble.stories.tsx @@ -0,0 +1,23 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import React from 'react'; + +import Bubble from '.'; + +export default { + title: 'Components/Bubble', + component: Bubble, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + children: 'New messages', + icon: 'arrow-down', +}; +export const WithDismiss = Template.bind({}); +WithDismiss.args = { + children: 'New messages', + icon: 'arrow-down', + onDismiss: () => console.log('dismiss'), +}; diff --git a/packages/fuselage/src/components/Bubble/Bubble.styles.scss b/packages/fuselage/src/components/Bubble/Bubble.styles.scss new file mode 100644 index 0000000000..a3deae7e44 --- /dev/null +++ b/packages/fuselage/src/components/Bubble/Bubble.styles.scss @@ -0,0 +1,33 @@ +@use '../../styles/colors.scss'; +@use '../../styles/lengths.scss'; +@use '../../styles/typography.scss'; + +.rcx-button.rcx-bubble { + @include typography.use-font-scale(c2); + + display: flex; + align-items: center; + + height: lengths.size(28); + + padding: lengths.padding(none); + + cursor: pointer; + text-align: center; + + border-radius: 20px; +} + +.rcx-bubble { + &--content, + &--dismiss { + display: flex; + justify-content: center; + align-items: center; + + padding-inline-start: lengths.padding(12); + padding-inline-end: lengths.padding(16); + + transform: none !important; + } +} diff --git a/packages/fuselage/src/components/Bubble/Bubble.tsx b/packages/fuselage/src/components/Bubble/Bubble.tsx new file mode 100644 index 0000000000..b96978d4a3 --- /dev/null +++ b/packages/fuselage/src/components/Bubble/Bubble.tsx @@ -0,0 +1,48 @@ +import type { Keys as IconName } from '@rocket.chat/icons'; +import type { ButtonHTMLAttributes, ReactNode } from 'react'; +import React from 'react'; + +import { Icon } from '../Icon'; + +type BubbleProps = { + children: ReactNode; + onClick: () => void; + icon: IconName; + onDismiss?: () => void; +} & ButtonHTMLAttributes; + +const Bubble = ({ + children, + onClick, + icon, + onDismiss, + ...props +}: BubbleProps) => { + console.log(''); + return ( + + ); +}; + +export default Bubble; diff --git a/packages/fuselage/src/components/Bubble/index.ts b/packages/fuselage/src/components/Bubble/index.ts new file mode 100644 index 0000000000..1c2c1c422a --- /dev/null +++ b/packages/fuselage/src/components/Bubble/index.ts @@ -0,0 +1 @@ +export { default } from './Bubble'; diff --git a/packages/fuselage/src/components/index.scss b/packages/fuselage/src/components/index.scss index 5b762d00d3..748bb20a34 100644 --- a/packages/fuselage/src/components/index.scss +++ b/packages/fuselage/src/components/index.scss @@ -5,6 +5,7 @@ @import './Badge/Badge.styles.scss'; @import './Box/Box.styles.scss'; @import './Button/Button.styles.scss'; +@import './Bubble/Bubble.styles.scss'; @import './ButtonGroup/ButtonGroup.styles.scss'; @import './Callout/Callout.styles.scss'; @import './Card/Card.styles.scss'; diff --git a/packages/fuselage/src/components/index.ts b/packages/fuselage/src/components/index.ts index 6b4f9e3f0c..d64021f6b1 100644 --- a/packages/fuselage/src/components/index.ts +++ b/packages/fuselage/src/components/index.ts @@ -8,6 +8,7 @@ export { default as Banner } from './Banner'; export { default as Box } from './Box'; export { useArrayLikeClassNameProp } from '../hooks/useArrayLikeClassNameProp'; export { default as Button, ActionButton, IconButton } from './Button'; +export * from './Bubble'; export * from './ButtonGroup'; export * from './Callout'; export * from './Card'; From f2e9d9732626e0a341e7558c46ae305bbf12b2d3 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 12 Jan 2024 11:43:59 -0300 Subject: [PATCH 02/18] feat: bubble-group to handle button states separately --- .../src/components/Bubble/Bubble.styles.scss | 38 +++++++++----- .../fuselage/src/components/Bubble/Bubble.tsx | 49 +++++++++---------- .../src/styles/mixins/interactivity.scss | 9 ++++ 3 files changed, 57 insertions(+), 39 deletions(-) diff --git a/packages/fuselage/src/components/Bubble/Bubble.styles.scss b/packages/fuselage/src/components/Bubble/Bubble.styles.scss index a3deae7e44..cc104d9ad0 100644 --- a/packages/fuselage/src/components/Bubble/Bubble.styles.scss +++ b/packages/fuselage/src/components/Bubble/Bubble.styles.scss @@ -2,32 +2,44 @@ @use '../../styles/lengths.scss'; @use '../../styles/typography.scss'; -.rcx-button.rcx-bubble { - @include typography.use-font-scale(c2); +@use '../../styles/variables/buttons.scss' as buttonColors; +@use '../../styles/primitives/button.scss'; +@use '../../styles/mixins/interactivity.scss'; +.rcx-bubble { display: flex; align-items: center; - height: lengths.size(28); - - padding: lengths.padding(none); - - cursor: pointer; - text-align: center; - - border-radius: 20px; -} - -.rcx-bubble { &--content, &--dismiss { + @include typography.use-font-scale(c2); + @include button.kind-variant(buttonColors.$primary); + @include clickable; + @include click-animation(); + display: flex; justify-content: center; align-items: center; + height: lengths.size(28); + padding-inline-start: lengths.padding(12); padding-inline-end: lengths.padding(16); transform: none !important; + + border-radius: 20px; + } + + &--group { + :first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + :last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } } } diff --git a/packages/fuselage/src/components/Bubble/Bubble.tsx b/packages/fuselage/src/components/Bubble/Bubble.tsx index b96978d4a3..e8b9f099d6 100644 --- a/packages/fuselage/src/components/Bubble/Bubble.tsx +++ b/packages/fuselage/src/components/Bubble/Bubble.tsx @@ -17,32 +17,29 @@ const Bubble = ({ icon, onDismiss, ...props -}: BubbleProps) => { - console.log(''); - return ( - - ); -}; + {onDismiss && ( + + )} + +); export default Bubble; diff --git a/packages/fuselage/src/styles/mixins/interactivity.scss b/packages/fuselage/src/styles/mixins/interactivity.scss index 6d97f20137..bf38f90a6e 100644 --- a/packages/fuselage/src/styles/mixins/interactivity.scss +++ b/packages/fuselage/src/styles/mixins/interactivity.scss @@ -8,3 +8,12 @@ cursor: not-allowed; } } + +@mixin click-animation { + @include on-active { + > * { + transform: translateY(1px); + } + @content; + } +} From 5bf8b52debd3b32f95e4b29d942e1f0554fade05 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 12 Jan 2024 12:24:55 -0300 Subject: [PATCH 03/18] chore: click-animation mixin --- .../src/components/Button/Button.styles.scss | 13 +++---------- .../fuselage/src/styles/mixins/interactivity.scss | 6 +++--- packages/fuselage/src/styles/primitives/button.scss | 4 ---- 3 files changed, 6 insertions(+), 17 deletions(-) diff --git a/packages/fuselage/src/components/Button/Button.styles.scss b/packages/fuselage/src/components/Button/Button.styles.scss index 342d98efa5..99367389f0 100644 --- a/packages/fuselage/src/components/Button/Button.styles.scss +++ b/packages/fuselage/src/components/Button/Button.styles.scss @@ -4,6 +4,7 @@ @use '../../styles/variables/buttons.scss' as colors; @use '../../styles/primitives/button.scss'; @use '../../styles/mixins/size.scss'; +@use '../../styles/mixins/interactivity.scss'; @import '../../styles/mixins/states.scss'; .rcx-button { @@ -33,21 +34,13 @@ } } - @mixin click-animation() { - @include on-active { - > *:not(div[role='status']) { - transform: translateY(1px); - } - } - } - display: inline-block; text-align: center; white-space: nowrap; text-decoration: none; - @include click-animation(); + @include click-animation($excludeRole: 'status'); .rcx-button--content { display: inline-block; @@ -111,7 +104,7 @@ &--icon { @include button.kind-variant(colors.$icon); - @include click-animation(); + @include click-animation('status'); padding: 0; diff --git a/packages/fuselage/src/styles/mixins/interactivity.scss b/packages/fuselage/src/styles/mixins/interactivity.scss index bf38f90a6e..dbe8e7d5af 100644 --- a/packages/fuselage/src/styles/mixins/interactivity.scss +++ b/packages/fuselage/src/styles/mixins/interactivity.scss @@ -9,11 +9,11 @@ } } -@mixin click-animation { +@mixin click-animation($excludeRole: false) { @include on-active { - > * { + > *:not([role='#{$excludeRole}']), + > *:not[aria-disabled='true'] { transform: translateY(1px); } - @content; } } diff --git a/packages/fuselage/src/styles/primitives/button.scss b/packages/fuselage/src/styles/primitives/button.scss index a495ea177b..4cbbafef70 100644 --- a/packages/fuselage/src/styles/primitives/button.scss +++ b/packages/fuselage/src/styles/primitives/button.scss @@ -42,9 +42,5 @@ color: map.get($colors, disabled-color); border-color: map.get($colors, disabled-border-color); background-color: map.get($colors, disabled-background-color); - - .rcx-button--content { - transform: none !important; - } } } From 8679acf777352a79e4f45ae25a3fd24b5847e23b Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 12 Jan 2024 12:29:49 -0300 Subject: [PATCH 04/18] chore: changeset --- .changeset/ninety-turkeys-happen.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/ninety-turkeys-happen.md diff --git a/.changeset/ninety-turkeys-happen.md b/.changeset/ninety-turkeys-happen.md new file mode 100644 index 0000000000..613c97c7e1 --- /dev/null +++ b/.changeset/ninety-turkeys-happen.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/fuselage": minor +--- + +feat(fuselage): new `Bubble` component From 6f40133767aa1e690c090ffac687aaff2931c043 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 12 Jan 2024 12:46:01 -0300 Subject: [PATCH 05/18] chore: a11y --- packages/fuselage/src/components/Bubble/Bubble.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/fuselage/src/components/Bubble/Bubble.tsx b/packages/fuselage/src/components/Bubble/Bubble.tsx index e8b9f099d6..ae505ccf7f 100644 --- a/packages/fuselage/src/components/Bubble/Bubble.tsx +++ b/packages/fuselage/src/components/Bubble/Bubble.tsx @@ -28,7 +28,12 @@ const Bubble = ({ {children} {onDismiss && ( - + + + +`; + +exports[`[Bubble Rendering] renders WithDismiss without crashing 1`] = ` + +
+
+ + +
+
+ +`; From 9a9a8348e109a62478a743aab88ae72c2c3e132a Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 12 Jan 2024 14:59:51 -0300 Subject: [PATCH 07/18] fix: click-animation --- packages/fuselage/src/styles/mixins/interactivity.scss | 3 +-- packages/fuselage/src/styles/primitives/button.scss | 4 ++++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/fuselage/src/styles/mixins/interactivity.scss b/packages/fuselage/src/styles/mixins/interactivity.scss index dbe8e7d5af..a22159c0f4 100644 --- a/packages/fuselage/src/styles/mixins/interactivity.scss +++ b/packages/fuselage/src/styles/mixins/interactivity.scss @@ -11,8 +11,7 @@ @mixin click-animation($excludeRole: false) { @include on-active { - > *:not([role='#{$excludeRole}']), - > *:not[aria-disabled='true'] { + > *:not([role='#{$excludeRole}']) { transform: translateY(1px); } } diff --git a/packages/fuselage/src/styles/primitives/button.scss b/packages/fuselage/src/styles/primitives/button.scss index 4cbbafef70..a495ea177b 100644 --- a/packages/fuselage/src/styles/primitives/button.scss +++ b/packages/fuselage/src/styles/primitives/button.scss @@ -42,5 +42,9 @@ color: map.get($colors, disabled-color); border-color: map.get($colors, disabled-border-color); background-color: map.get($colors, disabled-background-color); + + .rcx-button--content { + transform: none !important; + } } } From 4517e36bff1bf58870564478520032b7cf690d7c Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 12 Jan 2024 15:51:01 -0300 Subject: [PATCH 08/18] chore: improve stories --- .../src/components/Bubble/Bubble.stories.tsx | 18 ++++++++++++++---- .../fuselage/src/components/Bubble/Bubble.tsx | 2 +- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/fuselage/src/components/Bubble/Bubble.stories.tsx b/packages/fuselage/src/components/Bubble/Bubble.stories.tsx index 3057bf7735..c78c97b8db 100644 --- a/packages/fuselage/src/components/Bubble/Bubble.stories.tsx +++ b/packages/fuselage/src/components/Bubble/Bubble.stories.tsx @@ -1,3 +1,4 @@ +import { action } from '@storybook/addon-actions'; import type { ComponentMeta, ComponentStory } from '@storybook/react'; import React from 'react'; @@ -10,14 +11,23 @@ export default { const Template: ComponentStory = (args) => ; -export const Default = Template.bind({}); -Default.args = { +export const IconAndLabel = Template.bind({}); +IconAndLabel.args = { children: 'New messages', + onClick: action('click'), icon: 'arrow-down', }; -export const WithDismiss = Template.bind({}); -WithDismiss.args = { + +export const Dismissable = Template.bind({}); +Dismissable.args = { children: 'New messages', icon: 'arrow-down', + onClick: action('click'), onDismiss: () => console.log('dismiss'), }; + +export const LabelOnly = Template.bind({}); +LabelOnly.args = { + children: 'See new messages', + onClick: action('click'), +}; diff --git a/packages/fuselage/src/components/Bubble/Bubble.tsx b/packages/fuselage/src/components/Bubble/Bubble.tsx index ae505ccf7f..d8b0646776 100644 --- a/packages/fuselage/src/components/Bubble/Bubble.tsx +++ b/packages/fuselage/src/components/Bubble/Bubble.tsx @@ -7,7 +7,7 @@ import { Icon } from '../Icon'; type BubbleProps = { children: ReactNode; onClick: () => void; - icon: IconName; + icon?: IconName; onDismiss?: () => void; } & ButtonHTMLAttributes; From 86d97419ab094e73bbbe4861705850c46bc55878 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 12 Jan 2024 15:54:21 -0300 Subject: [PATCH 09/18] chore: HTML attributes props --- packages/fuselage/src/components/Bubble/Bubble.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/fuselage/src/components/Bubble/Bubble.tsx b/packages/fuselage/src/components/Bubble/Bubble.tsx index d8b0646776..20326b413c 100644 --- a/packages/fuselage/src/components/Bubble/Bubble.tsx +++ b/packages/fuselage/src/components/Bubble/Bubble.tsx @@ -1,5 +1,5 @@ import type { Keys as IconName } from '@rocket.chat/icons'; -import type { ButtonHTMLAttributes, ReactNode } from 'react'; +import type { AllHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react'; import React from 'react'; import { Icon } from '../Icon'; @@ -9,21 +9,26 @@ type BubbleProps = { onClick: () => void; icon?: IconName; onDismiss?: () => void; -} & ButtonHTMLAttributes; + contentProps?: ButtonHTMLAttributes; + dismissProps?: ButtonHTMLAttributes; +} & AllHTMLAttributes; const Bubble = ({ children, onClick, icon, onDismiss, + contentProps, + dismissProps, ...props }: BubbleProps) => (
- @@ -32,7 +37,7 @@ const Bubble = ({ aria-label={`Dismiss ${children}`} className='rcx-bubble--dismiss' onClick={onClick} - {...props} + {...dismissProps} > Date: Fri, 12 Jan 2024 15:58:07 -0300 Subject: [PATCH 10/18] chore: dismiss action --- .../fuselage/src/components/Bubble/Bubble.stories.tsx | 2 +- packages/fuselage/src/components/Bubble/Bubble.tsx | 11 ++--------- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/packages/fuselage/src/components/Bubble/Bubble.stories.tsx b/packages/fuselage/src/components/Bubble/Bubble.stories.tsx index c78c97b8db..d883ae68e6 100644 --- a/packages/fuselage/src/components/Bubble/Bubble.stories.tsx +++ b/packages/fuselage/src/components/Bubble/Bubble.stories.tsx @@ -23,7 +23,7 @@ Dismissable.args = { children: 'New messages', icon: 'arrow-down', onClick: action('click'), - onDismiss: () => console.log('dismiss'), + onDismiss: action('dismiss'), }; export const LabelOnly = Template.bind({}); diff --git a/packages/fuselage/src/components/Bubble/Bubble.tsx b/packages/fuselage/src/components/Bubble/Bubble.tsx index 20326b413c..74a32d1680 100644 --- a/packages/fuselage/src/components/Bubble/Bubble.tsx +++ b/packages/fuselage/src/components/Bubble/Bubble.tsx @@ -36,17 +36,10 @@ const Bubble = ({ )}
From 89a9058b186457a5e941d6950b1736e75b55dd8d Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 12 Jan 2024 17:38:11 -0300 Subject: [PATCH 11/18] chore: update snapshot --- .../Bubble/__snapshots__/Bubble.spec.tsx.snap | 64 +++++++++++++++---- 1 file changed, 52 insertions(+), 12 deletions(-) diff --git a/packages/fuselage/src/components/Bubble/__snapshots__/Bubble.spec.tsx.snap b/packages/fuselage/src/components/Bubble/__snapshots__/Bubble.spec.tsx.snap index c4f9eaaff7..e2518826bb 100644 --- a/packages/fuselage/src/components/Bubble/__snapshots__/Bubble.spec.tsx.snap +++ b/packages/fuselage/src/components/Bubble/__snapshots__/Bubble.spec.tsx.snap @@ -1,10 +1,10 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`[Bubble Rendering] renders Default without crashing 1`] = ` +exports[`[Bubble Rendering] renders Dismissable without crashing 1`] = `
+
`; -exports[`[Bubble Rendering] renders WithDismiss without crashing 1`] = ` +exports[`[Bubble Rendering] renders IconAndLabel without crashing 1`] = `
+
+
+ +`; + +exports[`[Bubble Rendering] renders LabelOnly without crashing 1`] = ` + +
+
`; + +exports[`[Bubble Rendering] renders RichContentTest without crashing 1`] = ` + + + +`; From 8d5b208aa25ee33db9be05bdf2bbcdb245bc2314 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Mon, 15 Jan 2024 12:03:48 -0300 Subject: [PATCH 12/18] style --- packages/fuselage/src/components/Bubble/Bubble.styles.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/fuselage/src/components/Bubble/Bubble.styles.scss b/packages/fuselage/src/components/Bubble/Bubble.styles.scss index cc104d9ad0..d1b73a0545 100644 --- a/packages/fuselage/src/components/Bubble/Bubble.styles.scss +++ b/packages/fuselage/src/components/Bubble/Bubble.styles.scss @@ -26,8 +26,6 @@ padding-inline-start: lengths.padding(12); padding-inline-end: lengths.padding(16); - transform: none !important; - border-radius: 20px; } From 866e27b3a1b05f87891613c351c4c34850799165 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Mon, 15 Jan 2024 12:29:13 -0300 Subject: [PATCH 13/18] update snapshot --- .../Bubble/__snapshots__/Bubble.spec.tsx.snap | 22 ------------------- 1 file changed, 22 deletions(-) diff --git a/packages/fuselage/src/components/Bubble/__snapshots__/Bubble.spec.tsx.snap b/packages/fuselage/src/components/Bubble/__snapshots__/Bubble.spec.tsx.snap index e2518826bb..ef2a291c0a 100644 --- a/packages/fuselage/src/components/Bubble/__snapshots__/Bubble.spec.tsx.snap +++ b/packages/fuselage/src/components/Bubble/__snapshots__/Bubble.spec.tsx.snap @@ -76,25 +76,3 @@ exports[`[Bubble Rendering] renders LabelOnly without crashing 1`] = ` `; - -exports[`[Bubble Rendering] renders RichContentTest without crashing 1`] = ` - - - -`; From 85f3382430ae2ad268c9141a5227109a4ec8389a Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Mon, 15 Jan 2024 17:00:08 -0300 Subject: [PATCH 14/18] feat: `extra-large` border-radius --- .../src/components/Bubble/Bubble.styles.scss | 2 +- packages/fuselage/src/styles/lengths.scss | 12 +++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/fuselage/src/components/Bubble/Bubble.styles.scss b/packages/fuselage/src/components/Bubble/Bubble.styles.scss index d1b73a0545..95109635b6 100644 --- a/packages/fuselage/src/components/Bubble/Bubble.styles.scss +++ b/packages/fuselage/src/components/Bubble/Bubble.styles.scss @@ -26,7 +26,7 @@ padding-inline-start: lengths.padding(12); padding-inline-end: lengths.padding(16); - border-radius: 20px; + border-radius: lengths.border-radius(extra-large); } &--group { diff --git a/packages/fuselage/src/styles/lengths.scss b/packages/fuselage/src/styles/lengths.scss index 992168cfd3..9dd2275940 100644 --- a/packages/fuselage/src/styles/lengths.scss +++ b/packages/fuselage/src/styles/lengths.scss @@ -87,6 +87,7 @@ $border-radius-sizes: ( 'small': 2, 'medium': 4, 'large': 8, + 'extra-large': 20, ); @function border-radius($value) { @@ -94,7 +95,16 @@ $border-radius-sizes: ( @return 0; } @else if $value == 'full' { @return 9999px; - } @else if $value == 'small' or $value == 'medium' or $value == 'large' { + } @else if + $value == + 'small' or + $value == + 'medium' or + $value == + 'large' or + $value == + 'extra-large' + { @return functions.theme( 'border-radius-#{$value}', functions.to-rem(map.get($border-radius-sizes, $value)) From 88124e5f5813afb65f8e88b303bed47728a305fa Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 16 Jan 2024 14:51:47 -0300 Subject: [PATCH 15/18] chore: export --- packages/fuselage/src/components/Bubble/Bubble.stories.tsx | 4 ++-- packages/fuselage/src/components/Bubble/Bubble.styles.scss | 2 +- packages/fuselage/src/components/Bubble/index.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/fuselage/src/components/Bubble/Bubble.stories.tsx b/packages/fuselage/src/components/Bubble/Bubble.stories.tsx index d883ae68e6..fa70b2f056 100644 --- a/packages/fuselage/src/components/Bubble/Bubble.stories.tsx +++ b/packages/fuselage/src/components/Bubble/Bubble.stories.tsx @@ -2,10 +2,10 @@ import { action } from '@storybook/addon-actions'; import type { ComponentMeta, ComponentStory } from '@storybook/react'; import React from 'react'; -import Bubble from '.'; +import { Bubble } from '../..'; export default { - title: 'Components/Bubble', + title: 'Data Display/Bubble', component: Bubble, } as ComponentMeta; diff --git a/packages/fuselage/src/components/Bubble/Bubble.styles.scss b/packages/fuselage/src/components/Bubble/Bubble.styles.scss index 95109635b6..dd8be595d2 100644 --- a/packages/fuselage/src/components/Bubble/Bubble.styles.scss +++ b/packages/fuselage/src/components/Bubble/Bubble.styles.scss @@ -15,7 +15,7 @@ @include typography.use-font-scale(c2); @include button.kind-variant(buttonColors.$primary); @include clickable; - @include click-animation(); + @include click-animation; display: flex; justify-content: center; diff --git a/packages/fuselage/src/components/Bubble/index.ts b/packages/fuselage/src/components/Bubble/index.ts index 1c2c1c422a..e98ca82b0e 100644 --- a/packages/fuselage/src/components/Bubble/index.ts +++ b/packages/fuselage/src/components/Bubble/index.ts @@ -1 +1 @@ -export { default } from './Bubble'; +export { default as Bubble } from './Bubble'; From 0ad7db133317c5a42b8dba38b8e4430e003f3a43 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 16 Jan 2024 17:10:49 -0300 Subject: [PATCH 16/18] chore: class modifiers --- .../fuselage/src/components/Bubble/Bubble.styles.scss | 6 +++--- packages/fuselage/src/components/Bubble/Bubble.tsx | 6 +++--- .../Bubble/__snapshots__/Bubble.spec.tsx.snap | 10 +++++----- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/fuselage/src/components/Bubble/Bubble.styles.scss b/packages/fuselage/src/components/Bubble/Bubble.styles.scss index dd8be595d2..9a7867f495 100644 --- a/packages/fuselage/src/components/Bubble/Bubble.styles.scss +++ b/packages/fuselage/src/components/Bubble/Bubble.styles.scss @@ -10,8 +10,8 @@ display: flex; align-items: center; - &--content, - &--dismiss { + &__content, + &__dismiss { @include typography.use-font-scale(c2); @include button.kind-variant(buttonColors.$primary); @include clickable; @@ -29,7 +29,7 @@ border-radius: lengths.border-radius(extra-large); } - &--group { + &__group { :first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; diff --git a/packages/fuselage/src/components/Bubble/Bubble.tsx b/packages/fuselage/src/components/Bubble/Bubble.tsx index 74a32d1680..2d29881829 100644 --- a/packages/fuselage/src/components/Bubble/Bubble.tsx +++ b/packages/fuselage/src/components/Bubble/Bubble.tsx @@ -24,18 +24,18 @@ const Bubble = ({ }: BubbleProps) => (
- {onDismiss && (