fleet/frontend/components/FlashMessage/FlashMessage.stories.tsx
jacobshandling d3ccb51755
UI - Improve UX of Flash messages (#22836)
## #22661 


![ezgif-6-71e48912ae](https://github.com/user-attachments/assets/01144620-0eba-48f0-9254-cc4795fde9fd)

- Update `FlashMessage` behavior to, by default, hide itself when the
user performs any URL-changing navigation
- Add `persistOnPageChange` option to `renderFlash` API and associated
notification context and reducer logic, allowing override of this
behavior on a per-call basis
- Ensure proper order of evaluation of URL changes and render flash
action dispatches on the event loop
- Clean up legacy unused "undo"-related arguments and logic
- Allow the user to click in the same horizontal dimension as a flash
message
- Other misc. cleanup and refactoring

[Demo - messages hidden on page (any URL)
change](https://www.loom.com/share/1e884b6ba11c4b59bc74f51df3690131?sid=9b53e78b-6535-4541-b676-377760366cf4)

- [x] Changes file added for user-visible changes in `changes/`,
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2024-10-22 10:52:20 -07:00

35 lines
737 B
TypeScript

import React from "react";
import { Meta, Story } from "@storybook/react";
import { noop } from "lodash";
import FlashMessage from ".";
import { IFlashMessage } from "./FlashMessage";
import "../../index.scss";
export default {
component: FlashMessage,
title: "Components/FlashMessage",
argTypes: {
fullWidth: {
control: "boolean",
},
isPersistent: {
control: "boolean",
},
},
args: {
fullWidth: true,
isPersistent: true,
notification: {
message: "I am a message. Hear me roar!",
alertType: "success",
isVisible: true,
},
},
} as Meta;
const Template: Story<IFlashMessage> = (props) => <FlashMessage {...props} />;
export const Default = Template.bind({});