Merge branch 'main' into codeSnippet-disable-button

RocketChat · Mar 27, 2024 · a298d54 · a298d54
2 parents 12d20c7 + 977f452
commit a298d54
Show file tree

Hide file tree

Showing 174 changed files with 1,255 additions and 11,258 deletions.
diff --git a/.changeset/eleven-news-report.md b/.changeset/eleven-news-report.md
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
@@ -117,7 +117,7 @@ jobs:
       - build-and-test
     environment:
       name: github-pages
-      url: "https://rocketchat.github.io/Rocket.Chat.Fuselage/fuselage/${{ needs.build-and-test.outputs.branch-name }}"
+      url: "https://rocketchat.github.io/fuselage/fuselage/${{ needs.build-and-test.outputs.branch-name }}"
     steps:
       - uses: actions/checkout@v2
         with:

diff --git a/.github/workflows/ci-pr-opened.yml b/.github/workflows/ci-pr-opened.yml
@@ -61,7 +61,7 @@ jobs:
           name: storybooks
           path: packages
       - run: |
-          rm -rf "fuselage/${{ needs.download-artifact.outputs.pr-number }}"  "layout/${{ needs.download-artifact.outputs.pr-number }}" "uikit-playground/${{ needs.download-artifact.outputs.pr-number }}" "fuselage-ui-kit/${{ needs.download-artifact.outputs.pr-number }}" "onboarding-ui/${{ needs.download-artifact.outputs.pr-number }}"
+          rm -rf "fuselage/${{ needs.download-artifact.outputs.pr-number }}"  "layout/${{ needs.download-artifact.outputs.pr-number }}" "uikit-playground/${{ needs.download-artifact.outputs.pr-number }}" "onboarding-ui/${{ needs.download-artifact.outputs.pr-number }}"
           mv -v packages/fuselage/storybook-static "fuselage/${{ needs.download-artifact.outputs.pr-number }}"
           mv -v packages/onboarding-ui/storybook-static "onboarding-ui/${{ needs.download-artifact.outputs.pr-number }}"
           mv -v packages/layout/storybook-static "layout/${{ needs.download-artifact.outputs.pr-number }}"

