Skip to content

feat: Added annotation to WizardActions component #36575

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kodiakhq merged 7 commits into from
Jul 31, 2025
Merged

feat: Added annotation to WizardActions component #36575

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
091162b
feat: added annotation to WizardActions
aleksandernsilva Jul 30, 2025
d4da2f2
chore: added storybook stories
aleksandernsilva Jul 30, 2025
ec23b19
test: added unit tests
aleksandernsilva Jul 30, 2025
f8c6a24
chore: changeset
aleksandernsilva Jul 30, 2025
f646406
chore: removed break line
aleksandernsilva Jul 30, 2025
baea9b3
test: updated snapshots
aleksandernsilva Jul 30, 2025
e8bd682
Merge branch 'develop' into feat/wizard-actions-annotation
kodiakhq[bot] Jul 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/popular-trees-hunt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rocket.chat/ui-client": patch
---

Adds an annotation prop to the WizardActions component, enabling the display of a contextual description alongside the action buttons.
19 changes: 19 additions & 0 deletions packages/ui-client/src/components/Wizard/WizardActions.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { composeStories } from '@storybook/react';
import { render } from '@testing-library/react';
import { axe } from 'jest-axe';

import * as stories from './WizardActions.stories';

const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);

test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
const tree = render(<Story />);
expect(tree.baseElement).toMatchSnapshot();
});

test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
const { container } = render(<Story />);

const results = await axe(container);
expect(results).toHaveNoViolations();
});
49 changes: 49 additions & 0 deletions packages/ui-client/src/components/Wizard/WizardActions.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { Box } from '@rocket.chat/fuselage';
import type { Meta, StoryFn } from '@storybook/react';
import { ComponentProps } from 'react';

import Wizard from './Wizard';
import WizardActions from './WizardActions';
import WizardBackButton from './WizardBackButton';
import WizardNextButton from './WizardNextButton';
import { useWizard } from './useWizard';

export default {
title: 'Components/Wizard/WizardActions',
component: WizardActions,
decorators: (Story) => {
const wizardApi = useWizard({
steps: [
{ id: 'first-step', title: 'First step' },
{ id: 'second-step', title: 'Second step' },
{ id: 'third-step', title: 'Third step' },
],
});

return (
<Box width={600}>
<Wizard api={wizardApi}>
<Story />
</Wizard>
</Box>
);
},
parameters: {
layout: 'centered',
},
} satisfies Meta<typeof WizardActions>;

const Template: StoryFn<ComponentProps<typeof WizardActions>> = (args) => (
<WizardActions {...args}>
<WizardBackButton />
<WizardNextButton />
</WizardActions>
);

export const Default = Template.bind({});
Default.args = {};

export const WithAnnotation = Template.bind({});
WithAnnotation.args = {
annotation: 'This is a sample annotation',
};
11 changes: 9 additions & 2 deletions packages/ui-client/src/components/Wizard/WizardActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,18 @@ import { Box, ButtonGroup } from '@rocket.chat/fuselage';
import type { ReactNode } from 'react';

type WizardActionsProps = {
annotation?: string;
children: ReactNode;
};

const WizardActions = ({ children }: WizardActionsProps) => (
<Box className='steps-wizard-footer' pbs={24} display='flex' justifyContent='end'>
const WizardActions = ({ annotation, children }: WizardActionsProps) => (
<Box className='steps-wizard-footer' pbs={24} display='flex' alignItems='center' justifyContent='end'>
{annotation ? (
<Box mie='auto' fontScale='c1' color='annotation'>
{annotation}
</Box>
) : null}

<ButtonGroup>{children}</ButtonGroup>
</Box>
);
Expand Down
4 changes: 2 additions & 2 deletions packages/ui-client/src/components/Wizard/__snapshots__/Wizard.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ exports[`renders BasicWizard without crashing 1`] = `
</div>
</div>
<div
class="rcx-box rcx-box--full steps-wizard-footer rcx-css-h2s0k0"
class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
>
<div
class="rcx-button-group rcx-button-group--align-start"
Expand Down Expand Up @@ -153,7 +153,7 @@ exports[`renders OrderedTabsWizard without crashing 1`] = `
</div>
</div>
<div
class="rcx-box rcx-box--full steps-wizard-footer rcx-css-h2s0k0"
class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
>
<div
class="rcx-button-group rcx-button-group--align-start"
Expand Down
96 changes: 96 additions & 0 deletions packages/ui-client/src/components/Wizard/__snapshots__/WizardActions.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

exports[`renders Default without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-css-1lvbc7v"
>
<div
class="steps-wizard"
>
<div
class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
>
<div
class="rcx-button-group rcx-button-group--align-start"
role="group"
>
<button
class="rcx-box rcx-box--full rcx-button rcx-button-group__item"
disabled=""
type="button"
>
<span
class="rcx-button--content"
>
Back
</span>
</button>
<button
class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
type="button"
>
<span
class="rcx-button--content"
>
Next
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
`;

exports[`renders WithAnnotation without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full rcx-css-1lvbc7v"
>
<div
class="steps-wizard"
>
<div
class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
>
<div
class="rcx-box rcx-box--full rcx-css-kqd92f"
>
This is a sample annotation
</div>
<div
class="rcx-button-group rcx-button-group--align-start"
role="group"
>
<button
class="rcx-box rcx-box--full rcx-button rcx-button-group__item"
disabled=""
type="button"
>
<span
class="rcx-button--content"
>
Back
</span>
</button>
<button
class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
type="button"
>
<span
class="rcx-button--content"
>
Next
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
`;
Loading