From 44f85159922eb514e3c9a5400c22071b7d8ed5e8 Mon Sep 17 00:00:00 2001 From: Douglas Fabris Date: Tue, 10 Oct 2023 10:56:06 -0300 Subject: [PATCH 1/5] fix(fuselage): `ContextualbarAction` size (#1191) --- .changeset/cuddly-flowers-crash.md | 5 +++++ .../src/components/Contextualbar/ContextualbarAction.tsx | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/cuddly-flowers-crash.md diff --git a/.changeset/cuddly-flowers-crash.md b/.changeset/cuddly-flowers-crash.md new file mode 100644 index 0000000000..f7ed64daf6 --- /dev/null +++ b/.changeset/cuddly-flowers-crash.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/fuselage": patch +--- + +feat(fuselage): `ContextualbarAction` size diff --git a/packages/fuselage/src/components/Contextualbar/ContextualbarAction.tsx b/packages/fuselage/src/components/Contextualbar/ContextualbarAction.tsx index 9b2e7f91e7..0ee3e12f1c 100644 --- a/packages/fuselage/src/components/Contextualbar/ContextualbarAction.tsx +++ b/packages/fuselage/src/components/Contextualbar/ContextualbarAction.tsx @@ -12,7 +12,7 @@ const ContextualbarAction = ({ name, ...props }: ContextualbarActionProps): ReactElement => ( - + ); export default memo(ContextualbarAction); From 6df7d7abf63e522c92bd4004f05d49135aa09b33 Mon Sep 17 00:00:00 2001 From: Douglas Fabris Date: Fri, 13 Oct 2023 09:40:17 -0300 Subject: [PATCH 2/5] fix(fuselage): Remove underline prevention on anchor elements (#1193) --- .changeset/selfish-scissors-sit.md | 5 +++++ packages/fuselage/src/components/Field/Field.styles.scss | 2 -- packages/fuselage/src/components/States/States.styles.scss | 2 -- .../fuselage/src/styles/primitives/traits/rich-text.scss | 2 -- 4 files changed, 5 insertions(+), 6 deletions(-) create mode 100644 .changeset/selfish-scissors-sit.md diff --git a/.changeset/selfish-scissors-sit.md b/.changeset/selfish-scissors-sit.md new file mode 100644 index 0000000000..9aebc4ce16 --- /dev/null +++ b/.changeset/selfish-scissors-sit.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/fuselage": patch +--- + +fix(fuselage): Remove underline prevention on anchor elements diff --git a/packages/fuselage/src/components/Field/Field.styles.scss b/packages/fuselage/src/components/Field/Field.styles.scss index 54cfdc8dfc..c7ce7c8b95 100644 --- a/packages/fuselage/src/components/Field/Field.styles.scss +++ b/packages/fuselage/src/components/Field/Field.styles.scss @@ -64,8 +64,6 @@ @include typography.use-font-scale(p2); margin-block: lengths.margin(2); - text-decoration: none; - color: colors.font(info); @extend %--with-inline-elements; } diff --git a/packages/fuselage/src/components/States/States.styles.scss b/packages/fuselage/src/components/States/States.styles.scss index 67b27494bd..0f64cde04f 100644 --- a/packages/fuselage/src/components/States/States.styles.scss +++ b/packages/fuselage/src/components/States/States.styles.scss @@ -98,8 +98,6 @@ $variants: ( @include typography.use-font-scale(p2); margin-block: lengths.margin(16); - text-decoration: none; - color: colors.font(info); @extend %--with-inline-elements; } diff --git a/packages/fuselage/src/styles/primitives/traits/rich-text.scss b/packages/fuselage/src/styles/primitives/traits/rich-text.scss index e0312b4192..fcfaa6df5b 100644 --- a/packages/fuselage/src/styles/primitives/traits/rich-text.scss +++ b/packages/fuselage/src/styles/primitives/traits/rich-text.scss @@ -31,8 +31,6 @@ a { &:link { - text-decoration: none; - color: colors.font(info); } From a1c67973288a3383332639a5d49c7fce12c94b5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlia=20Jaeger=20Foresti?= <60678893+juliajforesti@users.noreply.github.com> Date: Fri, 13 Oct 2023 11:38:34 -0300 Subject: [PATCH 3/5] feat(fuselage): change `SidebarItem` focus color (#1196) --- .changeset/cuddly-cars-jam.md | 5 +++++ packages/fuselage/src/components/Sidebar/Sidebar.styles.scss | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/cuddly-cars-jam.md diff --git a/.changeset/cuddly-cars-jam.md b/.changeset/cuddly-cars-jam.md new file mode 100644 index 0000000000..e298d1cc8a --- /dev/null +++ b/.changeset/cuddly-cars-jam.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/fuselage": minor +--- + +feat(fuselage): change `SidebarItem` focus color diff --git a/packages/fuselage/src/components/Sidebar/Sidebar.styles.scss b/packages/fuselage/src/components/Sidebar/Sidebar.styles.scss index 7462f77d39..7dbe603680 100644 --- a/packages/fuselage/src/components/Sidebar/Sidebar.styles.scss +++ b/packages/fuselage/src/components/Sidebar/Sidebar.styles.scss @@ -35,7 +35,7 @@ $sidebar-color-stroke-default: theme( $sidebar-color-stroke-focus: theme( 'sidebar-color-stroke-focus', - colors.stroke(medium) + colors.stroke(highlight) ); $sidebar-item-color: theme('sidebar-item-color', colors.font(secondary-info)); From 9ce0dd4fb871812673efac7f7bd29395f6e4ef70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlia=20Jaeger=20Foresti?= <60678893+juliajforesti@users.noreply.github.com> Date: Fri, 13 Oct 2023 12:02:15 -0300 Subject: [PATCH 4/5] feat(fuselage): option to use `Tag` as link (#1195) --- .changeset/selfish-plants-divide.md | 5 +++++ packages/fuselage/src/components/Tag/Tag.stories.tsx | 5 +++++ packages/fuselage/src/components/Tag/Tag.tsx | 11 ++++++++--- 3 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 .changeset/selfish-plants-divide.md diff --git a/.changeset/selfish-plants-divide.md b/.changeset/selfish-plants-divide.md new file mode 100644 index 0000000000..abd9c3727b --- /dev/null +++ b/.changeset/selfish-plants-divide.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/fuselage": minor +--- + +feat(fuselage): option to use `Tag` as link diff --git a/packages/fuselage/src/components/Tag/Tag.stories.tsx b/packages/fuselage/src/components/Tag/Tag.stories.tsx index 737aa83ab2..d521feba95 100644 --- a/packages/fuselage/src/components/Tag/Tag.stories.tsx +++ b/packages/fuselage/src/components/Tag/Tag.stories.tsx @@ -94,3 +94,8 @@ export const Large = Template.bind({}); Large.args = { large: true, }; + +export const AsLink = Template.bind({}); +AsLink.args = { + href: '#', +}; diff --git a/packages/fuselage/src/components/Tag/Tag.tsx b/packages/fuselage/src/components/Tag/Tag.tsx index 2ee136e52a..d1961f0b4b 100644 --- a/packages/fuselage/src/components/Tag/Tag.tsx +++ b/packages/fuselage/src/components/Tag/Tag.tsx @@ -2,6 +2,7 @@ import type { AllHTMLAttributes, ReactNode } from 'react'; import React from 'react'; import { prependClassName } from '../../helpers/prependClassName'; +import Box from '../Box/Box'; type TagProps = { medium?: boolean; @@ -15,7 +16,7 @@ type TagProps = { | 'featured'; disabled?: boolean; icon?: ReactNode; -} & AllHTMLAttributes; +} & Omit, 'is'>; export const Tag = ({ large, @@ -26,6 +27,7 @@ export const Tag = ({ variant, children, icon, + href, ...props }: TagProps) => { const modifiers = [ @@ -34,19 +36,22 @@ export const Tag = ({ large && 'large', disabled && 'disabled', onClick && 'clickable', + href && 'clickable', ] .filter(Boolean) .map((modifier) => `rcx-tag--${modifier}`) .join(' '); return ( - {icon} {children} - + ); }; From 34e442115f34da3f5843d48ffe711766074f707c Mon Sep 17 00:00:00 2001 From: Douglas Fabris Date: Fri, 13 Oct 2023 12:14:45 -0300 Subject: [PATCH 5/5] feat(fuselage): `Callout` visual changes (#1194) --- .changeset/lemon-lamps-chew.md | 5 + .../src/components/Callout/Callout.spec.tsx | 60 ++--- .../components/Callout/Callout.styles.scss | 114 ++++++---- .../src/components/Callout/Callout.tsx | 25 +- .../__snapshots__/Callout.spec.tsx.snap | 213 ++++++++++++++++++ 5 files changed, 324 insertions(+), 93 deletions(-) create mode 100644 .changeset/lemon-lamps-chew.md create mode 100644 packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap diff --git a/.changeset/lemon-lamps-chew.md b/.changeset/lemon-lamps-chew.md new file mode 100644 index 0000000000..9adbf1d57b --- /dev/null +++ b/.changeset/lemon-lamps-chew.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/fuselage": minor +--- + +feat(fuselage): `Callout` visual changes diff --git a/packages/fuselage/src/components/Callout/Callout.spec.tsx b/packages/fuselage/src/components/Callout/Callout.spec.tsx index 9f7936fe0f..1833d692c7 100644 --- a/packages/fuselage/src/components/Callout/Callout.spec.tsx +++ b/packages/fuselage/src/components/Callout/Callout.spec.tsx @@ -1,47 +1,31 @@ import { composeStories } from '@storybook/testing-react'; -import { render, screen } from '@testing-library/react'; +import { render } from '@testing-library/react'; +import { axe } from 'jest-axe'; import React from 'react'; -import { Callout } from './Callout'; import * as stories from './Callout.stories'; -const { Default, WithDescriptionOnly, Info, Success, Warning, Danger } = - composeStories(stories); +const testCases = Object.values(composeStories(stories)).map((Story) => [ + Story.storyName || 'Story', + Story, +]); -describe('[Callout Component]', () => { - describe('Storybook', () => { - it.each([ - ['Default', Default], - ['WithDescriptionOnly', WithDescriptionOnly], - ['Info', Info], - ['Success', Success], - ['Warning', Warning], - ['Danger', Danger], - ])('renders %p story without crashing', (_storyName, Story) => { - render(); - }); +describe('[CheckBox Rendering]', () => { + test.each(testCases)( + `renders %s without crashing`, + async (_storyname, Story) => { + const tree = render(); + expect(tree.baseElement).toMatchSnapshot(); + } + ); - it.each([ - ['.rcx-callout--type-info', 'info', Info], - ['.rcx-callout--type-success', 'success', Success], - ['.rcx-callout--type-warning', 'warning', Warning], - ['.rcx-callout--type-danger', 'danger', Danger], - ])( - 'should have class %p when type is %p', - (className, _typeName, Story) => { - const { container } = render(); - expect(container.querySelector(className)).toBeInTheDocument(); - } - ); - }); + test.each(testCases)( + '%s should have no a11y violations', + async (_storyname, Story) => { + const { container } = render(); - it('should show title when this property is passed', () => { - render(); - screen.getByText('test-title'); - }); - - it('should display children', () => { - render(Children); - screen.getByText('Children'); - }); + const results = await axe(container); + expect(results).toHaveNoViolations(); + } + ); }); diff --git a/packages/fuselage/src/components/Callout/Callout.styles.scss b/packages/fuselage/src/components/Callout/Callout.styles.scss index 5b28183ca9..3e3f750480 100644 --- a/packages/fuselage/src/components/Callout/Callout.styles.scss +++ b/packages/fuselage/src/components/Callout/Callout.styles.scss @@ -2,76 +2,96 @@ @use '../../styles/lengths.scss'; @use '../../styles/typography.scss'; +$callout-default-color: theme( + 'callout-default-color', + colors.font(secondary-info) +); +$callout-info-color: theme('callout-info-color', colors.status-font(on-info)); +$callout-success-color: theme( + 'callout-success-color', + colors.status-font(on-success) +); +$callout-warning-color: theme( + 'callout-warning-color', + colors.status-font(on-warning) +); +$callout-danger-color: theme( + 'callout-danger-color', + colors.status-font(on-danger) +); +$callout-text-color: theme('callout-text-color', colors.font(pure-black)); + .rcx-callout { display: flex; - padding-block: lengths.padding(8); - padding-inline: lengths.padding(16); + padding: lengths.padding(12); + + color: $callout-text-color; - color: theme('callout-color', colors.font(default)); + border-width: lengths.border-width(default); + border-style: solid; + border-color: $callout-default-color; border-radius: theme('callout-border-radius', lengths.border-radius(medium)); - background-color: theme('callout-background-color', colors.surface(tint)); + &--info { + border-color: $callout-info-color; - &--type-info { - color: theme('callout-color-info', colors.font(pure-black)); - background-color: theme( - 'callout-background-color-info', - colors.status-background(info) - ); + .rcx-callout__icon { + color: $callout-info-color; + } } - &--type-success { - color: theme('callout-color-success', colors.font(pure-black)); - background-color: theme( - 'callout-background-color-success', - colors.status-background(success) - ); + &--success { + border-color: $callout-success-color; + + .rcx-callout__icon { + color: $callout-success-color; + } } - &--type-warning { - color: theme('callout-color-warning', colors.font(pure-black)); - background-color: theme( - 'callout-background-color-warning', - colors.status-background(warning) - ); + &--warning { + border-color: $callout-warning-color; + + .rcx-callout__icon { + color: $callout-warning-color; + } } - &--type-danger { - color: theme('callout-color-danger', colors.font(pure-black)); - background-color: theme( - 'callout-background-color-danger', - colors.status-background(danger) - ); + &--danger { + border-color: $callout-danger-color; + + .rcx-callout__icon { + color: $callout-danger-color; + } } -} -.rcx-callout__wrapper { - display: flex; + &__wrapper { + display: flex; - overflow: hidden; - flex-flow: column nowrap; - flex: 1 1 0; + overflow: hidden; + flex-flow: column nowrap; + flex: 1 1 0; - margin-inline-start: lengths.margin(12); + margin-inline-start: lengths.margin(12); - @include typography.use-font-scale(c1); + @include typography.use-font-scale(c1); - > :nth-child(2) { - margin-block-start: lengths.margin(4); + > :nth-child(2) { + margin-block-start: lengths.margin(4); + } } -} -.rcx-callout__title { - white-space: nowrap; + &__title { + white-space: nowrap; - @include typography.use-font-scale(p2b); - @include typography.use-text-ellipsis; -} + @include typography.use-font-scale(p2b); + @include typography.use-text-ellipsis; + } -.rcx-callout__children { - display: block; + &__content { + display: block; - @include typography.use-font-scale(p2); + @include typography.use-font-scale(p2); + } } diff --git a/packages/fuselage/src/components/Callout/Callout.tsx b/packages/fuselage/src/components/Callout/Callout.tsx index bdfa90310b..76cb3207df 100644 --- a/packages/fuselage/src/components/Callout/Callout.tsx +++ b/packages/fuselage/src/components/Callout/Callout.tsx @@ -16,6 +16,7 @@ export const Callout = ({ title, children, icon, + className, ...props }: CalloutProps) => { const defaultIcon = @@ -26,15 +27,23 @@ export const Callout = ({ 'info-circled'; return ( - - + + - {title && ( - - {title} - - )} - {children && {children}} + {title && {title}} + {children && {children}} ); diff --git a/packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap b/packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap new file mode 100644 index 0000000000..c181237a3e --- /dev/null +++ b/packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap @@ -0,0 +1,213 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[CheckBox Rendering] renders CustomIcon without crashing 1`] = ` + +
+
+ +
+
+ This is a message with custom icon +
+
+ This is a generic description. +
+
+
+
+ +`; + +exports[`[CheckBox Rendering] renders Danger without crashing 1`] = ` + +
+
+ +
+
+ This is a danger message +
+
+ This is a generic description. +
+
+
+
+ +`; + +exports[`[CheckBox Rendering] renders Default without crashing 1`] = ` + +
+
+ +
+
+ This is a generic title +
+
+ This is a generic description. +
+
+
+
+ +`; + +exports[`[CheckBox Rendering] renders Info without crashing 1`] = ` + +
+
+ +
+
+ This is a info message +
+
+ This is a generic description. +
+
+
+
+ +`; + +exports[`[CheckBox Rendering] renders Success without crashing 1`] = ` + +
+
+ +
+
+ This is a success message +
+
+ This is a generic description. +
+
+
+
+ +`; + +exports[`[CheckBox Rendering] renders Warning without crashing 1`] = ` + +
+
+ +
+
+ This is a warning message +
+
+ This is a generic description. +
+
+
+
+ +`; + +exports[`[CheckBox Rendering] renders WithDescriptionOnly without crashing 1`] = ` + +
+
+ +
+
+ This is a generic description. +
+
+
+
+ +`;