From 274ae5ed74e891d3d3bdb77b3e74c72c59f63c9f Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 10 Feb 2023 16:38:33 -0300 Subject: [PATCH 01/25] Change palette style tags position in head before custom-css file --- apps/meteor/app/ui-master/client/body.html | 2 +- ee/packages/ui-theming/src/PaletteStyleTag.tsx | 9 ++++++++- .../ui-theming/src/SidebarPaletteStyleTag.tsx | 18 ++++++++++-------- 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/apps/meteor/app/ui-master/client/body.html b/apps/meteor/app/ui-master/client/body.html index 641116de7ce0..b3b6ca5556da 100644 --- a/apps/meteor/app/ui-master/client/body.html +++ b/apps/meteor/app/ui-master/client/body.html @@ -1 +1 @@ - + diff --git a/ee/packages/ui-theming/src/PaletteStyleTag.tsx b/ee/packages/ui-theming/src/PaletteStyleTag.tsx index 8e428fb5c462..fd07c5a6198e 100644 --- a/ee/packages/ui-theming/src/PaletteStyleTag.tsx +++ b/ee/packages/ui-theming/src/PaletteStyleTag.tsx @@ -15,5 +15,12 @@ export const PaletteStyleTag = (): ReactElement | null => { return null; } - return createPortal(, document.head); + const customCssElement = document.getElementById('css-theme'); + const styleElement = document.createElement('style'); + styleElement.setAttribute('id', 'main-palette'); + document.head.insertBefore(styleElement, customCssElement); + + const palette = convertToCss(filterOnlyChangedColors(defaultPalette, darkPalette), '.rcx-content--main'); + + return createPortal(palette, document.getElementById('main-palette') || document.head); }; diff --git a/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx b/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx index fc272d5c6533..5cbdbd216e03 100644 --- a/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx +++ b/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx @@ -12,13 +12,15 @@ import { useThemeMode } from './hooks/useThemeMode'; export const SidebarPaletteStyleTag = memo((): ReactElement | null => { const [, , theme] = useThemeMode(); - return createPortal( - , - document.head, + const customCssElement = document.getElementById('css-theme'); + const styleElement = document.createElement('style'); + styleElement.setAttribute('id', 'sidebar-palette'); + document.head.insertBefore(styleElement, customCssElement); + + const palette = convertToCss( + theme === 'dark' ? filterOnlyChangedColors(darkPalette, sidebarPaletteDark) : { ...darkPalette, ...defaultSidebarPalette }, + '.rcx-sidebar--main', ); + + return createPortal(palette, document.getElementById('sidebar-palette') || document.head); }); From e792adad4a13e43a2e2788d76fb54d9abfb83182 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Mon, 13 Feb 2023 12:37:08 -0300 Subject: [PATCH 02/25] fix lint --- ee/packages/ui-theming/src/PaletteStyleTag.tsx | 1 - ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/ee/packages/ui-theming/src/PaletteStyleTag.tsx b/ee/packages/ui-theming/src/PaletteStyleTag.tsx index fd07c5a6198e..234eeba69a44 100644 --- a/ee/packages/ui-theming/src/PaletteStyleTag.tsx +++ b/ee/packages/ui-theming/src/PaletteStyleTag.tsx @@ -1,5 +1,4 @@ import type { ReactElement } from 'react'; -import React from 'react'; import { createPortal } from 'react-dom'; import { convertToCss } from './convertToCss'; diff --git a/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx b/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx index 5cbdbd216e03..a25d73009cbb 100644 --- a/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx +++ b/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx @@ -1,5 +1,5 @@ import type { ReactElement } from 'react'; -import React, { memo } from 'react'; +import { memo } from 'react'; import { createPortal } from 'react-dom'; import { sidebarPaletteDark } from './sidebarPaletteDark'; From 6619299b8432ea83112ed44bd34c7fa37318299e Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 14 Feb 2023 14:09:43 -0300 Subject: [PATCH 03/25] fix PaletteStyleTag memo. Create hook to create style element --- ee/packages/ui-theming/src/PaletteStyleTag.tsx | 14 +++++--------- .../ui-theming/src/SidebarPaletteStyleTag.tsx | 8 ++------ .../src/hooks/useCreateStyleContainer.ts | 7 +++++++ 3 files changed, 14 insertions(+), 15 deletions(-) create mode 100644 ee/packages/ui-theming/src/hooks/useCreateStyleContainer.ts diff --git a/ee/packages/ui-theming/src/PaletteStyleTag.tsx b/ee/packages/ui-theming/src/PaletteStyleTag.tsx index 234eeba69a44..9cec4794df26 100644 --- a/ee/packages/ui-theming/src/PaletteStyleTag.tsx +++ b/ee/packages/ui-theming/src/PaletteStyleTag.tsx @@ -1,4 +1,5 @@ import type { ReactElement } from 'react'; +import { memo } from 'react'; import { createPortal } from 'react-dom'; import { convertToCss } from './convertToCss'; @@ -6,20 +7,15 @@ import { filterOnlyChangedColors } from './filterOnlyChangedColors'; import { defaultPalette } from './palette'; import { darkPalette } from './paletteDark'; import { useThemeMode } from './hooks/useThemeMode'; +import { useCreateStyleContainer } from './hooks/useCreateStyleContainer'; -export const PaletteStyleTag = (): ReactElement | null => { +export const PaletteStyleTag = memo((): ReactElement | null => { const [, , theme] = useThemeMode(); if (theme !== 'dark') { return null; } - - const customCssElement = document.getElementById('css-theme'); - const styleElement = document.createElement('style'); - styleElement.setAttribute('id', 'main-palette'); - document.head.insertBefore(styleElement, customCssElement); - const palette = convertToCss(filterOnlyChangedColors(defaultPalette, darkPalette), '.rcx-content--main'); - return createPortal(palette, document.getElementById('main-palette') || document.head); -}; + return createPortal(palette, useCreateStyleContainer('main-palette')); +}); diff --git a/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx b/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx index a25d73009cbb..2a7c59c22bdd 100644 --- a/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx +++ b/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx @@ -8,19 +8,15 @@ import { darkPalette } from './paletteDark'; import { filterOnlyChangedColors } from './filterOnlyChangedColors'; import { convertToCss } from './convertToCss'; import { useThemeMode } from './hooks/useThemeMode'; +import { useCreateStyleContainer } from './hooks/useCreateStyleContainer'; export const SidebarPaletteStyleTag = memo((): ReactElement | null => { const [, , theme] = useThemeMode(); - const customCssElement = document.getElementById('css-theme'); - const styleElement = document.createElement('style'); - styleElement.setAttribute('id', 'sidebar-palette'); - document.head.insertBefore(styleElement, customCssElement); - const palette = convertToCss( theme === 'dark' ? filterOnlyChangedColors(darkPalette, sidebarPaletteDark) : { ...darkPalette, ...defaultSidebarPalette }, '.rcx-sidebar--main', ); - return createPortal(palette, document.getElementById('sidebar-palette') || document.head); + return createPortal(palette, useCreateStyleContainer('sidebar-palette')); }); diff --git a/ee/packages/ui-theming/src/hooks/useCreateStyleContainer.ts b/ee/packages/ui-theming/src/hooks/useCreateStyleContainer.ts new file mode 100644 index 000000000000..ebfff7fe3dc1 --- /dev/null +++ b/ee/packages/ui-theming/src/hooks/useCreateStyleContainer.ts @@ -0,0 +1,7 @@ +export const useCreateStyleContainer = (id: string) => { + const refElement = document.getElementById('css-theme') || document.head.lastChild; + const styleElement = document.createElement('style'); + styleElement.setAttribute('id', id); + document.head.insertBefore(styleElement, refElement); + return document.getElementById(id) || document.head.appendChild(document.createElement('style')); +}; From ed4fe087bccc36515d6b491888d54792e3c3b239 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 14 Feb 2023 17:45:47 -0300 Subject: [PATCH 04/25] fix composer color --- .../client/imports/components/message-box.css | 26 ------------ .../MessageComposer/MessageComposerInput.tsx | 42 ++++++++++++++++++- 2 files changed, 40 insertions(+), 28 deletions(-) diff --git a/apps/meteor/app/theme/client/imports/components/message-box.css b/apps/meteor/app/theme/client/imports/components/message-box.css index 6ac74b1d5d36..877a643e114f 100644 --- a/apps/meteor/app/theme/client/imports/components/message-box.css +++ b/apps/meteor/app/theme/client/imports/components/message-box.css @@ -31,32 +31,6 @@ font-size: 0.75rem; } - &__textarea { - overflow-y: auto; - - width: 100%; - height: 23px; - - min-height: 23px; - max-height: 155px; - padding: 0; - - resize: none; - - color: var(--message-box-color); - border: 0; - background-color: transparent; - - font-family: inherit; - font-size: var(--message-box-text-size); - - line-height: 21px; - - &::placeholder { - color: var(--message-box-placeholder-color); - } - } - &__audio-message { display: flex; diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx index 8650d1b0bffb..0ffc94291ae2 100644 --- a/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx +++ b/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx @@ -1,11 +1,49 @@ -import { Box } from '@rocket.chat/fuselage'; +import { Box, Palette } from '@rocket.chat/fuselage'; +import { css } from '@rocket.chat/css-in-js'; import type { ComponentProps, ReactElement } from 'react'; import { forwardRef } from 'react'; +const messageComposerInputStyle = css` + overflow-y: auto; + + width: 100%; + height: 23px; + + min-height: 23px; + max-height: 155px; + padding: 0; + + resize: none; + + color: ${Palette.text['font-default']}; + border: 0; + background-color: transparent; + + font-family: inherit; + font-size: var(--message-box-text-size); + + line-height: 21px; + + &::placeholder { + color: var(--message-box-placeholder-color); + } +`; + const MessageComposerInput = forwardRef>( (props, ref): ReactElement => ( - + ), ); From 03313797f41c414e81cf2214c800066e721ab2f2 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 14 Feb 2023 18:11:47 -0300 Subject: [PATCH 05/25] fix MessageComposerInput style --- .../MessageComposer/MessageComposerInput.tsx | 23 ++++--------------- 1 file changed, 4 insertions(+), 19 deletions(-) diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx index 0ffc94291ae2..18be21ab141c 100644 --- a/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx +++ b/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx @@ -4,28 +4,10 @@ import type { ComponentProps, ReactElement } from 'react'; import { forwardRef } from 'react'; const messageComposerInputStyle = css` - overflow-y: auto; - - width: 100%; - height: 23px; - - min-height: 23px; - max-height: 155px; - padding: 0; - resize: none; - color: ${Palette.text['font-default']}; - border: 0; - background-color: transparent; - - font-family: inherit; - font-size: var(--message-box-text-size); - - line-height: 21px; - &::placeholder { - color: var(--message-box-placeholder-color); + color: ${Palette.text['font-annotation']}; } `; @@ -33,7 +15,10 @@ const MessageComposerInput = forwardRef ( Date: Tue, 14 Feb 2023 18:45:02 -0300 Subject: [PATCH 06/25] fix review --- .../src/hooks/useCreateStyleContainer.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/ee/packages/ui-theming/src/hooks/useCreateStyleContainer.ts b/ee/packages/ui-theming/src/hooks/useCreateStyleContainer.ts index ebfff7fe3dc1..2db68e1248f8 100644 --- a/ee/packages/ui-theming/src/hooks/useCreateStyleContainer.ts +++ b/ee/packages/ui-theming/src/hooks/useCreateStyleContainer.ts @@ -1,7 +1,11 @@ +import { useMemo } from 'react'; + export const useCreateStyleContainer = (id: string) => { - const refElement = document.getElementById('css-theme') || document.head.lastChild; - const styleElement = document.createElement('style'); - styleElement.setAttribute('id', id); - document.head.insertBefore(styleElement, refElement); - return document.getElementById(id) || document.head.appendChild(document.createElement('style')); + return useMemo(() => { + const refElement = document.getElementById('css-theme') || document.head.lastChild; + const styleElement = document.createElement('style'); + styleElement.setAttribute('id', id); + document.head.insertBefore(styleElement, refElement); + return document.getElementById(id) || document.head.appendChild(document.createElement('style')); + }, [id]); }; From 1f861e7e707771db14f78fb91b16d63e4ae93c14 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Wed, 15 Feb 2023 15:41:43 -0300 Subject: [PATCH 07/25] fix font-info --- apps/meteor/client/sidebar/footer/SidebarFooterDefault.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/meteor/client/sidebar/footer/SidebarFooterDefault.tsx b/apps/meteor/client/sidebar/footer/SidebarFooterDefault.tsx index aba6617be232..1abd572ceeb0 100644 --- a/apps/meteor/client/sidebar/footer/SidebarFooterDefault.tsx +++ b/apps/meteor/client/sidebar/footer/SidebarFooterDefault.tsx @@ -14,7 +14,7 @@ const SidebarFooterDefault = (): ReactElement => { } & a:any-link { - color: ${Palette.text['font-on-info']}; + color: ${Palette.text['font-info']}; } `; From c4d3eec02ed49c67bfe1c664177c9c89288db280 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 16 Feb 2023 17:19:47 -0300 Subject: [PATCH 08/25] fuselage update --- yarn.lock | 78 ++++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 68 insertions(+), 10 deletions(-) diff --git a/yarn.lock b/yarn.lock index 7091c1b4658a..d7851f553322 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6680,6 +6680,19 @@ __metadata: languageName: node linkType: hard +"@rocket.chat/css-in-js@npm:~0.31.23-dev.55": + version: 0.31.23-dev.55 + resolution: "@rocket.chat/css-in-js@npm:0.31.23-dev.55" + dependencies: + "@emotion/hash": ^0.9.0 + "@rocket.chat/css-supports": ~0.31.23-dev.55 + "@rocket.chat/memo": ~0.31.23-dev.55 + "@rocket.chat/stylis-logical-props-middleware": ~0.31.23-dev.55 + stylis: ~4.1.3 + checksum: 572c907cba9dd5f02f7922dd23676541cffdf31beb2b943b7dc743cd5325d859356db72b66f734f550dc311c327c4e8fe8ad4af1c4db27ad8843018e8cf140ac + languageName: node + linkType: hard + "@rocket.chat/css-supports@npm:~0.31.23-dev.50": version: 0.31.23-dev.50 resolution: "@rocket.chat/css-supports@npm:0.31.23-dev.50" @@ -6689,6 +6702,15 @@ __metadata: languageName: node linkType: hard +"@rocket.chat/css-supports@npm:~0.31.23-dev.55": + version: 0.31.23-dev.55 + resolution: "@rocket.chat/css-supports@npm:0.31.23-dev.55" + dependencies: + "@rocket.chat/memo": ~0.31.23-dev.55 + checksum: 4659ad86e98ccddfba5d3a3d735b2fc3bb50b839675d48fbac73b2b1575c451e6abe0111c2b2813af4e683eb3f9c40f6956fb4e2ec5d9919eea672cb75cc5bd1 + languageName: node + linkType: hard + "@rocket.chat/css-supports@npm:~0.31.23-dev.9": version: 0.31.23-dev.9 resolution: "@rocket.chat/css-supports@npm:0.31.23-dev.9" @@ -6882,13 +6904,20 @@ __metadata: languageName: node linkType: hard -"@rocket.chat/fuselage-tokens@npm:next, @rocket.chat/fuselage-tokens@npm:~0.32.0-dev.226": +"@rocket.chat/fuselage-tokens@npm:next": version: 0.32.0-dev.226 resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.226" checksum: b956f4cfd3c032fe35c5682da4b75144e0360a523de958e0afa961c8ee2513071e1ede0ab90d7b212bfa624aa62001aec22316b13ad11f96d6bf00651a78c0f5 languageName: node linkType: hard +"@rocket.chat/fuselage-tokens@npm:~0.32.0-dev.231": + version: 0.32.0-dev.231 + resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.231" + checksum: 104b7551edfdefda955babb29d640bf9561be63fa322364310753ba4e1ccfa80c860495354e945a61b2ad15304de9f052aeab38bfc2f98c59e13855d54bc53dd + languageName: node + linkType: hard + "@rocket.chat/fuselage-ui-kit@workspace:^, @rocket.chat/fuselage-ui-kit@workspace:packages/fuselage-ui-kit": version: 0.0.0-use.local resolution: "@rocket.chat/fuselage-ui-kit@workspace:packages/fuselage-ui-kit" @@ -6945,14 +6974,14 @@ __metadata: linkType: soft "@rocket.chat/fuselage@npm:next": - version: 0.32.0-dev.276 - resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.276" - dependencies: - "@rocket.chat/css-in-js": ~0.31.23-dev.50 - "@rocket.chat/css-supports": ~0.31.23-dev.50 - "@rocket.chat/fuselage-tokens": ~0.32.0-dev.226 - "@rocket.chat/memo": ~0.31.23-dev.50 - "@rocket.chat/styled": ~0.31.23-dev.50 + version: 0.32.0-dev.281 + resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.281" + dependencies: + "@rocket.chat/css-in-js": ~0.31.23-dev.55 + "@rocket.chat/css-supports": ~0.31.23-dev.55 + "@rocket.chat/fuselage-tokens": ~0.32.0-dev.231 + "@rocket.chat/memo": ~0.31.23-dev.55 + "@rocket.chat/styled": ~0.31.23-dev.55 invariant: ^2.2.4 react-aria: ~3.19.0 react-keyed-flatten-children: ^1.3.0 @@ -6964,7 +6993,7 @@ __metadata: react: ^17.0.2 react-dom: ^17.0.2 react-virtuoso: 1.2.4 - checksum: 4c921089f2a7abbbb245ccccbaa4f9a11ddd61c015fb70cb3a3d7cae7900127957755c3620de79252af995ee7d3fee31f7516d65b04570bec4f6dfc6a0609ece + checksum: a9c7ae991778db9a2e1866f0c795a8276584347b86e1968ed4e37aeecbd9f5bfdab8bcb82d41a8db21e8da8f75c8a9a111d4331a1b9bed417be37f7eefe92948 languageName: node linkType: hard @@ -7172,6 +7201,13 @@ __metadata: languageName: node linkType: hard +"@rocket.chat/memo@npm:~0.31.23-dev.55": + version: 0.31.23-dev.55 + resolution: "@rocket.chat/memo@npm:0.31.23-dev.55" + checksum: cb779a421cbce1560113cf3e2be274474bb9ecb41e29864514c312a38539bd248f009f357fd577a509752aa28d7699279fdade944cf610260d69365782f27e6a + languageName: node + linkType: hard + "@rocket.chat/message-parser@npm:next": version: 0.32.0-dev.224 resolution: "@rocket.chat/message-parser@npm:0.32.0-dev.224" @@ -7893,6 +7929,16 @@ __metadata: languageName: node linkType: hard +"@rocket.chat/styled@npm:~0.31.23-dev.55": + version: 0.31.23-dev.55 + resolution: "@rocket.chat/styled@npm:0.31.23-dev.55" + dependencies: + "@rocket.chat/css-in-js": ~0.31.23-dev.55 + tslib: ^2.3.1 + checksum: 7d83872ae45b43f3e73d865899c60a46723f233f4b2ee0c682fa8deab020f42095c914afafcfe6759ca65c72c39363496957bb0610c3ab04a7422a2fc20fb839 + languageName: node + linkType: hard + "@rocket.chat/stylis-logical-props-middleware@npm:~0.31.23-dev.50": version: 0.31.23-dev.50 resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.23-dev.50" @@ -7905,6 +7951,18 @@ __metadata: languageName: node linkType: hard +"@rocket.chat/stylis-logical-props-middleware@npm:~0.31.23-dev.55": + version: 0.31.23-dev.55 + resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.23-dev.55" + dependencies: + "@rocket.chat/css-supports": ~0.31.23-dev.55 + tslib: ^2.3.1 + peerDependencies: + stylis: 4.0.10 + checksum: 06789d858a3a85b709919f28c92087dd3d5f8d79c23c1add2c9ecbfa21620b6dcbd3a4bfdd3a67ddcee399b2f3077e5e0a3abc60c09a7e4822235ed28b2688bb + languageName: node + linkType: hard + "@rocket.chat/stylis-logical-props-middleware@npm:~0.31.23-dev.9": version: 0.31.23-dev.9 resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.23-dev.9" From e075a903f1db78344a40e7358a8550a4f2dfa651 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 16 Feb 2023 19:05:55 -0300 Subject: [PATCH 09/25] fuselage update. fix fuselage-ui-kit build --- .../src/elements/OverflowElement.tsx | 1 + yarn.lock | 78 +++++++++---------- 2 files changed, 40 insertions(+), 39 deletions(-) diff --git a/packages/fuselage-ui-kit/src/elements/OverflowElement.tsx b/packages/fuselage-ui-kit/src/elements/OverflowElement.tsx index b1d3a3293baa..c239271f1c70 100644 --- a/packages/fuselage-ui-kit/src/elements/OverflowElement.tsx +++ b/packages/fuselage-ui-kit/src/elements/OverflowElement.tsx @@ -35,6 +35,7 @@ const OverflowElement = ({ fromTextObjectToString(surfaceRenderer, text, i) ?? '', undefined, undefined, + undefined, url, ]), [block.options, surfaceRenderer] diff --git a/yarn.lock b/yarn.lock index c8c70d72bfa5..2fe4686ca174 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6680,16 +6680,16 @@ __metadata: languageName: node linkType: hard -"@rocket.chat/css-in-js@npm:~0.31.23-dev.55": - version: 0.31.23-dev.55 - resolution: "@rocket.chat/css-in-js@npm:0.31.23-dev.55" +"@rocket.chat/css-in-js@npm:~0.31.23-dev.56": + version: 0.31.23-dev.56 + resolution: "@rocket.chat/css-in-js@npm:0.31.23-dev.56" dependencies: "@emotion/hash": ^0.9.0 - "@rocket.chat/css-supports": ~0.31.23-dev.55 - "@rocket.chat/memo": ~0.31.23-dev.55 - "@rocket.chat/stylis-logical-props-middleware": ~0.31.23-dev.55 + "@rocket.chat/css-supports": ~0.31.23-dev.56 + "@rocket.chat/memo": ~0.31.23-dev.56 + "@rocket.chat/stylis-logical-props-middleware": ~0.31.23-dev.56 stylis: ~4.1.3 - checksum: 572c907cba9dd5f02f7922dd23676541cffdf31beb2b943b7dc743cd5325d859356db72b66f734f550dc311c327c4e8fe8ad4af1c4db27ad8843018e8cf140ac + checksum: 3922a200cb3fa70a9ef6068f9133091691dc368ab82a23ec8e37320aac93b580ef1896d224ad2afd13b758890616f9abb896598ae72832598449aea6aea025b6 languageName: node linkType: hard @@ -6702,12 +6702,12 @@ __metadata: languageName: node linkType: hard -"@rocket.chat/css-supports@npm:~0.31.23-dev.55": - version: 0.31.23-dev.55 - resolution: "@rocket.chat/css-supports@npm:0.31.23-dev.55" +"@rocket.chat/css-supports@npm:~0.31.23-dev.56": + version: 0.31.23-dev.56 + resolution: "@rocket.chat/css-supports@npm:0.31.23-dev.56" dependencies: - "@rocket.chat/memo": ~0.31.23-dev.55 - checksum: 4659ad86e98ccddfba5d3a3d735b2fc3bb50b839675d48fbac73b2b1575c451e6abe0111c2b2813af4e683eb3f9c40f6956fb4e2ec5d9919eea672cb75cc5bd1 + "@rocket.chat/memo": ~0.31.23-dev.56 + checksum: b6777fb1d59bb80aadda78e22b43b0493c7783740f60e2dc423234133a4c83ba351fbecd733c70b9a55922ff4efb455855851d8106f7306bc3ff10b5dc5bd8c6 languageName: node linkType: hard @@ -6911,10 +6911,10 @@ __metadata: languageName: node linkType: hard -"@rocket.chat/fuselage-tokens@npm:~0.32.0-dev.231": - version: 0.32.0-dev.231 - resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.231" - checksum: 104b7551edfdefda955babb29d640bf9561be63fa322364310753ba4e1ccfa80c860495354e945a61b2ad15304de9f052aeab38bfc2f98c59e13855d54bc53dd +"@rocket.chat/fuselage-tokens@npm:~0.32.0-dev.232": + version: 0.32.0-dev.232 + resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.232" + checksum: ff5787a329878d872f3bba29c0b7aafb841f248c396678186b5751aa00666daee1d5ad3211a366806cc1da9c348977b2fab507363348276f5e484efde249d8fb languageName: node linkType: hard @@ -6974,14 +6974,14 @@ __metadata: linkType: soft "@rocket.chat/fuselage@npm:next": - version: 0.32.0-dev.281 - resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.281" - dependencies: - "@rocket.chat/css-in-js": ~0.31.23-dev.55 - "@rocket.chat/css-supports": ~0.31.23-dev.55 - "@rocket.chat/fuselage-tokens": ~0.32.0-dev.231 - "@rocket.chat/memo": ~0.31.23-dev.55 - "@rocket.chat/styled": ~0.31.23-dev.55 + version: 0.32.0-dev.282 + resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.282" + dependencies: + "@rocket.chat/css-in-js": ~0.31.23-dev.56 + "@rocket.chat/css-supports": ~0.31.23-dev.56 + "@rocket.chat/fuselage-tokens": ~0.32.0-dev.232 + "@rocket.chat/memo": ~0.31.23-dev.56 + "@rocket.chat/styled": ~0.31.23-dev.56 invariant: ^2.2.4 react-aria: ~3.19.0 react-keyed-flatten-children: ^1.3.0 @@ -6993,7 +6993,7 @@ __metadata: react: ^17.0.2 react-dom: ^17.0.2 react-virtuoso: 1.2.4 - checksum: a9c7ae991778db9a2e1866f0c795a8276584347b86e1968ed4e37aeecbd9f5bfdab8bcb82d41a8db21e8da8f75c8a9a111d4331a1b9bed417be37f7eefe92948 + checksum: eeaafa67432ddabe44aabe826b4b76c771a1a6524b5190469937be31fade0f7254833e9bb2dc9f8512705720bad7abe1495684a5c1097d36e71338dffd286f26 languageName: node linkType: hard @@ -7201,10 +7201,10 @@ __metadata: languageName: node linkType: hard -"@rocket.chat/memo@npm:~0.31.23-dev.55": - version: 0.31.23-dev.55 - resolution: "@rocket.chat/memo@npm:0.31.23-dev.55" - checksum: cb779a421cbce1560113cf3e2be274474bb9ecb41e29864514c312a38539bd248f009f357fd577a509752aa28d7699279fdade944cf610260d69365782f27e6a +"@rocket.chat/memo@npm:~0.31.23-dev.56": + version: 0.31.23-dev.56 + resolution: "@rocket.chat/memo@npm:0.31.23-dev.56" + checksum: aa992696bcf19e0470b0e9b762be99ea4cfe4693706f4996481450b3c0165bb1a725964b2b6b46798d6e73919ad517e10cfd6a42d85b31f32eff4e8a276bc852 languageName: node linkType: hard @@ -7929,13 +7929,13 @@ __metadata: languageName: node linkType: hard -"@rocket.chat/styled@npm:~0.31.23-dev.55": - version: 0.31.23-dev.55 - resolution: "@rocket.chat/styled@npm:0.31.23-dev.55" +"@rocket.chat/styled@npm:~0.31.23-dev.56": + version: 0.31.23-dev.56 + resolution: "@rocket.chat/styled@npm:0.31.23-dev.56" dependencies: - "@rocket.chat/css-in-js": ~0.31.23-dev.55 + "@rocket.chat/css-in-js": ~0.31.23-dev.56 tslib: ^2.3.1 - checksum: 7d83872ae45b43f3e73d865899c60a46723f233f4b2ee0c682fa8deab020f42095c914afafcfe6759ca65c72c39363496957bb0610c3ab04a7422a2fc20fb839 + checksum: d342bb82a3a25a1d83c93716ebf8def8413d239628ae5fd52e19ffc982f0d42113293912254c71390fb213eb482ace7cf0c45680d473e921b59232d709b45247 languageName: node linkType: hard @@ -7951,15 +7951,15 @@ __metadata: languageName: node linkType: hard -"@rocket.chat/stylis-logical-props-middleware@npm:~0.31.23-dev.55": - version: 0.31.23-dev.55 - resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.23-dev.55" +"@rocket.chat/stylis-logical-props-middleware@npm:~0.31.23-dev.56": + version: 0.31.23-dev.56 + resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.23-dev.56" dependencies: - "@rocket.chat/css-supports": ~0.31.23-dev.55 + "@rocket.chat/css-supports": ~0.31.23-dev.56 tslib: ^2.3.1 peerDependencies: stylis: 4.0.10 - checksum: 06789d858a3a85b709919f28c92087dd3d5f8d79c23c1add2c9ecbfa21620b6dcbd3a4bfdd3a67ddcee399b2f3077e5e0a3abc60c09a7e4822235ed28b2688bb + checksum: 3b43157fbbf2e986d300162539c044dd6fe3723c921e7947d622f841b67d1f5e9020710b85ee09792f3a21e5fdc0be3003235c6e0e15d56786728552162898b1 languageName: node linkType: hard From 6251b872cb7d15ce650e9e3c3bb7503bef3a77f9 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 17 Feb 2023 11:39:56 -0300 Subject: [PATCH 10/25] replace class rcx-content--main --- apps/meteor/client/views/root/AppLayout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/meteor/client/views/root/AppLayout.tsx b/apps/meteor/client/views/root/AppLayout.tsx index aa8e89ab9053..933ca80e564a 100644 --- a/apps/meteor/client/views/root/AppLayout.tsx +++ b/apps/meteor/client/views/root/AppLayout.tsx @@ -11,10 +11,10 @@ import { useMessageLinkClicks } from './hooks/useMessageLinkClicks'; const AppLayout = (): ReactElement => { useEffect(() => { - document.body.classList.add('color-primary-font-color'); + document.body.classList.add('color-primary-font-color', 'rcx-content--main'); return () => { - document.body.classList.add('color-primary-font-color'); + document.body.classList.add('color-primary-font-color', 'rcx-content--main'); }; }, []); From 696ca9aa268e3ad7f42d20b5da60bf8d7e4679ef Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 17 Feb 2023 13:51:13 -0300 Subject: [PATCH 11/25] fix videoconf sidebar actions --- .../client/sidebar/RoomList/SideBarItemTemplateWithData.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx b/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx index e509260995a9..367851e8e16f 100644 --- a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx +++ b/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/display-name */ import type { IMessage, IRoom, ISubscription } from '@rocket.chat/core-typings'; import { isDirectMessageRoom, isMultipleDirectMessageRoom, isOmnichannelRoom, isVideoConfMessage } from '@rocket.chat/core-typings'; -import { Badge, Sidebar, SidebarItemAction, Margins } from '@rocket.chat/fuselage'; +import { Badge, Sidebar, SidebarItemAction, SidebarItemActions, Margins } from '@rocket.chat/fuselage'; import type { useTranslation } from '@rocket.chat/ui-contexts'; import { useLayout } from '@rocket.chat/ui-contexts'; import type { AllHTMLAttributes, ComponentType, ReactElement, ReactNode } from 'react'; @@ -117,10 +117,10 @@ function SideBarItemTemplateWithData({ const actions = useMemo( () => videoConfActions && ( - <> + - + ), [videoConfActions], ); From 7f97e5af5c27ee77ac1b6eeaa3cab008a5bb7bfd Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Mon, 13 Feb 2023 12:37:08 -0300 Subject: [PATCH 12/25] fix lint --- ee/packages/ui-theming/src/PaletteStyleTag.tsx | 1 - ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/ee/packages/ui-theming/src/PaletteStyleTag.tsx b/ee/packages/ui-theming/src/PaletteStyleTag.tsx index fd07c5a6198e..234eeba69a44 100644 --- a/ee/packages/ui-theming/src/PaletteStyleTag.tsx +++ b/ee/packages/ui-theming/src/PaletteStyleTag.tsx @@ -1,5 +1,4 @@ import type { ReactElement } from 'react'; -import React from 'react'; import { createPortal } from 'react-dom'; import { convertToCss } from './convertToCss'; diff --git a/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx b/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx index 5cbdbd216e03..a25d73009cbb 100644 --- a/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx +++ b/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx @@ -1,5 +1,5 @@ import type { ReactElement } from 'react'; -import React, { memo } from 'react'; +import { memo } from 'react'; import { createPortal } from 'react-dom'; import { sidebarPaletteDark } from './sidebarPaletteDark'; From 55d671f8418aa46700594ca170ad4f6cae70aade Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 14 Feb 2023 14:09:43 -0300 Subject: [PATCH 13/25] fix PaletteStyleTag memo. Create hook to create style element --- ee/packages/ui-theming/src/PaletteStyleTag.tsx | 14 +++++--------- .../ui-theming/src/SidebarPaletteStyleTag.tsx | 8 ++------ .../src/hooks/useCreateStyleContainer.ts | 7 +++++++ 3 files changed, 14 insertions(+), 15 deletions(-) create mode 100644 ee/packages/ui-theming/src/hooks/useCreateStyleContainer.ts diff --git a/ee/packages/ui-theming/src/PaletteStyleTag.tsx b/ee/packages/ui-theming/src/PaletteStyleTag.tsx index 234eeba69a44..9cec4794df26 100644 --- a/ee/packages/ui-theming/src/PaletteStyleTag.tsx +++ b/ee/packages/ui-theming/src/PaletteStyleTag.tsx @@ -1,4 +1,5 @@ import type { ReactElement } from 'react'; +import { memo } from 'react'; import { createPortal } from 'react-dom'; import { convertToCss } from './convertToCss'; @@ -6,20 +7,15 @@ import { filterOnlyChangedColors } from './filterOnlyChangedColors'; import { defaultPalette } from './palette'; import { darkPalette } from './paletteDark'; import { useThemeMode } from './hooks/useThemeMode'; +import { useCreateStyleContainer } from './hooks/useCreateStyleContainer'; -export const PaletteStyleTag = (): ReactElement | null => { +export const PaletteStyleTag = memo((): ReactElement | null => { const [, , theme] = useThemeMode(); if (theme !== 'dark') { return null; } - - const customCssElement = document.getElementById('css-theme'); - const styleElement = document.createElement('style'); - styleElement.setAttribute('id', 'main-palette'); - document.head.insertBefore(styleElement, customCssElement); - const palette = convertToCss(filterOnlyChangedColors(defaultPalette, darkPalette), '.rcx-content--main'); - return createPortal(palette, document.getElementById('main-palette') || document.head); -}; + return createPortal(palette, useCreateStyleContainer('main-palette')); +}); diff --git a/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx b/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx index a25d73009cbb..2a7c59c22bdd 100644 --- a/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx +++ b/ee/packages/ui-theming/src/SidebarPaletteStyleTag.tsx @@ -8,19 +8,15 @@ import { darkPalette } from './paletteDark'; import { filterOnlyChangedColors } from './filterOnlyChangedColors'; import { convertToCss } from './convertToCss'; import { useThemeMode } from './hooks/useThemeMode'; +import { useCreateStyleContainer } from './hooks/useCreateStyleContainer'; export const SidebarPaletteStyleTag = memo((): ReactElement | null => { const [, , theme] = useThemeMode(); - const customCssElement = document.getElementById('css-theme'); - const styleElement = document.createElement('style'); - styleElement.setAttribute('id', 'sidebar-palette'); - document.head.insertBefore(styleElement, customCssElement); - const palette = convertToCss( theme === 'dark' ? filterOnlyChangedColors(darkPalette, sidebarPaletteDark) : { ...darkPalette, ...defaultSidebarPalette }, '.rcx-sidebar--main', ); - return createPortal(palette, document.getElementById('sidebar-palette') || document.head); + return createPortal(palette, useCreateStyleContainer('sidebar-palette')); }); diff --git a/ee/packages/ui-theming/src/hooks/useCreateStyleContainer.ts b/ee/packages/ui-theming/src/hooks/useCreateStyleContainer.ts new file mode 100644 index 000000000000..ebfff7fe3dc1 --- /dev/null +++ b/ee/packages/ui-theming/src/hooks/useCreateStyleContainer.ts @@ -0,0 +1,7 @@ +export const useCreateStyleContainer = (id: string) => { + const refElement = document.getElementById('css-theme') || document.head.lastChild; + const styleElement = document.createElement('style'); + styleElement.setAttribute('id', id); + document.head.insertBefore(styleElement, refElement); + return document.getElementById(id) || document.head.appendChild(document.createElement('style')); +}; From dc20a949be1efc9a2f1e89b2fe2fce4b167ddaec Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 14 Feb 2023 17:45:47 -0300 Subject: [PATCH 14/25] fix composer color --- .../client/imports/components/message-box.css | 26 ------------ .../MessageComposer/MessageComposerInput.tsx | 42 ++++++++++++++++++- 2 files changed, 40 insertions(+), 28 deletions(-) diff --git a/apps/meteor/app/theme/client/imports/components/message-box.css b/apps/meteor/app/theme/client/imports/components/message-box.css index 6ac74b1d5d36..877a643e114f 100644 --- a/apps/meteor/app/theme/client/imports/components/message-box.css +++ b/apps/meteor/app/theme/client/imports/components/message-box.css @@ -31,32 +31,6 @@ font-size: 0.75rem; } - &__textarea { - overflow-y: auto; - - width: 100%; - height: 23px; - - min-height: 23px; - max-height: 155px; - padding: 0; - - resize: none; - - color: var(--message-box-color); - border: 0; - background-color: transparent; - - font-family: inherit; - font-size: var(--message-box-text-size); - - line-height: 21px; - - &::placeholder { - color: var(--message-box-placeholder-color); - } - } - &__audio-message { display: flex; diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx index 8650d1b0bffb..0ffc94291ae2 100644 --- a/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx +++ b/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx @@ -1,11 +1,49 @@ -import { Box } from '@rocket.chat/fuselage'; +import { Box, Palette } from '@rocket.chat/fuselage'; +import { css } from '@rocket.chat/css-in-js'; import type { ComponentProps, ReactElement } from 'react'; import { forwardRef } from 'react'; +const messageComposerInputStyle = css` + overflow-y: auto; + + width: 100%; + height: 23px; + + min-height: 23px; + max-height: 155px; + padding: 0; + + resize: none; + + color: ${Palette.text['font-default']}; + border: 0; + background-color: transparent; + + font-family: inherit; + font-size: var(--message-box-text-size); + + line-height: 21px; + + &::placeholder { + color: var(--message-box-placeholder-color); + } +`; + const MessageComposerInput = forwardRef>( (props, ref): ReactElement => ( - + ), ); From 22793546b081cac204237ae9f430196efc94f5c0 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Tue, 14 Feb 2023 18:11:47 -0300 Subject: [PATCH 15/25] fix MessageComposerInput style --- .../MessageComposer/MessageComposerInput.tsx | 23 ++++--------------- 1 file changed, 4 insertions(+), 19 deletions(-) diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx index 0ffc94291ae2..18be21ab141c 100644 --- a/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx +++ b/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx @@ -4,28 +4,10 @@ import type { ComponentProps, ReactElement } from 'react'; import { forwardRef } from 'react'; const messageComposerInputStyle = css` - overflow-y: auto; - - width: 100%; - height: 23px; - - min-height: 23px; - max-height: 155px; - padding: 0; - resize: none; - color: ${Palette.text['font-default']}; - border: 0; - background-color: transparent; - - font-family: inherit; - font-size: var(--message-box-text-size); - - line-height: 21px; - &::placeholder { - color: var(--message-box-placeholder-color); + color: ${Palette.text['font-annotation']}; } `; @@ -33,7 +15,10 @@ const MessageComposerInput = forwardRef ( Date: Tue, 14 Feb 2023 18:45:02 -0300 Subject: [PATCH 16/25] fix review --- .../src/hooks/useCreateStyleContainer.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/ee/packages/ui-theming/src/hooks/useCreateStyleContainer.ts b/ee/packages/ui-theming/src/hooks/useCreateStyleContainer.ts index ebfff7fe3dc1..2db68e1248f8 100644 --- a/ee/packages/ui-theming/src/hooks/useCreateStyleContainer.ts +++ b/ee/packages/ui-theming/src/hooks/useCreateStyleContainer.ts @@ -1,7 +1,11 @@ +import { useMemo } from 'react'; + export const useCreateStyleContainer = (id: string) => { - const refElement = document.getElementById('css-theme') || document.head.lastChild; - const styleElement = document.createElement('style'); - styleElement.setAttribute('id', id); - document.head.insertBefore(styleElement, refElement); - return document.getElementById(id) || document.head.appendChild(document.createElement('style')); + return useMemo(() => { + const refElement = document.getElementById('css-theme') || document.head.lastChild; + const styleElement = document.createElement('style'); + styleElement.setAttribute('id', id); + document.head.insertBefore(styleElement, refElement); + return document.getElementById(id) || document.head.appendChild(document.createElement('style')); + }, [id]); }; From 75d8b3a712eadfd039747b3d5e0acd75cc9e52ef Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Wed, 15 Feb 2023 15:41:43 -0300 Subject: [PATCH 17/25] fix font-info --- apps/meteor/client/sidebar/footer/SidebarFooterDefault.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/meteor/client/sidebar/footer/SidebarFooterDefault.tsx b/apps/meteor/client/sidebar/footer/SidebarFooterDefault.tsx index aba6617be232..1abd572ceeb0 100644 --- a/apps/meteor/client/sidebar/footer/SidebarFooterDefault.tsx +++ b/apps/meteor/client/sidebar/footer/SidebarFooterDefault.tsx @@ -14,7 +14,7 @@ const SidebarFooterDefault = (): ReactElement => { } & a:any-link { - color: ${Palette.text['font-on-info']}; + color: ${Palette.text['font-info']}; } `; From c53a0c04b313aebc12a2a877d690fda82ac4e46b Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 17 Feb 2023 11:39:56 -0300 Subject: [PATCH 18/25] replace class rcx-content--main --- apps/meteor/client/views/root/AppLayout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/meteor/client/views/root/AppLayout.tsx b/apps/meteor/client/views/root/AppLayout.tsx index aa8e89ab9053..933ca80e564a 100644 --- a/apps/meteor/client/views/root/AppLayout.tsx +++ b/apps/meteor/client/views/root/AppLayout.tsx @@ -11,10 +11,10 @@ import { useMessageLinkClicks } from './hooks/useMessageLinkClicks'; const AppLayout = (): ReactElement => { useEffect(() => { - document.body.classList.add('color-primary-font-color'); + document.body.classList.add('color-primary-font-color', 'rcx-content--main'); return () => { - document.body.classList.add('color-primary-font-color'); + document.body.classList.add('color-primary-font-color', 'rcx-content--main'); }; }, []); From c08f288290194a7da2b25a6a443da5182ddfcdad Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 17 Feb 2023 13:51:13 -0300 Subject: [PATCH 19/25] fix videoconf sidebar actions --- .../client/sidebar/RoomList/SideBarItemTemplateWithData.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx b/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx index e509260995a9..367851e8e16f 100644 --- a/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx +++ b/apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/display-name */ import type { IMessage, IRoom, ISubscription } from '@rocket.chat/core-typings'; import { isDirectMessageRoom, isMultipleDirectMessageRoom, isOmnichannelRoom, isVideoConfMessage } from '@rocket.chat/core-typings'; -import { Badge, Sidebar, SidebarItemAction, Margins } from '@rocket.chat/fuselage'; +import { Badge, Sidebar, SidebarItemAction, SidebarItemActions, Margins } from '@rocket.chat/fuselage'; import type { useTranslation } from '@rocket.chat/ui-contexts'; import { useLayout } from '@rocket.chat/ui-contexts'; import type { AllHTMLAttributes, ComponentType, ReactElement, ReactNode } from 'react'; @@ -117,10 +117,10 @@ function SideBarItemTemplateWithData({ const actions = useMemo( () => videoConfActions && ( - <> + - + ), [videoConfActions], ); From d4a7f9a2b40afe03c5dffec5d88de0c504e96c1e Mon Sep 17 00:00:00 2001 From: dougfabris Date: Fri, 17 Feb 2023 18:40:25 -0300 Subject: [PATCH 20/25] fuselage update. fix fuselage-ui-kit build --- .../src/elements/OverflowElement.tsx | 1 + yarn.lock | 78 ++++++++++++++++--- 2 files changed, 69 insertions(+), 10 deletions(-) diff --git a/packages/fuselage-ui-kit/src/elements/OverflowElement.tsx b/packages/fuselage-ui-kit/src/elements/OverflowElement.tsx index b1d3a3293baa..c239271f1c70 100644 --- a/packages/fuselage-ui-kit/src/elements/OverflowElement.tsx +++ b/packages/fuselage-ui-kit/src/elements/OverflowElement.tsx @@ -35,6 +35,7 @@ const OverflowElement = ({ fromTextObjectToString(surfaceRenderer, text, i) ?? '', undefined, undefined, + undefined, url, ]), [block.options, surfaceRenderer] diff --git a/yarn.lock b/yarn.lock index 72854a2a820f..b24db19736cc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6680,6 +6680,19 @@ __metadata: languageName: node linkType: hard +"@rocket.chat/css-in-js@npm:~0.31.23-dev.57": + version: 0.31.23-dev.57 + resolution: "@rocket.chat/css-in-js@npm:0.31.23-dev.57" + dependencies: + "@emotion/hash": ^0.9.0 + "@rocket.chat/css-supports": ~0.31.23-dev.57 + "@rocket.chat/memo": ~0.31.23-dev.57 + "@rocket.chat/stylis-logical-props-middleware": ~0.31.23-dev.57 + stylis: ~4.1.3 + checksum: 653ea80eef20a185edfa9364a7eb0a9f68f90d3ad1347c4d47badb9b4ff275697a2df79621f1f924a7b7a9a2a9ac336be43ad8d6d1eb94f64b094c977106cbf7 + languageName: node + linkType: hard + "@rocket.chat/css-supports@npm:~0.31.23-dev.50": version: 0.31.23-dev.50 resolution: "@rocket.chat/css-supports@npm:0.31.23-dev.50" @@ -6689,6 +6702,15 @@ __metadata: languageName: node linkType: hard +"@rocket.chat/css-supports@npm:~0.31.23-dev.57": + version: 0.31.23-dev.57 + resolution: "@rocket.chat/css-supports@npm:0.31.23-dev.57" + dependencies: + "@rocket.chat/memo": ~0.31.23-dev.57 + checksum: 38680a6334cb52e4adea73ec4442e8aceaf6c9dbf0bc629ba56d52af0a58573adb12543120db20cffff66f8109b4665963bf4368608d7d12c4e38188db36152a + languageName: node + linkType: hard + "@rocket.chat/css-supports@npm:~0.31.23-dev.9": version: 0.31.23-dev.9 resolution: "@rocket.chat/css-supports@npm:0.31.23-dev.9" @@ -6882,13 +6904,20 @@ __metadata: languageName: node linkType: hard -"@rocket.chat/fuselage-tokens@npm:next, @rocket.chat/fuselage-tokens@npm:~0.32.0-dev.226": +"@rocket.chat/fuselage-tokens@npm:next": version: 0.32.0-dev.226 resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.226" checksum: b956f4cfd3c032fe35c5682da4b75144e0360a523de958e0afa961c8ee2513071e1ede0ab90d7b212bfa624aa62001aec22316b13ad11f96d6bf00651a78c0f5 languageName: node linkType: hard +"@rocket.chat/fuselage-tokens@npm:~0.32.0-dev.233": + version: 0.32.0-dev.233 + resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.233" + checksum: 3cef3a3be74d9f04e996d51a33ec8299734686e7b6d650ce5e96022970f80093fd40ae25be1536b56c4d10e541fd7c6c632138820ff00bbd78afc45e8e7cea6b + languageName: node + linkType: hard + "@rocket.chat/fuselage-ui-kit@workspace:^, @rocket.chat/fuselage-ui-kit@workspace:packages/fuselage-ui-kit": version: 0.0.0-use.local resolution: "@rocket.chat/fuselage-ui-kit@workspace:packages/fuselage-ui-kit" @@ -6945,14 +6974,14 @@ __metadata: linkType: soft "@rocket.chat/fuselage@npm:next": - version: 0.32.0-dev.276 - resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.276" - dependencies: - "@rocket.chat/css-in-js": ~0.31.23-dev.50 - "@rocket.chat/css-supports": ~0.31.23-dev.50 - "@rocket.chat/fuselage-tokens": ~0.32.0-dev.226 - "@rocket.chat/memo": ~0.31.23-dev.50 - "@rocket.chat/styled": ~0.31.23-dev.50 + version: 0.32.0-dev.283 + resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.283" + dependencies: + "@rocket.chat/css-in-js": ~0.31.23-dev.57 + "@rocket.chat/css-supports": ~0.31.23-dev.57 + "@rocket.chat/fuselage-tokens": ~0.32.0-dev.233 + "@rocket.chat/memo": ~0.31.23-dev.57 + "@rocket.chat/styled": ~0.31.23-dev.57 invariant: ^2.2.4 react-aria: ~3.19.0 react-keyed-flatten-children: ^1.3.0 @@ -6964,7 +6993,7 @@ __metadata: react: ^17.0.2 react-dom: ^17.0.2 react-virtuoso: 1.2.4 - checksum: 4c921089f2a7abbbb245ccccbaa4f9a11ddd61c015fb70cb3a3d7cae7900127957755c3620de79252af995ee7d3fee31f7516d65b04570bec4f6dfc6a0609ece + checksum: b3f1f861715210d3e990dc355d9f5e04590576c53c3cb6f93496fa5ed848044632478f1efc51f35c6844c83d37594471bab37d198dbe44e3d352162bb4aa978d languageName: node linkType: hard @@ -7172,6 +7201,13 @@ __metadata: languageName: node linkType: hard +"@rocket.chat/memo@npm:~0.31.23-dev.57": + version: 0.31.23-dev.57 + resolution: "@rocket.chat/memo@npm:0.31.23-dev.57" + checksum: 8e07328a9b99ba5e6d9058e25a43caae205ca0f2e87606406f9e19e175d3d4b5b735a28329bb71f9f6b9cfed96178b0eaabf7ffd4d9506db5e2105e788d17574 + languageName: node + linkType: hard + "@rocket.chat/message-parser@npm:next": version: 0.32.0-dev.224 resolution: "@rocket.chat/message-parser@npm:0.32.0-dev.224" @@ -7894,6 +7930,16 @@ __metadata: languageName: node linkType: hard +"@rocket.chat/styled@npm:~0.31.23-dev.57": + version: 0.31.23-dev.57 + resolution: "@rocket.chat/styled@npm:0.31.23-dev.57" + dependencies: + "@rocket.chat/css-in-js": ~0.31.23-dev.57 + tslib: ^2.3.1 + checksum: 7bbacc1217964e45fccd6536074b92d699562e72f8e47dcb56df126bf5dcedf8217a1792f7b315747a4703607c3a14065835e0df8c6d677e6635c143906b3d1c + languageName: node + linkType: hard + "@rocket.chat/stylis-logical-props-middleware@npm:~0.31.23-dev.50": version: 0.31.23-dev.50 resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.23-dev.50" @@ -7906,6 +7952,18 @@ __metadata: languageName: node linkType: hard +"@rocket.chat/stylis-logical-props-middleware@npm:~0.31.23-dev.57": + version: 0.31.23-dev.57 + resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.23-dev.57" + dependencies: + "@rocket.chat/css-supports": ~0.31.23-dev.57 + tslib: ^2.3.1 + peerDependencies: + stylis: 4.0.10 + checksum: 8137917ca5ec4d706fb6bfcc7b00ab0a0edae6bfd9b7493a19bfce0fbbc395c8a68127bdc8a6b13f03c87cb92be57c2a50912de59a753a516e2fdc3502a08150 + languageName: node + linkType: hard + "@rocket.chat/stylis-logical-props-middleware@npm:~0.31.23-dev.9": version: 0.31.23-dev.9 resolution: "@rocket.chat/stylis-logical-props-middleware@npm:0.31.23-dev.9" From 16bbbe9fa8233f9552c928c55a1b8c9f796c2212 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Thu, 23 Feb 2023 11:54:22 -0300 Subject: [PATCH 21/25] Apply suggestions from code review --- .../ui-composer/src/MessageComposer/MessageComposerInput.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx index 18be21ab141c..9f66fa50adea 100644 --- a/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx +++ b/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx @@ -12,7 +12,7 @@ const messageComposerInputStyle = css` `; const MessageComposerInput = forwardRef>( - (props, ref): ReactElement => ( + ({ className, ...props }, ref): ReactElement => ( ), From feb198577a98d98ce029122443510c5b25bf40ed Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 23 Feb 2023 12:06:46 -0300 Subject: [PATCH 22/25] fix lint --- .../ui-composer/src/MessageComposer/MessageComposerInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx index 9f66fa50adea..02b45932c341 100644 --- a/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx +++ b/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx @@ -27,7 +27,7 @@ const MessageComposerInput = forwardRef ), From 2962efab1d2a008678e18f4c92fb19ce0305dbc4 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 23 Feb 2023 15:01:38 -0300 Subject: [PATCH 23/25] fix --- .../components/body/composer/messageBox/MessageBox.tsx | 1 - .../src/MessageComposer/MessageComposerInput.tsx | 8 ++++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx b/apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx index e07d453c6c8a..8bd92d8dd9f4 100644 --- a/apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx +++ b/apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx @@ -390,7 +390,6 @@ const MessageBox = ({ onChange={setTyping} style={textAreaStyle} placeholder={t('Message')} - className='rc-message-box__textarea js-input-message' onKeyDown={handler} onPaste={handlePaste} aria-activedescendant={ariaActiveDescendant} diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx index 02b45932c341..eeba86c7cb4e 100644 --- a/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx +++ b/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx @@ -11,10 +11,12 @@ const messageComposerInputStyle = css` } `; -const MessageComposerInput = forwardRef>( - ({ className, ...props }, ref): ReactElement => ( +const MessageComposerInput = forwardRef>( + (props, ref): ReactElement => ( ), From ac25921d9b8542d88737505bc5196b22aec4aa38 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 23 Feb 2023 15:12:18 -0300 Subject: [PATCH 24/25] improve MessageComposerInput test selector --- apps/meteor/tests/e2e/message-actions.spec.ts | 2 +- apps/meteor/tests/e2e/team-management.spec.ts | 2 +- apps/meteor/tests/e2e/thread-actions.spec.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/meteor/tests/e2e/message-actions.spec.ts b/apps/meteor/tests/e2e/message-actions.spec.ts index ba7b9c5a6f2b..3b5899aa51db 100644 --- a/apps/meteor/tests/e2e/message-actions.spec.ts +++ b/apps/meteor/tests/e2e/message-actions.spec.ts @@ -34,7 +34,7 @@ test.describe.serial('message-actions', () => { await poHomeChannel.content.sendMessage('this is a message for reply'); await poHomeChannel.content.openLastMessageMenu(); await page.locator('[data-qa-id="reply-in-thread"]').click(); - await page.locator('.rcx-vertical-bar .js-input-message').type('this is a reply message'); + await page.locator('.rcx-vertical-bar').locator('role=textbox[name="Message"]').type('this is a reply message'); await page.keyboard.press('Enter'); await expect(poHomeChannel.tabs.flexTabViewThreadMessage).toHaveText('this is a reply message'); diff --git a/apps/meteor/tests/e2e/team-management.spec.ts b/apps/meteor/tests/e2e/team-management.spec.ts index 384a1c01002d..78f155b61f6f 100644 --- a/apps/meteor/tests/e2e/team-management.spec.ts +++ b/apps/meteor/tests/e2e/team-management.spec.ts @@ -45,7 +45,7 @@ test.describe.serial('teams-management', () => { await poHomeTeam.content.openLastMessageMenu(); await page.locator('[data-qa-id="reply-in-thread"]').click(); - await page.locator('.rcx-vertical-bar .js-input-message').type('any-reply-message'); + await page.locator('.rcx-vertical-bar').locator('role=textbox[name="Message"]').type('any-reply-message'); await page.keyboard.press('Enter'); await expect(poHomeTeam.tabs.flexTabViewThreadMessage).toHaveText('any-reply-message'); diff --git a/apps/meteor/tests/e2e/thread-actions.spec.ts b/apps/meteor/tests/e2e/thread-actions.spec.ts index 616c85b2bee1..d350be440b40 100644 --- a/apps/meteor/tests/e2e/thread-actions.spec.ts +++ b/apps/meteor/tests/e2e/thread-actions.spec.ts @@ -34,7 +34,7 @@ test.describe.serial('message-actions', () => { }); test('expect delete the thread message and keep thread open if has more than one message', async ({ page }) => { - await page.locator('.rcx-vertical-bar .js-input-message').type('another reply message'); + await page.locator('.rcx-vertical-bar').locator('role=textbox[name="Message"]').type('another reply message'); await page.keyboard.press('Enter'); await poHomeChannel.content.openLastThreadMessageMenu(); From f545f76a6ef591f2c7fba47be76ba55135d8ecac Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Thu, 23 Feb 2023 15:20:25 -0300 Subject: [PATCH 25/25] fix type --- .../ui-composer/src/MessageComposer/MessageComposerInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx index eeba86c7cb4e..f1e3d7f791f1 100644 --- a/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx +++ b/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx @@ -11,7 +11,7 @@ const messageComposerInputStyle = css` } `; -const MessageComposerInput = forwardRef>( +const MessageComposerInput = forwardRef>( (props, ref): ReactElement => (