feat(user-dialog): add user dialog listbox

.changeset/happy-peaches-kick.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/user-dialog': major
+'@twilio-paste/core': minor
+---
+
+[User Dialog] create package

.changeset/pink-cameras-exist.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/topbar': minor
+'@twilio-paste/core': minor
+---
+
+[Topbar] Add list, list item, and separator to User Dialog

.codesandbox/ci.json

@@ -99,6 +99,7 @@
     "/packages/paste-core/components/truncate",
     "/packages/paste-types",
     "/packages/paste-libraries/uid",
+    "/packages/paste-core/components/user-dialog",
     "/packages/paste-utils"
   ],
   "sandboxes": [

packages/paste-codemods/tools/.cache/mappings.json

@@ -279,14 +279,18 @@
   "Tooltip": "@twilio-paste/core/tooltip",
   "useTooltipState": "@twilio-paste/core/tooltip",
   "Topbar": "@twilio-paste/core/topbar",
-  "UserDialog": "@twilio-paste/core/topbar",
-  "UserDialogContainer": "@twilio-paste/core/topbar",
-  "UserDialogContext": "@twilio-paste/core/topbar",
-  "UserDialogUserEmail": "@twilio-paste/core/topbar",
-  "UserDialogUserInfo": "@twilio-paste/core/topbar",
-  "UserDialogUserName": "@twilio-paste/core/topbar",
-  "useUserDialogState": "@twilio-paste/core/topbar",
   "Truncate": "@twilio-paste/core/truncate",
+  "UserDialog": "@twilio-paste/core/user-dialog",
+  "UserDialogContainer": "@twilio-paste/core/user-dialog",
+  "UserDialogContext": "@twilio-paste/core/user-dialog",
+  "UserDialogList": "@twilio-paste/core/user-dialog",
+  "UserDialogListItem": "@twilio-paste/core/user-dialog",
+  "UserDialogSeparator": "@twilio-paste/core/user-dialog",
+  "UserDialogUserEmail": "@twilio-paste/core/user-dialog",
+  "UserDialogUserInfo": "@twilio-paste/core/user-dialog",
+  "UserDialogUserName": "@twilio-paste/core/user-dialog",
+  "useUserDialogListState": "@twilio-paste/core/user-dialog",
+  "useUserDialogState": "@twilio-paste/core/user-dialog",
   "AspectRatio": "@twilio-paste/core/aspect-ratio",
   "Flex": "@twilio-paste/core/flex",
   "Column": "@twilio-paste/core/grid",

packages/paste-core/components/topbar/__tests__/index.spec.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react';
-import {render, screen, waitFor} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import {render, screen} from '@testing-library/react';
 import {CustomizationProvider} from '@twilio-paste/customization';
 
 import {Topbar} from '../src';
-import {BasicUserDialog, StateHookUserDialog, CustomizedUserDialog} from '../stories/userDialog.stories';
 
 describe('Topbar', () => {
   it('renders correctly', () => {
@@ -14,54 +12,6 @@ describe('Topbar', () => {
     expect(renderedTopbar).toHaveStyleRule('top', '0');
   });
 
-  describe('User Dialog', () => {
-    describe('Render', () => {
-      it('should render a user dialog button with aria attributes', async () => {
-        render(<BasicUserDialog />);
-        const renderedUserDialogButton = screen.getByRole('button');
-        const renderedUserDialog = screen.getByTestId('basic-user-dialog');
-        expect(renderedUserDialogButton.getAttribute('aria-haspopup')).toEqual('dialog');
-        expect(renderedUserDialogButton.getAttribute('aria-controls')).toEqual(renderedUserDialog.id);
-        expect(renderedUserDialogButton.getAttribute('aria-expanded')).toEqual('false');
-        expect(renderedUserDialog).not.toBeVisible();
-        await waitFor(() => {
-          userEvent.click(renderedUserDialogButton);
-        });
-        expect(renderedUserDialogButton.getAttribute('aria-expanded')).toEqual('true');
-        expect(renderedUserDialog).toBeVisible();
-      });
-
-      it('should render a user dialog', () => {
-        render(<BasicUserDialog />);
-        const renderedUserDialog = screen.getByLabelText('user menu');
-        expect(renderedUserDialog.getAttribute('role')).toEqual('dialog');
-      });
-
-      // Add tests for initial focus once list items are added
-
-      it('should render a user dialog and show/hide on external button click', async () => {
-        render(<StateHookUserDialog />);
-        const ButtonOne = screen.queryByTestId('show-button');
-        const ButtonTwo = screen.queryByTestId('hide-button');
-        const userDialog = screen.getByTestId('basic-user-dialog');
-        if (ButtonOne === null || ButtonTwo === null || userDialog === null) {
-          return;
-        }
-        expect(userDialog.getAttribute('hidden')).toBeDefined();
-        await waitFor(() => {
-          userEvent.click(ButtonOne);
-        });
-        if (userDialog === null) return;
-        expect(userDialog).toBeVisible();
-        await waitFor(() => {
-          userEvent.click(ButtonTwo);
-        });
-        if (userDialog === null) return;
-        expect(userDialog).not.toBeVisible();
-      });
-    });
-  });
-
   describe('customization', () => {
     it('Topbar - should add custom styling correctly', (): void => {
       render(
@@ -91,41 +41,5 @@ describe('Topbar', () => {
       expect(renderedCustomTopbar).toHaveStyleRule('background-color', 'rgb(153, 205, 255)');
       expect(renderedCustomTopbar).toHaveStyleRule('color', 'rgb(18, 28, 45)');
     });
-    it('User Dialog - should add custom styling correctly', (): void => {
-      render(<CustomizedUserDialog />);
-
-      const renderedUserDialogButton = screen.getAllByRole('button')[0];
-      const renderedUserDialogButtonContents = renderedUserDialogButton.firstElementChild?.firstElementChild;
-      const renderedUserDialogButtonAvatar = renderedUserDialogButtonContents?.firstElementChild;
-      const renderedUserDialogButtonIcon = renderedUserDialogButtonContents?.lastElementChild;
-      const renderedUserDialog = screen.getByTestId('basic-user-dialog');
-      const renderedUserDialogUserInfo = renderedUserDialog.firstElementChild?.firstElementChild;
-      const renderedUserDialogUserAvatar =
-        renderedUserDialogUserInfo?.firstElementChild?.firstElementChild?.firstElementChild;
-      const renderedUserDialogUserName =
-        renderedUserDialogUserInfo?.firstElementChild?.lastElementChild?.firstElementChild;
-      const renderedUserDialogUserEmail =
-        renderedUserDialogUserInfo?.firstElementChild?.lastElementChild?.lastElementChild;
-      expect(renderedUserDialogButton.getAttribute('data-paste-element')).toEqual('USER_DIALOG_BUTTON');
-      expect(renderedUserDialogButton).toHaveStyleRule('background-color', 'rgb(244, 244, 246)');
-      expect(renderedUserDialogButtonContents?.getAttribute('data-paste-element')).toEqual(
-        'USER_DIALOG_BUTTON_CONTENTS'
-      );
-      expect(renderedUserDialogButtonContents).toHaveStyleRule('padding', '0.25rem');
-      expect(renderedUserDialogButtonAvatar?.getAttribute('data-paste-element')).toEqual('USER_DIALOG_BUTTON_AVATAR');
-      expect(renderedUserDialogButtonAvatar).toHaveStyleRule('background-color', 'rgb(237, 253, 243)');
-      expect(renderedUserDialogButtonIcon?.getAttribute('data-paste-element')).toEqual('USER_DIALOG_BUTTON_ICON');
-      expect(renderedUserDialogButtonIcon).toHaveStyleRule('margin-left', '0.5rem');
-      expect(renderedUserDialog.getAttribute('data-paste-element')).toEqual('USER_DIALOG');
-      expect(renderedUserDialog).toHaveStyleRule('padding', '0.75rem');
-      expect(renderedUserDialogUserInfo?.getAttribute('data-paste-element')).toEqual('USER_DIALOG_USER_INFO');
-      expect(renderedUserDialogUserInfo).toHaveStyleRule('background-color', 'rgba(242, 47, 70, 0.1)');
-      expect(renderedUserDialogUserAvatar?.getAttribute('data-paste-element')).toEqual('USER_DIALOG_USER_AVATAR');
-      expect(renderedUserDialogUserAvatar).toHaveStyleRule('background-color', 'rgb(237, 253, 243)');
-      expect(renderedUserDialogUserName?.getAttribute('data-paste-element')).toEqual('USER_DIALOG_USER_NAME');
-      expect(renderedUserDialogUserName).toHaveStyleRule('color', 'rgb(14, 124, 58)');
-      expect(renderedUserDialogUserEmail?.getAttribute('data-paste-element')).toEqual('USER_DIALOG_USER_EMAIL');
-      expect(renderedUserDialogUserEmail).toHaveStyleRule('color', 'rgb(0, 20, 137)');
-    });
   });
 });

packages/paste-core/components/topbar/package.json

@@ -33,6 +33,7 @@
     "@twilio-paste/customization": "^7.0.0",
     "@twilio-paste/design-tokens": "^9.0.0",
     "@twilio-paste/icons": "^11.0.0",
+    "@twilio-paste/listbox-primitive": "^2.0.0",
     "@twilio-paste/media-object": "^9.0.0",
     "@twilio-paste/non-modal-dialog-primitive": "^1.0.0",
     "@twilio-paste/reakit-library": "^1.0.0",
@@ -61,6 +62,7 @@
     "@twilio-paste/customization": "^7.0.0",
     "@twilio-paste/design-tokens": "^9.2.0",
     "@twilio-paste/icons": "^11.1.0",
+    "@twilio-paste/listbox-primitive": "^2.0.0",
     "@twilio-paste/media-object": "^9.0.0",
     "@twilio-paste/non-modal-dialog-primitive": "^1.0.0",
     "@twilio-paste/reakit-library": "^1.0.0",

packages/paste-core/components/topbar/src/index.tsx

@@ -1,8 +1 @@
-/* Wrapper */
 export * from './Topbar';
-/* User Dialog */
-export * from './user-dialog/UserDialog';
-export * from './user-dialog/UserDialogContainer';
-export * from './user-dialog/UserDialogUserInfo';
-export * from './user-dialog/UserDialogUserName';
-export * from './user-dialog/UserDialogUserEmail';

packages/paste-core/components/topbar/stories/topbar.stories.tsx

@@ -17,16 +17,8 @@ import {
   SidebarCollapseButton,
   SidebarCollapseButtonWrapper,
 } from '@twilio-paste/sidebar';
-import {UserIcon} from '@twilio-paste/icons/esm/UserIcon';
 
-import {
-  Topbar,
-  UserDialog,
-  UserDialogUserInfo,
-  UserDialogUserName,
-  UserDialogUserEmail,
-  UserDialogContainer,
-} from '../src';
+import {Topbar} from '../src';
 
 // eslint-disable-next-line import/no-default-export
 export default {
@@ -67,14 +59,7 @@ export const PushDefaultTopbar: StoryFn = () => {
         <Topbar>
           <Box display="flex" alignItems="center" justifyContent="space-between">
             <div>Topbar Left</div>
-            <UserDialogContainer name="nora krantz" icon={UserIcon} baseId="i-am-user-dialog">
-              <UserDialog aria-label="user menu" data-testid="basic-user-dialog">
-                <UserDialogUserInfo>
-                  <UserDialogUserName>Name</UserDialogUserName>
-                  <UserDialogUserEmail>email@email.com</UserDialogUserEmail>
-                </UserDialogUserInfo>
-              </UserDialog>
-            </UserDialogContainer>
+
             <Button variant="secondary" size="small" onClick={() => setPushSidebarCollapsed(!pushSidebarCollapsed)}>
               Toggle Sidebar
             </Button>