From 7fdfdb1b7737808585b95cc62c4f9af2bc152b41 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Mon, 15 Jan 2024 15:42:43 -0300 Subject: [PATCH 01/11] fix(message-parser): Made changes in grammar.pegjs for the strikedown approach (#1256) Co-authored-by: Hugo Costa --- .changeset/unlucky-melons-compete.md | 5 ++ packages/message-parser/src/definitions.ts | 22 +++++++-- packages/message-parser/src/grammar.pegjs | 10 ++-- .../tests/inlineCodeStrike.test.ts | 46 +++++++++++++++++++ 4 files changed, 76 insertions(+), 7 deletions(-) create mode 100644 .changeset/unlucky-melons-compete.md create mode 100644 packages/message-parser/tests/inlineCodeStrike.test.ts diff --git a/.changeset/unlucky-melons-compete.md b/.changeset/unlucky-melons-compete.md new file mode 100644 index 0000000000..f1136f50af --- /dev/null +++ b/.changeset/unlucky-melons-compete.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/message-parser": patch +--- + +fix(message-parser): Made changes in grammar.pegjs for the strikedown approach diff --git a/packages/message-parser/src/definitions.ts b/packages/message-parser/src/definitions.ts index 953691ec9f..1db89bd241 100644 --- a/packages/message-parser/src/definitions.ts +++ b/packages/message-parser/src/definitions.ts @@ -89,21 +89,37 @@ export type MarkupExcluding = Exclude; export type Bold = { type: 'BOLD'; value: Array< - MarkupExcluding | Link | Emoji | UserMention | ChannelMention + | MarkupExcluding + | Link + | Emoji + | UserMention + | ChannelMention + | InlineCode >; }; export type Italic = { type: 'ITALIC'; value: Array< - MarkupExcluding | Link | Emoji | UserMention | ChannelMention + | MarkupExcluding + | Link + | Emoji + | UserMention + | ChannelMention + | InlineCode >; }; export type Strike = { type: 'STRIKE'; value: Array< - MarkupExcluding | Link | Emoji | UserMention | ChannelMention + | MarkupExcluding + | Link + | Emoji + | UserMention + | ChannelMention + | InlineCode + | Italic >; }; diff --git a/packages/message-parser/src/grammar.pegjs b/packages/message-parser/src/grammar.pegjs index 4be6388c7e..3445f8e182 100644 --- a/packages/message-parser/src/grammar.pegjs +++ b/packages/message-parser/src/grammar.pegjs @@ -373,6 +373,7 @@ ItalicContentItems = text:ItalicContentItem+ { return reducePlainTexts(text); } ItalicContentItem = Whitespace + / InlineCode / References / UserMention / ChannelMention @@ -388,12 +389,12 @@ Bold = [\x2A] [\x2A] @BoldContent [\x2A] [\x2A] / [\x2A] @BoldContent [\x2A] BoldContent = text:BoldContentItem+ { return bold(reducePlainTexts(text)); } -BoldContentItem = Whitespace / References / UserMention / ChannelMention / Italic / Strikethrough / Emoji / Emoticon / AnyBold / Line +BoldContentItem = Whitespace / InlineCode / References / UserMention / ChannelMention / Italic / Strikethrough / Emoji / Emoticon / AnyBold / Line /* Strike */ Strikethrough = [\x7E] [\x7E] @StrikethroughContent [\x7E] [\x7E] / [\x7E] @StrikethroughContent [\x7E] -StrikethroughContent = text:(Whitespace / References / UserMention / ChannelMention / Italic / Bold / Emoji / Emoticon / AnyStrike / Line)+ { +StrikethroughContent = text:(InlineCode / Whitespace / References / UserMention / ChannelMention / Italic / Bold / Emoji / Emoticon / AnyStrike / Line)+ { return strike(reducePlainTexts(text)); } @@ -423,16 +424,17 @@ ItalicContentItemForReferences / Emoticon / AnyItalic / Line + / InlineCode /* Bold for References */ BoldForReferences = [\x2A] [\x2A] @BoldContentForReferences [\x2A] [\x2A] / [\x2A] @BoldContentForReferences [\x2A] -BoldContentForReferences = text:(Whitespace / UserMention / ChannelMention / ItalicForReferences / StrikethroughForReferences / Emoji / Emoticon / AnyBold / Line)+ { return bold(reducePlainTexts(text)); } +BoldContentForReferences = text:(Whitespace / UserMention / ChannelMention / ItalicForReferences / StrikethroughForReferences / Emoji / Emoticon / AnyBold / Line / InlineCode)+ { return bold(reducePlainTexts(text)); } /* Strike for References */ StrikethroughForReferences = [\x7E] [\x7E] @StrikethroughContentForReferences [\x7E] [\x7E] / [\x7E] @StrikethroughContentForReferences [\x7E] -StrikethroughContentForReferences = text:(Whitespace / UserMention / ChannelMention / ItalicForReferences / BoldForReferences / Emoji / Emoticon / AnyStrike / Line)+ { +StrikethroughContentForReferences = text:(Whitespace / UserMention / ChannelMention / ItalicForReferences / BoldForReferences / Emoji / Emoticon / AnyStrike / Line / InlineCode)+ { return strike(reducePlainTexts(text)); } diff --git a/packages/message-parser/tests/inlineCodeStrike.test.ts b/packages/message-parser/tests/inlineCodeStrike.test.ts new file mode 100644 index 0000000000..cdd3e039cd --- /dev/null +++ b/packages/message-parser/tests/inlineCodeStrike.test.ts @@ -0,0 +1,46 @@ +import { parse } from '../src'; +import { + bold, + inlineCode, + italic, + paragraph, + plain, + strike, +} from '../src/utils'; + +test.each([ + [ + '~~`Striking Inline Code`~~', + [paragraph([strike([inlineCode(plain('Striking Inline Code'))])])], + ], + [ + '~~_`Striking Inline Code with Italics`_~~', + [ + paragraph([ + strike([ + italic([inlineCode(plain('Striking Inline Code with Italics'))]), + ]), + ]), + ], + ], + [ + '~~**`Striking Inline Code with Bold`**~~', + [ + paragraph([ + strike([bold([inlineCode(plain('Striking Inline Code with Bold'))])]), + ]), + ], + ], + [ + '~~__*`Striking Inline Code with Bold`*__~~', + [ + paragraph([ + strike([ + italic([bold([inlineCode(plain('Striking Inline Code with Bold'))])]), + ]), + ]), + ], + ], +])('parses %p', (input, output) => { + expect(parse(input)).toMatchObject(output); +}); From 9020c0ee87eeb4c903091b0e03ab9802c39591f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlia=20Jaeger=20Foresti?= <60678893+juliajforesti@users.noreply.github.com> Date: Wed, 17 Jan 2024 11:03:11 -0300 Subject: [PATCH 02/11] feat(fuselage): new `Bubble` component (#1263) --- .changeset/ninety-turkeys-happen.md | 5 ++ .../src/components/Bubble/Bubble.spec.tsx | 31 ++++++++ .../src/components/Bubble/Bubble.stories.tsx | 33 ++++++++ .../src/components/Bubble/Bubble.styles.scss | 43 ++++++++++ .../fuselage/src/components/Bubble/Bubble.tsx | 46 +++++++++++ .../Bubble/__snapshots__/Bubble.spec.tsx.snap | 78 +++++++++++++++++++ .../fuselage/src/components/Bubble/index.ts | 1 + .../src/components/Button/Button.styles.scss | 13 +--- packages/fuselage/src/components/index.scss | 1 + packages/fuselage/src/components/index.ts | 1 + packages/fuselage/src/styles/lengths.scss | 12 ++- .../src/styles/mixins/interactivity.scss | 8 ++ 12 files changed, 261 insertions(+), 11 deletions(-) create mode 100644 .changeset/ninety-turkeys-happen.md 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/__snapshots__/Bubble.spec.tsx.snap create mode 100644 packages/fuselage/src/components/Bubble/index.ts 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 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..fa70b2f056 --- /dev/null +++ b/packages/fuselage/src/components/Bubble/Bubble.stories.tsx @@ -0,0 +1,33 @@ +import { action } from '@storybook/addon-actions'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import React from 'react'; + +import { Bubble } from '../..'; + +export default { + title: 'Data Display/Bubble', + component: Bubble, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +export const IconAndLabel = Template.bind({}); +IconAndLabel.args = { + children: 'New messages', + onClick: action('click'), + icon: 'arrow-down', +}; + +export const Dismissable = Template.bind({}); +Dismissable.args = { + children: 'New messages', + icon: 'arrow-down', + onClick: action('click'), + onDismiss: action('dismiss'), +}; + +export const LabelOnly = Template.bind({}); +LabelOnly.args = { + children: 'See new messages', + onClick: action('click'), +}; 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..9a7867f495 --- /dev/null +++ b/packages/fuselage/src/components/Bubble/Bubble.styles.scss @@ -0,0 +1,43 @@ +@use '../../styles/colors.scss'; +@use '../../styles/lengths.scss'; +@use '../../styles/typography.scss'; + +@use '../../styles/variables/buttons.scss' as buttonColors; +@use '../../styles/primitives/button.scss'; +@use '../../styles/mixins/interactivity.scss'; + +.rcx-bubble { + display: flex; + align-items: center; + + &__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); + + border-radius: lengths.border-radius(extra-large); + } + + &__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 new file mode 100644 index 0000000000..d794844a59 --- /dev/null +++ b/packages/fuselage/src/components/Bubble/Bubble.tsx @@ -0,0 +1,46 @@ +import type { Keys as IconName } from '@rocket.chat/icons'; +import type { AllHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react'; +import React from 'react'; + +import { Icon } from '../Icon'; + +type BubbleProps = { + children: ReactNode; + onClick: () => void; + icon?: IconName; + onDismiss?: () => void; + contentProps?: ButtonHTMLAttributes; + dismissProps?: ButtonHTMLAttributes; +} & AllHTMLAttributes; + +export const Bubble = ({ + children, + onClick, + icon, + onDismiss, + contentProps, + dismissProps, + ...props +}: BubbleProps) => ( +
+ + {onDismiss && ( + + )} +
+); diff --git a/packages/fuselage/src/components/Bubble/__snapshots__/Bubble.spec.tsx.snap b/packages/fuselage/src/components/Bubble/__snapshots__/Bubble.spec.tsx.snap new file mode 100644 index 0000000000..cf96a56b59 --- /dev/null +++ b/packages/fuselage/src/components/Bubble/__snapshots__/Bubble.spec.tsx.snap @@ -0,0 +1,78 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[Bubble Rendering] renders Dismissable without crashing 1`] = ` + +
+
+ + +
+
+ +`; + +exports[`[Bubble Rendering] renders IconAndLabel without crashing 1`] = ` + +
+
+ +
+
+ +`; + +exports[`[Bubble Rendering] renders LabelOnly without crashing 1`] = ` + +
+
+ +
+
+ +`; diff --git a/packages/fuselage/src/components/Bubble/index.ts b/packages/fuselage/src/components/Bubble/index.ts new file mode 100644 index 0000000000..c642246950 --- /dev/null +++ b/packages/fuselage/src/components/Bubble/index.ts @@ -0,0 +1 @@ +export * from './Bubble'; 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/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'; 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)) diff --git a/packages/fuselage/src/styles/mixins/interactivity.scss b/packages/fuselage/src/styles/mixins/interactivity.scss index 6d97f20137..a22159c0f4 100644 --- a/packages/fuselage/src/styles/mixins/interactivity.scss +++ b/packages/fuselage/src/styles/mixins/interactivity.scss @@ -8,3 +8,11 @@ cursor: not-allowed; } } + +@mixin click-animation($excludeRole: false) { + @include on-active { + > *:not([role='#{$excludeRole}']) { + transform: translateY(1px); + } + } +} From cc8e86b2f1ecf43c412e03c07430aecae6ccab29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlia=20Jaeger=20Foresti?= <60678893+juliajforesti@users.noreply.github.com> Date: Wed, 17 Jan 2024 11:24:47 -0300 Subject: [PATCH 03/11] feat(icons): new `arrow-up` icon (#1266) --- .changeset/happy-panthers-worry.md | 5 +++++ packages/icons/glyphsMapping.json | 3 +++ packages/icons/src/arrow-up.svg | 5 +++++ 3 files changed, 13 insertions(+) create mode 100644 .changeset/happy-panthers-worry.md create mode 100644 packages/icons/src/arrow-up.svg diff --git a/.changeset/happy-panthers-worry.md b/.changeset/happy-panthers-worry.md new file mode 100644 index 0000000000..e61373279e --- /dev/null +++ b/.changeset/happy-panthers-worry.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/icons": minor +--- + +feat(icons): new `arrow-up` icon diff --git a/packages/icons/glyphsMapping.json b/packages/icons/glyphsMapping.json index 5c13ea2a0b..326bcc52bc 100644 --- a/packages/icons/glyphsMapping.json +++ b/packages/icons/glyphsMapping.json @@ -955,5 +955,8 @@ }, "rocketchat": { "start": "\ue147" + }, + "arrow-up": { + "start": "\ue149" } } diff --git a/packages/icons/src/arrow-up.svg b/packages/icons/src/arrow-up.svg new file mode 100644 index 0000000000..c27abc06ec --- /dev/null +++ b/packages/icons/src/arrow-up.svg @@ -0,0 +1,5 @@ + + + From 632456082a31b871cd3abd9553eaf88bb3e0a56f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 17 Jan 2024 12:27:32 -0300 Subject: [PATCH 04/11] Version Packages (#1258) Co-authored-by: github-actions[bot] --- .changeset/fluffy-toys-fix.md | 6 ------ .changeset/happy-panthers-worry.md | 5 ----- .changeset/ninety-turkeys-happen.md | 5 ----- .changeset/shy-hotels-play.md | 5 ----- .changeset/unlucky-melons-compete.md | 5 ----- packages/fuselage-hooks/CHANGELOG.md | 6 ++++++ packages/fuselage-hooks/package.json | 2 +- packages/fuselage/CHANGELOG.md | 12 ++++++++++++ packages/fuselage/package.json | 2 +- packages/icons/CHANGELOG.md | 6 ++++++ packages/icons/package.json | 2 +- packages/logo/CHANGELOG.md | 7 +++++++ packages/logo/package.json | 2 +- packages/message-parser/CHANGELOG.md | 6 ++++++ packages/message-parser/package.json | 2 +- 15 files changed, 42 insertions(+), 31 deletions(-) delete mode 100644 .changeset/fluffy-toys-fix.md delete mode 100644 .changeset/happy-panthers-worry.md delete mode 100644 .changeset/ninety-turkeys-happen.md delete mode 100644 .changeset/shy-hotels-play.md delete mode 100644 .changeset/unlucky-melons-compete.md diff --git a/.changeset/fluffy-toys-fix.md b/.changeset/fluffy-toys-fix.md deleted file mode 100644 index 81be767434..0000000000 --- a/.changeset/fluffy-toys-fix.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -"@rocket.chat/fuselage-hooks": minor -"@rocket.chat/fuselage": patch ---- - -Deprecate `useMutableCallback` in favor of `useEffectEvent` diff --git a/.changeset/happy-panthers-worry.md b/.changeset/happy-panthers-worry.md deleted file mode 100644 index e61373279e..0000000000 --- a/.changeset/happy-panthers-worry.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@rocket.chat/icons": minor ---- - -feat(icons): new `arrow-up` icon diff --git a/.changeset/ninety-turkeys-happen.md b/.changeset/ninety-turkeys-happen.md deleted file mode 100644 index 613c97c7e1..0000000000 --- a/.changeset/ninety-turkeys-happen.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@rocket.chat/fuselage": minor ---- - -feat(fuselage): new `Bubble` component diff --git a/.changeset/shy-hotels-play.md b/.changeset/shy-hotels-play.md deleted file mode 100644 index b6cbc5f800..0000000000 --- a/.changeset/shy-hotels-play.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@rocket.chat/fuselage": minor ---- - -Add missing message body additional styles to `MessageBody` diff --git a/.changeset/unlucky-melons-compete.md b/.changeset/unlucky-melons-compete.md deleted file mode 100644 index f1136f50af..0000000000 --- a/.changeset/unlucky-melons-compete.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@rocket.chat/message-parser": patch ---- - -fix(message-parser): Made changes in grammar.pegjs for the strikedown approach diff --git a/packages/fuselage-hooks/CHANGELOG.md b/packages/fuselage-hooks/CHANGELOG.md index 985c2b8454..7dd682319c 100644 --- a/packages/fuselage-hooks/CHANGELOG.md +++ b/packages/fuselage-hooks/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 0.33.0 + +### Minor Changes + +- [#1244](https://github.com/RocketChat/fuselage/pull/1244) [`9be609744`](https://github.com/RocketChat/fuselage/commit/9be609744856f49b8971fb7aa45316ec7fd2463f) Thanks [@tassoevan](https://github.com/tassoevan)! - Deprecate `useMutableCallback` in favor of `useEffectEvent` + ## 0.32.1 ### Patch Changes diff --git a/packages/fuselage-hooks/package.json b/packages/fuselage-hooks/package.json index 7d377c2d0b..f067b0dc73 100644 --- a/packages/fuselage-hooks/package.json +++ b/packages/fuselage-hooks/package.json @@ -1,6 +1,6 @@ { "name": "@rocket.chat/fuselage-hooks", - "version": "0.32.1", + "version": "0.33.0", "description": "React hooks for Fuselage, Rocket.Chat's design system and UI toolkit", "homepage": "https://rocketchat.github.io/Rocket.Chat.Fuselage/", "author": { diff --git a/packages/fuselage/CHANGELOG.md b/packages/fuselage/CHANGELOG.md index 45a355a376..a8cf5258dd 100644 --- a/packages/fuselage/CHANGELOG.md +++ b/packages/fuselage/CHANGELOG.md @@ -1,5 +1,17 @@ # Change Log +## 0.43.0 + +### Minor Changes + +- [#1263](https://github.com/RocketChat/fuselage/pull/1263) [`9020c0ee8`](https://github.com/RocketChat/fuselage/commit/9020c0ee87eeb4c903091b0e03ab9802c39591f0) Thanks [@juliajforesti](https://github.com/juliajforesti)! - feat(fuselage): new `Bubble` component + +- [#1221](https://github.com/RocketChat/fuselage/pull/1221) [`769e5ea43`](https://github.com/RocketChat/fuselage/commit/769e5ea43fa7c83f988d7dfb042aeafaf66e1ad5) Thanks [@VanshulB](https://github.com/VanshulB)! - Add missing message body additional styles to `MessageBody` + +### Patch Changes + +- [#1244](https://github.com/RocketChat/fuselage/pull/1244) [`9be609744`](https://github.com/RocketChat/fuselage/commit/9be609744856f49b8971fb7aa45316ec7fd2463f) Thanks [@tassoevan](https://github.com/tassoevan)! - Deprecate `useMutableCallback` in favor of `useEffectEvent` + ## 0.42.0 ### Minor Changes diff --git a/packages/fuselage/package.json b/packages/fuselage/package.json index 70b4922263..aac2a3897f 100644 --- a/packages/fuselage/package.json +++ b/packages/fuselage/package.json @@ -1,6 +1,6 @@ { "name": "@rocket.chat/fuselage", - "version": "0.42.0", + "version": "0.43.0", "description": "Rocket.Chat's React Components Library", "author": { "name": "Rocket.Chat", diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 2fb129d72a..97c0bbcfcf 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 0.33.0 + +### Minor Changes + +- [#1266](https://github.com/RocketChat/fuselage/pull/1266) [`cc8e86b2f`](https://github.com/RocketChat/fuselage/commit/cc8e86b2f1ecf43c412e03c07430aecae6ccab29) Thanks [@juliajforesti](https://github.com/juliajforesti)! - feat(icons): new `arrow-up` icon + ## 0.32.0 ### Minor Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index 6189b7abad..89c78a81ae 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@rocket.chat/icons", - "version": "0.32.0", + "version": "0.33.0", "description": "Rocket.Chat's Icons", "author": { "name": "Rocket.Chat", diff --git a/packages/logo/CHANGELOG.md b/packages/logo/CHANGELOG.md index d1c85f89be..2e27d08876 100644 --- a/packages/logo/CHANGELOG.md +++ b/packages/logo/CHANGELOG.md @@ -1,5 +1,12 @@ # Change Log +## 0.31.29 + +### Patch Changes + +- Updated dependencies [[`9be609744`](https://github.com/RocketChat/fuselage/commit/9be609744856f49b8971fb7aa45316ec7fd2463f)]: + - @rocket.chat/fuselage-hooks@0.33.0 + ## 0.31.28 ### Patch Changes diff --git a/packages/logo/package.json b/packages/logo/package.json index 29098bf712..1be872c27d 100644 --- a/packages/logo/package.json +++ b/packages/logo/package.json @@ -1,6 +1,6 @@ { "name": "@rocket.chat/logo", - "version": "0.31.28", + "version": "0.31.29", "description": "Rocket.Chat logo package", "keywords": [ "rocketchat", diff --git a/packages/message-parser/CHANGELOG.md b/packages/message-parser/CHANGELOG.md index 3de20c1e2e..1fd31e07f1 100644 --- a/packages/message-parser/CHANGELOG.md +++ b/packages/message-parser/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 0.31.28 + +### Patch Changes + +- [`7fdfdb1b7`](https://github.com/RocketChat/fuselage/commit/7fdfdb1b7737808585b95cc62c4f9af2bc152b41) Thanks [@dougfabris](https://github.com/dougfabris)! - fix(message-parser): Made changes in grammar.pegjs for the strikedown approach + ## 0.31.27 ### Patch Changes diff --git a/packages/message-parser/package.json b/packages/message-parser/package.json index c68fa5bc93..73bc6b1dab 100644 --- a/packages/message-parser/package.json +++ b/packages/message-parser/package.json @@ -1,7 +1,7 @@ { "name": "@rocket.chat/message-parser", "description": "Rocket.Chat parser for messages", - "version": "0.31.27", + "version": "0.31.28", "author": { "name": "Rocket.Chat", "url": "https://rocket.chat/" From 971f07aae4076481fd6b7d37c417d9b00972bc4a Mon Sep 17 00:00:00 2001 From: dougfabris Date: Thu, 18 Jan 2024 10:42:15 -0300 Subject: [PATCH 05/11] feat(fuselage): Avoid `Box` usage on `ButtonGroup` (#1267) --- .changeset/five-eggs-search.md | 6 ++ .../src/components/Button/Button.stories.tsx | 2 +- .../components/ButtonGroup/ButtonGroup.tsx | 83 ++++++++++--------- .../Modal/ModalFooterControllers.tsx | 4 +- .../Modal/__snapshots__/Modal.spec.tsx.snap | 16 ++-- .../src/components/States/StatesActions.tsx | 4 +- .../src/forms/AdminInfoForm/AdminInfoForm.tsx | 2 +- .../CreateNewPassword/CreateNewPassword.tsx | 2 +- .../forms/NewAccountForm/NewAccountForm.tsx | 2 +- .../OrganizationInfoForm.tsx | 4 +- .../RegisterOfflineForm/steps/CopyStep.tsx | 2 +- .../RegisterOfflineForm/steps/PasteStep.tsx | 2 +- .../RegisterServerForm/RegisterServerForm.tsx | 2 +- .../ResetPasswordForm/ResetPasswordForm.tsx | 2 +- 14 files changed, 72 insertions(+), 61 deletions(-) create mode 100644 .changeset/five-eggs-search.md diff --git a/.changeset/five-eggs-search.md b/.changeset/five-eggs-search.md new file mode 100644 index 0000000000..952044757a --- /dev/null +++ b/.changeset/five-eggs-search.md @@ -0,0 +1,6 @@ +--- +"@rocket.chat/onboarding-ui": minor +"@rocket.chat/fuselage": minor +--- + +feat(fuselage): Avoid `Box` usage on `ButtonGroup` diff --git a/packages/fuselage/src/components/Button/Button.stories.tsx b/packages/fuselage/src/components/Button/Button.stories.tsx index af3d014aed..8e871a6225 100644 --- a/packages/fuselage/src/components/Button/Button.stories.tsx +++ b/packages/fuselage/src/components/Button/Button.stories.tsx @@ -94,7 +94,7 @@ export const Variants: ComponentStory = () => ( ); export const Sizes: ComponentStory = () => ( - + diff --git a/packages/fuselage/src/components/ButtonGroup/ButtonGroup.tsx b/packages/fuselage/src/components/ButtonGroup/ButtonGroup.tsx index 71818e765c..ab6b57e576 100644 --- a/packages/fuselage/src/components/ButtonGroup/ButtonGroup.tsx +++ b/packages/fuselage/src/components/ButtonGroup/ButtonGroup.tsx @@ -1,48 +1,57 @@ -import type { ComponentProps } from 'react'; -import React from 'react'; +import type { HTMLAttributes, Ref } from 'react'; +import React, { forwardRef } from 'react'; import { appendClassName } from '../../helpers/appendClassName'; import { patchChildren } from '../../helpers/patchChildren'; -import Box from '../Box'; -type ButtonGroupProps = Omit, 'wrap'> & { +type ButtonGroupProps = { align?: 'start' | 'center' | 'end'; stretch?: boolean; wrap?: boolean; vertical?: boolean; small?: boolean; large?: boolean; -}; +} & HTMLAttributes; -export const ButtonGroup = ({ - align = 'start', - children, - stretch, - vertical, - wrap, - small, - large, - ...props -}: ButtonGroupProps) => ( - - {patchChildren( - children, - (childProps: { className: string | string[] }) => ({ - className: appendClassName( - childProps.className, - 'rcx-button-group__item' - ), - }) - )} - -); +export const ButtonGroup = forwardRef(function ButtonGroup( + { + align = 'start', + children, + stretch, + vertical, + wrap, + small, + large, + ...props + }: ButtonGroupProps, + ref: Ref +) { + return ( +
+ {patchChildren( + children, + (childProps: { className: string | string[] }) => ({ + className: appendClassName( + childProps.className, + 'rcx-button-group__item' + ), + }) + )} +
+ ); +}); diff --git a/packages/fuselage/src/components/Modal/ModalFooterControllers.tsx b/packages/fuselage/src/components/Modal/ModalFooterControllers.tsx index bd1659b996..7f0ed0c7b4 100644 --- a/packages/fuselage/src/components/Modal/ModalFooterControllers.tsx +++ b/packages/fuselage/src/components/Modal/ModalFooterControllers.tsx @@ -8,7 +8,5 @@ export type ModalFooterControllersProps = ComponentProps; export const ModalFooterControllers = ({ children, }: ModalFooterControllersProps) => ( - - {children} - + {children} ); diff --git a/packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap b/packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap index 298a7c9db2..0987093665 100644 --- a/packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap +++ b/packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap @@ -56,7 +56,7 @@ exports[`[Modal Component] renders _WithAnnotation without crashing 1`] = ` Anototation
diff --git a/packages/onboarding-ui/src/forms/CreateNewPassword/CreateNewPassword.tsx b/packages/onboarding-ui/src/forms/CreateNewPassword/CreateNewPassword.tsx index 53ee08a85b..10aaa164bb 100644 --- a/packages/onboarding-ui/src/forms/CreateNewPassword/CreateNewPassword.tsx +++ b/packages/onboarding-ui/src/forms/CreateNewPassword/CreateNewPassword.tsx @@ -90,7 +90,7 @@ const CreateNewPassword = ({ - + {onClickSkip && ( - + {t('component.form.action.skip')} diff --git a/packages/onboarding-ui/src/forms/RegisterOfflineForm/steps/CopyStep.tsx b/packages/onboarding-ui/src/forms/RegisterOfflineForm/steps/CopyStep.tsx index 0f3c016bb0..f5439b501f 100644 --- a/packages/onboarding-ui/src/forms/RegisterOfflineForm/steps/CopyStep.tsx +++ b/packages/onboarding-ui/src/forms/RegisterOfflineForm/steps/CopyStep.tsx @@ -95,7 +95,7 @@ const CopyStep = ({ - +