diff --git a/README.md b/README.md
@@ -33,4 +33,3 @@
 | 📦 [`@rocket.chat/string-helpers`](/packages/string-helpers)                                   | Helper functions for string manipulation                                     | [![npm](https://img.shields.io/npm/v/@rocket.chat/string-helpers?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/string-helpers)                                   | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/string-helpers?style=flat-square)                  |
 | 📦 [`@rocket.chat/styled`](/packages/styled)                                                   | A simple styled API for React components                                     | [![npm](https://img.shields.io/npm/v/@rocket.chat/styled?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/styled)                                                   | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/styled?style=flat-square)                          |
 | 📦 [`@rocket.chat/stylis-logical-props-middleware`](/packages/stylis-logical-props-middleware) | Stylis middleware to handle CSS Logical Properties and their fallbacks       | [![npm](https://img.shields.io/npm/v/@rocket.chat/stylis-logical-props-middleware?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/stylis-logical-props-middleware) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/stylis-logical-props-middleware?style=flat-square) |
-| 📦 [`@rocket.chat/ui-kit`](/packages/ui-kit)                                                   | Interactive UI elements for Rocket.Chat Apps                                 | [![npm](https://img.shields.io/npm/v/@rocket.chat/ui-kit?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/ui-kit)                                                   | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/ui-kit?style=flat-square)                          |
diff --git a/packages/fuselage-hooks/CHANGELOG.md b/packages/fuselage-hooks/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.33.1
+
+### Patch Changes
+
+- [#1334](https://github.com/RocketChat/fuselage/pull/1334) [`35155404b`](https://github.com/RocketChat/fuselage/commit/35155404baeb1e44aa1e4d767f431204d3ab2b53) Thanks [@dougfabris](https://github.com/dougfabris)! - fix(fuselage-hooks): increase usePosition zIndex
+
 ## 0.33.0
 
 ### Minor Changes

diff --git a/packages/fuselage-hooks/package.json b/packages/fuselage-hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rocket.chat/fuselage-hooks",
-  "version": "0.33.0",
+  "version": "0.33.1",
   "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-hooks/src/usePosition/index.ts b/packages/fuselage-hooks/src/usePosition/index.ts
@@ -138,7 +138,7 @@ export function getPositionStyle({
           [positionKey]: point,
           [variantKey]: variantPoint,
           position: 'fixed',
-          zIndex: 9999,
+          zIndex: 999999,
           opacity: 1,
         },
         placement: `${keysToPlacementMap[placementAttempt]}-${keysToPlacementMap[v]}`,
@@ -166,11 +166,11 @@ export function getPositionStyle({
       top: point,
       left: variantPoint,
       position: 'fixed',
+      zIndex: 999999,
       ...(bottom < targetRect.height + point && {
         bottom: margin,
         overflowY: 'auto',
       }),
-      ...({ zIndex: '9999' } as any),
     },
     placement: `${keysToPlacementMap[placementAttempt]}-${
       keysToPlacementMap[variantsAttempts[0]]

diff --git a/packages/fuselage-toastbar/CHANGELOG.md b/packages/fuselage-toastbar/CHANGELOG.md
@@ -0,0 +1,7 @@
+# @rocket.chat/fuselage-toastbar
+
+## 0.31.26
+
+### Patch Changes
+
+- [#1323](https://github.com/RocketChat/fuselage/pull/1323) [`9ccc4e79f`](https://github.com/RocketChat/fuselage/commit/9ccc4e79f76c1ef2b182065883bd66a91860bc96) Thanks [@dougfabris](https://github.com/dougfabris)! - feat(icons): New circle-unfilled
diff --git a/packages/fuselage-toastbar/package.json b/packages/fuselage-toastbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rocket.chat/fuselage-toastbar",
-  "version": "0.31.25",
+  "version": "0.31.26",
   "description": "Fuselage ToastBar component",
   "keywords": [
     "rocketchat",

diff --git a/packages/fuselage-tokens/CHANGELOG.md b/packages/fuselage-tokens/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.33.0
+
+### Minor Changes
+
+- [#1289](https://github.com/RocketChat/fuselage/pull/1289) [`a40d471bd`](https://github.com/RocketChat/fuselage/commit/a40d471bdf71babf652f5df3108a05d92f08d975) Thanks [@juliajforesti](https://github.com/juliajforesti)! - feat(fuselage): new `PaletteStyleTag` component
+
 ## 0.32.0
 
 ### Minor Changes

diff --git a/packages/fuselage-tokens/package.json b/packages/fuselage-tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rocket.chat/fuselage-tokens",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "Design tokens for Fuselage, Rocket.Chat's design system",
   "homepage": "https://rocketchat.github.io/Rocket.Chat.Fuselage/",
   "author": {

diff --git a/packages/fuselage/CHANGELOG.md b/packages/fuselage/CHANGELOG.md
@@ -1,5 +1,78 @@
 # Change Log
 
+## 0.52.0
+
+### Minor Changes
+
+- [#1331](https://github.com/RocketChat/fuselage/pull/1331) [`bd17e9c59`](https://github.com/RocketChat/fuselage/commit/bd17e9c59696f26bf59f7f389f08f3185a780c65) Thanks [@dougfabris](https://github.com/dougfabris)! - feat(fuselage): MessageReactions focus state
+
+### Patch Changes
+
+- [#1335](https://github.com/RocketChat/fuselage/pull/1335) [`cef61fd9f`](https://github.com/RocketChat/fuselage/commit/cef61fd9f0e2139f54036809b11782de09b9d025) Thanks [@juliajforesti](https://github.com/juliajforesti)! - fix(fuselage): show `AutoComplete` placeholder
+
+## 0.51.3
+
+### Patch Changes
+
+- [#1327](https://github.com/RocketChat/fuselage/pull/1327) [`350eaa1ac`](https://github.com/RocketChat/fuselage/commit/350eaa1ac73a4dc66f1b6787df475c52389f96b6) Thanks [@csuadev](https://github.com/csuadev)! - fix(fuselage): Add missing renderItem property on PaginatedSelect component to allow options customization.
+
+- [#1328](https://github.com/RocketChat/fuselage/pull/1328) [`6eecf95fb`](https://github.com/RocketChat/fuselage/commit/6eecf95fb1f7e77032de801033134eaed3e4501f) Thanks [@juliajforesti](https://github.com/juliajforesti)! - fix(fuselage): add missing `Bubble` gap
+
+## 0.51.2
+
+### Patch Changes
+
+- [#1322](https://github.com/RocketChat/fuselage/pull/1322) [`f67ac5dc0`](https://github.com/RocketChat/fuselage/commit/f67ac5dc0a02ce47468a640d08e8ba373eca3d51) Thanks [@csuadev](https://github.com/csuadev)! - fix(fuselage): Added missing render property from PaginatedMultiselect on PaginatedMultiSelectFiltered component to allow rendering items on it.
+
+## 0.51.1
+
+### Patch Changes
+
+- [#1324](https://github.com/RocketChat/fuselage/pull/1324) [`8f4502968`](https://github.com/RocketChat/fuselage/commit/8f450296822ee8a087831683828f513c2156b279) Thanks [@dougfabris](https://github.com/dougfabris)! - fix(fuselage): Avoid duplicated alert on ToastBar
+
+- [#1323](https://github.com/RocketChat/fuselage/pull/1323) [`9ccc4e79f`](https://github.com/RocketChat/fuselage/commit/9ccc4e79f76c1ef2b182065883bd66a91860bc96) Thanks [@dougfabris](https://github.com/dougfabris)! - feat(icons): New circle-unfilled
+
+## 0.51.0
+
+### Minor Changes
+
+- [#1319](https://github.com/RocketChat/fuselage/pull/1319) [`b37dd11c9`](https://github.com/RocketChat/fuselage/commit/b37dd11c9bd0fc4dbdda5ab5e623dfc46c8d8647) Thanks [@dougfabris](https://github.com/dougfabris)! - feat(fuselage): Add forwardRef on Contextualbar
+
+### Patch Changes
+
+- [#1320](https://github.com/RocketChat/fuselage/pull/1320) [`06b1d5701`](https://github.com/RocketChat/fuselage/commit/06b1d57015c59fbba95c8986fe054c2b3336f73f) Thanks [@dougfabris](https://github.com/dougfabris)! - fix(fuselage): `ToastBar` remove close button from content alert
+
+## 0.50.1
+
+### Patch Changes
+
+- [#1317](https://github.com/RocketChat/fuselage/pull/1317) [`410a12131`](https://github.com/RocketChat/fuselage/commit/410a1213140b6dbfccdd75c9dfcf4b90938bf51d) Thanks [@juliajforesti](https://github.com/juliajforesti)! - fix(fuselage): remove margin inline end from bubble icon
+
+## 0.50.0
+
+### Minor Changes
+
+- [#1311](https://github.com/RocketChat/fuselage/pull/1311) [`aff73a3cb`](https://github.com/RocketChat/fuselage/commit/aff73a3cbbbc80dbd2045c3644cc787f1ca5eb4e) Thanks [@dougfabris](https://github.com/dougfabris)! - feat(fuselage): Add focus state on `MessgeHighlight`
+
+### Patch Changes
+
+- [#1310](https://github.com/RocketChat/fuselage/pull/1310) [`564174632`](https://github.com/RocketChat/fuselage/commit/564174632ccda751555a1e4128c3b897bbc1b86f) Thanks [@dougfabris](https://github.com/dougfabris)! - fix(fuselage): `MessageToolbarWrapper` visibility
+
+- [#1312](https://github.com/RocketChat/fuselage/pull/1312) [`91fe5c9d3`](https://github.com/RocketChat/fuselage/commit/91fe5c9d3600404a11529018c01907edb00e4c05) Thanks [@csuadev](https://github.com/csuadev)! - Change border color on Accordion component that was affecting dark mode, requested by design.
+
+- [#1314](https://github.com/RocketChat/fuselage/pull/1314) [`75305d76e`](https://github.com/RocketChat/fuselage/commit/75305d76e336f635efc855f7f6545605f873126c) Thanks [@dougfabris](https://github.com/dougfabris)! - fix(fuselage): `Contextualbar` elements syntax
+
+## 0.49.0
+
+### Minor Changes
+
+- [#1289](https://github.com/RocketChat/fuselage/pull/1289) [`a40d471bd`](https://github.com/RocketChat/fuselage/commit/a40d471bdf71babf652f5df3108a05d92f08d975) Thanks [@juliajforesti](https://github.com/juliajforesti)! - feat(fuselage): new `PaletteStyleTag` component
+
+### Patch Changes
+
+- Updated dependencies [[`a40d471bd`](https://github.com/RocketChat/fuselage/commit/a40d471bdf71babf652f5df3108a05d92f08d975)]:
+  - @rocket.chat/fuselage-tokens@0.33.0
+
 ## 0.48.0
 
 ### Minor Changes

diff --git a/packages/fuselage/package.json b/packages/fuselage/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rocket.chat/fuselage",
-  "version": "0.48.0",
+  "version": "0.52.0",
   "description": "Rocket.Chat's React Components Library",
   "author": {
     "name": "Rocket.Chat",

diff --git a/packages/fuselage/src/components/Accordion/Accordion.styles.scss b/packages/fuselage/src/components/Accordion/Accordion.styles.scss
@@ -28,7 +28,7 @@
   color: colors.font(default);
 
   border-width: lengths.border-width(default);
-  border-color: colors.neutral(300) transparent transparent;
+  border-color: colors.stroke(extra-light) transparent transparent;
 
   &[tabindex] {
     @include clickable;

diff --git a/packages/fuselage/src/components/AutoComplete/AutoComplete.stories.tsx b/packages/fuselage/src/components/AutoComplete/AutoComplete.stories.tsx
@@ -17,6 +17,7 @@ export default {
   title: 'Inputs/AutoComplete',
   component: AutoComplete,
   parameters: {
+    layout: 'centered',
     docs: {
       description: {
         component: 'An input for selection of options.',
@@ -108,3 +109,8 @@ CustomItem.args = {
     />
   ),
 };
+
+export const WithPlaceholder = Template.bind({});
+WithPlaceholder.args = {
+  placeholder: 'Search...',
+};
diff --git a/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx b/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx
@@ -153,7 +153,7 @@ export function AutoComplete({
             onFocus={show}
             onKeyDown={handleKeyDown}
             placeholder={
-              optionsAreVisible !== AnimatedVisibility.HIDDEN || !value
+              optionsAreVisible === AnimatedVisibility.HIDDEN || !value
                 ? placeholder
                 : undefined
             }
@@ -192,6 +192,7 @@ export function AutoComplete({
                 : 'magnifier'
             }
             size='x20'
+            color='default'
           />
         }
       />

diff --git a/packages/fuselage/src/components/AutoComplete/__snapshots__/AutoComplete.spec.tsx.snap b/packages/fuselage/src/components/AutoComplete/__snapshots__/AutoComplete.spec.tsx.snap
@@ -21,7 +21,7 @@ exports[`[AutoComplete Rendering] renders CustomItem without crashing 1`] = `
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-6vi44e"
         >
           
         </i>
@@ -119,7 +119,7 @@ v/L21v8BT/ZVoe1UItsAAAAASUVORK5CYII="
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-6vi44e"
         >
           
         </i>
@@ -150,7 +150,7 @@ exports[`[AutoComplete Rendering] renders Default without crashing 1`] = `
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-6vi44e"
         >
           
         </i>
@@ -217,7 +217,7 @@ exports[`[AutoComplete Rendering] renders Multiple without crashing 1`] = `
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-6vi44e"
         >
           
         </i>
@@ -414,7 +414,39 @@ v/L21v8BT/ZVoe1UItsAAAAASUVORK5CYII="
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-6vi44e"
+        >
+          
+        </i>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`[AutoComplete Rendering] renders WithPlaceholder without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-autocomplete rcx-css-t3n91h"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-css-6d871f"
+        role="group"
+      >
+        <input
+          aria-label="Decorator Label"
+          class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box  rcx-css-trljwa rcx-css-rcil7k"
+          placeholder="Search..."
+          value=""
+        />
+      </div>
+      <div
+        class="rcx-box rcx-box--full rcx-autocomplete__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-6vi44e"
         >
           
         </i>

diff --git a/packages/fuselage/src/components/Bubble/Bubble.styles.scss b/packages/fuselage/src/components/Bubble/Bubble.styles.scss
@@ -48,6 +48,7 @@
     padding-inline-end: lengths.padding(16);
 
     border-radius: lengths.border-radius(extra-large);
+    column-gap: lengths.padding(8);
   }
 
   &:not(.rcx-bubble__group) &__item {

diff --git a/packages/fuselage/src/components/Bubble/BubbleButton.tsx b/packages/fuselage/src/components/Bubble/BubbleButton.tsx
@@ -27,7 +27,7 @@ export const BubbleButton = ({
     onClick={onClick}
     {...props}
   >
-    {icon && <Icon name={icon} size='x16' mie={8} />}
+    {icon && <Icon name={icon} size='x16' />}
     {label && <span>{label}</span>}
   </button>
 );
diff --git a/packages/fuselage/src/components/Bubble/__snapshots__/Bubble.spec.tsx.snap b/packages/fuselage/src/components/Bubble/__snapshots__/Bubble.spec.tsx.snap
@@ -11,7 +11,7 @@ exports[`[Bubble Rendering] renders Dismissable without crashing 1`] = `
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-arrow-down rcx-icon rcx-css-gcnmf8"
+          class="rcx-box rcx-box--full rcx-icon--name-arrow-down rcx-icon rcx-css-1g87xs3"
         >
           
         </i>
@@ -25,7 +25,7 @@ exports[`[Bubble Rendering] renders Dismissable without crashing 1`] = `
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-cross-small rcx-icon rcx-css-gcnmf8"
+          class="rcx-box rcx-box--full rcx-icon--name-cross-small rcx-icon rcx-css-1g87xs3"
         >
           
         </i>
@@ -46,7 +46,7 @@ exports[`[Bubble Rendering] renders IconAndLabel without crashing 1`] = `
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-arrow-down rcx-icon rcx-css-gcnmf8"
+          class="rcx-box rcx-box--full rcx-icon--name-arrow-down rcx-icon rcx-css-1g87xs3"
         >
           
         </i>
@@ -114,7 +114,7 @@ exports[`[Bubble Rendering] renders SecondaryDismissable without crashing 1`] =
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-cross-small rcx-icon rcx-css-gcnmf8"
+          class="rcx-box rcx-box--full rcx-icon--name-cross-small rcx-icon rcx-css-1g87xs3"
         >
           
         </i>