chinwag/chinwagsocial
chinwag/chinwagsocial
2
0
Fork 0
Code Issues Pull requests Releases 14 Wiki Activity

feat: More obvious loading state when submitting a post (#35153)

Browse source
This commit is contained in:
diondiondion 2025-06-24 16:08:48 +02:00 • committed by GitHub
commit 644da36336
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 120 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

44
app/javascript/mastodon/components/button/button.stories.tsx
View file

@ -11,6 +11,7 @@ const meta = {
compact: false,
dangerous: false,
disabled: false,
loading: false,
onClick: fn(),
},
argTypes: {
@ -41,16 +42,6 @@ const buttonTest: Story['play'] = async ({ args, canvas, userEvent }) => {
await expect(args.onClick).toHaveBeenCalled();
};
const disabledButtonTest: Story['play'] = async ({
args,
canvas,
userEvent,
}) => {
const button = await canvas.findByRole('button');
await userEvent.click(button);
await expect(args.onClick).not.toHaveBeenCalled();
};
export const Primary: Story = {
args: {
children: 'Primary button',
@ -82,6 +73,18 @@ export const Dangerous: Story = {
play: buttonTest,
};
const disabledButtonTest: Story['play'] = async ({
args,
canvas,
userEvent,
}) => {
const button = await canvas.findByRole('button');
await userEvent.click(button);
// Disabled controls can't be focused
await expect(button).not.toHaveFocus();
await expect(args.onClick).not.toHaveBeenCalled();
};
export const PrimaryDisabled: Story = {
args: {
...Primary.args,
@ -97,3 +100,24 @@ export const SecondaryDisabled: Story = {
},
play: disabledButtonTest,
};
const loadingButtonTest: Story['play'] = async ({
args,
canvas,
userEvent,
}) => {
const button = await canvas.findByRole('button', {
name: 'Primary button Loading…',
});
await userEvent.click(button);
await expect(button).toHaveFocus();
await expect(args.onClick).not.toHaveBeenCalled();
};
export const Loading: Story = {
args: {
...Primary.args,
loading: true,
},
play: loadingButtonTest,
};