chore: new secondary-danger generic modal variant (#37223)

Co-authored-by: Douglas Fabris <[email protected]>

Author: 2 people

packages/ui-client/src/components/Modal/GenericModal/GenericModal.spec.tsx

@@ -1,6 +1,7 @@
 import { useSetModal } from '@rocket.chat/ui-contexts';
 import { act, screen, renderHook } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
 import type { ReactElement } from 'react';
 import { Suspense } from 'react';
 
@@ -25,6 +26,21 @@ const renderModal = (modalElement: ReactElement) => {
 	return { setModal };
 };
 
+describe('renders', () => {
+	it('should render a modal without crashing', async () => {
+		renderModal(<GenericModal title='Modal' />);
+
+		expect(await screen.findByRole('dialog', { name: 'Modal' })).toMatchSnapshot();
+	});
+
+	it('should have no accessibility violations when rendered', async () => {
+		renderModal(<GenericModal title='Modal' />);
+
+		const results = await axe(screen.getByRole('dialog', { name: 'Modal' }));
+		expect(results).toHaveNoViolations();
+	});
+});
+
 describe('callbacks', () => {
 	it('should call onClose callback when dismissed', async () => {
 		const handleClose = jest.fn();

packages/ui-client/src/components/Modal/GenericModal/GenericModal.stories.tsx

@@ -46,6 +46,9 @@ Warning.args = { variant: 'warning' };
 export const Success = Template.bind({});
 Success.args = { variant: 'success' };
 
+export const DangerSecondary = Template.bind({});
+DangerSecondary.args = { variant: 'secondary-danger' };
+
 export const WithDontAskAgain: StoryFn<typeof GenericModalDoNotAskAgain> = (args) => <GenericModalDoNotAskAgain {...args} />;
 WithDontAskAgain.args = {
 	dontAskAgain: {

packages/ui-client/src/components/Modal/GenericModal/GenericModal.tsx

@@ -22,7 +22,7 @@ import type { RequiredModalProps } from './withDoNotAskAgain';
 import { withDoNotAskAgain } from './withDoNotAskAgain';
 import { modalStore } from '../../../providers/ModalProvider/ModalStore';
 
-type VariantType = 'danger' | 'warning' | 'info' | 'success' | 'upsell';
+type VariantType = 'danger' | 'secondary-danger' | 'warning' | 'info' | 'success' | 'upsell';
 
 type GenericModalProps = RequiredModalProps & {
 	variant?: VariantType;
@@ -50,6 +50,8 @@ const getButtonProps = (variant: VariantType): ComponentProps<typeof Button> =>
 	switch (variant) {
 		case 'danger':
 			return { danger: true };
+		case 'secondary-danger':
+			return { secondary: true, danger: true };
 		case 'warning':
 		case 'upsell':
 			return { primary: true };
@@ -59,7 +61,7 @@ const getButtonProps = (variant: VariantType): ComponentProps<typeof Button> =>
 };
 
 const renderIcon = (icon: GenericModalProps['icon'], variant: VariantType): ReactNode => {
-	if (icon === null) {
+	if (icon === null || iconMap[variant] === undefined) {
 		return null;
 	}
 

packages/ui-client/src/components/Modal/GenericModal/__snapshots__/GenericModal.spec.tsx.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders should render a modal without crashing 1`] = `
+<dialog
+  aria-labelledby=":r0:-title"
+  aria-modal="true"
+  class="rcx-box rcx-box--full rcx-modal"
+  open=""
+>
+  <div
+    class="rcx-box rcx-box--full rcx-modal__inner rcx-css-1e2ego0"
+  >
+    <header
+      class="rcx-box rcx-box--full rcx-modal__header"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-modal__header-inner"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-trljwa rcx-css-3k19uf"
+        >
+          <i
+            aria-hidden="true"
+            class="rcx-box rcx-box--full rcx-icon--name-info rcx-icon rcx-css-zozvgz"
+          >
+            
+          </i>
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__header-text rcx-css-trljwa rcx-css-lma364"
+        >
+          <h2
+            class="rcx-box rcx-box--full rcx-modal__title"
+            id=":r0:-title"
+          >
+            Modal
+          </h2>
+        </div>
+      </div>
+    </header>
+    <div
+      class="rcx-box rcx-box--full rcx-modal__content rcx-css-1vw7itl"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-modal__content-wrapper rcx-css-r1bpeb"
+      />
+    </div>
+    <div
+      class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
+    >
+      <div
+        class="rcx-button-group rcx-button-group--align-end"
+        role="group"
+      />
+    </div>
+  </div>
+</dialog>
+`;