diff --git a/apps/web/src/components/views/elements/Measured.tsx b/apps/web/src/components/views/elements/Measured.tsx index b0f084c0ed..9b1d337468 100644 --- a/apps/web/src/components/views/elements/Measured.tsx +++ b/apps/web/src/components/views/elements/Measured.tsx @@ -31,17 +31,23 @@ export default class Measured extends React.PureComponent { } public componentDidMount(): void { + console.log("Measured componentDidMount", this.props.sensor.current); + if (this.props.sensor.current) { + UIStore.instance.trackElementDimensions(`Measured${this.instanceId}`, this.props.sensor.current); + } UIStore.instance.on(`Measured${this.instanceId}`, this.onResize); } public componentDidUpdate(prevProps: Readonly): void { const previous = prevProps.sensor.current; const current = this.props.sensor.current; + console.log("Measured componentDidUpdate", current); if (previous === current) return; if (previous) { UIStore.instance.stopTrackingElementDimensions(`Measured${this.instanceId}`); } if (current) { + console.log("Measured trackElementDimensions"); UIStore.instance.trackElementDimensions(`Measured${this.instanceId}`, current); } } diff --git a/apps/web/src/stores/UIStore.ts b/apps/web/src/stores/UIStore.ts index 0792bb206d..8106bcd5f0 100644 --- a/apps/web/src/stores/UIStore.ts +++ b/apps/web/src/stores/UIStore.ts @@ -88,6 +88,7 @@ export default class UIStore extends EventEmitter { entries.forEach((entry) => { const trackedElementName = this.trackedUiElements.get(entry.target); if (trackedElementName) { + console.log("resizeObserverCallback for tracked", trackedElementName); this.uiElementDimensions.set(trackedElementName, entry.contentRect); this.emit(trackedElementName, UI_EVENTS.Resize, entry); } diff --git a/apps/web/src/viewmodels/room/RoomUploadViewModel.tsx b/apps/web/src/viewmodels/room/RoomUploadViewModel.tsx index 6d9aa2e489..5ec12c3a28 100644 --- a/apps/web/src/viewmodels/room/RoomUploadViewModel.tsx +++ b/apps/web/src/viewmodels/room/RoomUploadViewModel.tsx @@ -229,7 +229,6 @@ export function RoomUploadContextProvider({ }); useEffect(() => { - console.log("Reply to event!", replyToEvent); vm.setReplyToEvent(replyToEvent); }, [vm, replyToEvent]); diff --git a/apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap b/apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap index d093f4da0e..330c897bfb 100644 --- a/apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap +++ b/apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap @@ -212,7 +212,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]

Could not start a chat with this user

@@ -423,7 +423,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] = >
-
- - - -
+ + + + +
-
- - - -
+ + + + +
-
- - - -
+ + + + +
-
- - - -
+ + + +
+
-
- - - -
+ + + +
+
-
- - - -
+ + + +
+
-
- - - -
+ + + +
+
{ +}: UploadButtonViewSnapshot & UploadButtonViewActions & { defaultOpen: boolean }): JSX.Element => { const vm = useMockedViewModel(rest, { onUploadOptionSelected, }); - return ; + return ; }; const UploadButtonWrapper = withViewDocs(UploadButtonWrapperImpl, UploadButton); -export default { +const meta = { title: "Room/UploadButton", component: UploadButtonWrapper, tags: ["autodocs"], args: { + mayUpload: true, + defaultOpen: false, onUploadOptionSelected: fn(), + options: [ + { + type: "local", + label: "Attachment", + icon: AttachmentIcon, + }, + { + label: "Fun Button", + icon: ReactionIcon, + type: "fun", + }, + ], + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; + +export const WithOneOption: Story = { + // No visible difference + tags: ["skip-test"], + args: { options: [ { type: "local", @@ -40,34 +67,28 @@ export default { }, ], }, -} satisfies Meta; - -const Template: StoryFn = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - options: [ - { - type: "local", - label: "Attachment", - icon: AttachmentIcon, - }, - { - label: "Fun Button", - icon: ReactionIcon, - type: "fun", - }, - ], }; -export const WithOneOption = Template.bind({}); - -WithOneOption.args = { - options: [ - { - type: "local", - label: "Attachment", - icon: AttachmentIcon, +export const WithOpen: Story = { + args: { + defaultOpen: true, + }, + parameters: { + a11y: { + config: { + rules: [ + { + // Menu contains a header which is invalid + id: "aria-required-children", + enabled: false, + }, + { + // Menu pops open by default + id: "aria-hidden-focus", + enabled: false, + }, + ], + }, }, - ], + }, }; diff --git a/packages/shared-components/src/room/composer/UploadButton/UploadButton.test.tsx b/packages/shared-components/src/room/composer/UploadButton/UploadButton.test.tsx index bbe3d70605..13a754b997 100644 --- a/packages/shared-components/src/room/composer/UploadButton/UploadButton.test.tsx +++ b/packages/shared-components/src/room/composer/UploadButton/UploadButton.test.tsx @@ -23,7 +23,7 @@ describe("UploadButton", () => { it("can open the menu and select an option", async () => { const onUploadOptionSelected = fn(); const { container, getByRole } = render(); - await userEvent.click(getByRole("button", { name: "Open attachment menu" })); + await userEvent.click(getByRole("button", { name: "Attachment" })); expect(container).toMatchSnapshot(); await userEvent.click(screen.getByRole("menuitem", { name: "Fun Button" })); expect(onUploadOptionSelected).toHaveBeenCalledWith("fun"); @@ -33,7 +33,7 @@ describe("UploadButton", () => { const onUploadOptionSelected = fn(); const { getByRole } = render(); await userEvent.keyboard("[ControlLeft>]"); - await userEvent.click(getByRole("button", { name: "Open attachment menu" })); + await userEvent.click(getByRole("button", { name: "Attachment" })); expect(onUploadOptionSelected).toHaveBeenCalledWith("local"); }); }); diff --git a/packages/shared-components/src/room/composer/UploadButton/UploadButton.tsx b/packages/shared-components/src/room/composer/UploadButton/UploadButton.tsx index fc259c07c6..956e667df4 100644 --- a/packages/shared-components/src/room/composer/UploadButton/UploadButton.tsx +++ b/packages/shared-components/src/room/composer/UploadButton/UploadButton.tsx @@ -23,7 +23,7 @@ import { useViewModel, type ViewModel } from "../../../core/viewmodel"; export interface UploadButtonViewSnapshot { mayUpload: boolean; - options: { type: string; label: string; icon: ComponentType> }[]; + options: { type: string; label: string; icon?: ComponentType> }[]; } export interface UploadButtonViewActions { @@ -41,12 +41,15 @@ export interface UploadButtonViewActions { */ export function UploadButton({ vm, + defaultOpen = false, ...rootButtonProps }: PropsWithChildren< - { vm: ViewModel } & ComponentProps + { vm: ViewModel; defaultOpen?: boolean } & ComponentProps< + typeof IconButton + > >): ReactElement { const i18n = useI18n(); - const [open, setOpen] = useState(false); + const [open, setOpen] = useState(defaultOpen); const { options } = useViewModel(vm); // Ctrl+click is a shortcut to selecting the first item. // N.B. Clicking and shift clicking is handled by radix and @@ -68,10 +71,10 @@ export function UploadButton({ vm.onUploadOptionSelected(options[0].type)} > - + {Icon ? : } ); } diff --git a/packages/shared-components/src/room/composer/UploadButton/__snapshots__/UploadButton.test.tsx.snap b/packages/shared-components/src/room/composer/UploadButton/__snapshots__/UploadButton.test.tsx.snap index 3c28593c3b..afdb980723 100644 --- a/packages/shared-components/src/room/composer/UploadButton/__snapshots__/UploadButton.test.tsx.snap +++ b/packages/shared-components/src/room/composer/UploadButton/__snapshots__/UploadButton.test.tsx.snap @@ -18,7 +18,7 @@ exports[`UploadButton > can open the menu and select an option 1`] = ` role="button" style="--cpd-icon-button-size: 32px;" tabindex="0" - title="Open attachment menu" + title="Attachment" type="button" >
renders a default button 1`] = ` role="button" style="--cpd-icon-button-size: 32px;" tabindex="0" - title="Open attachment menu" + title="Attachment" type="button" >