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] Separate user dialog into its own package

.changeset/spotty-countries-learn.md

@@ -0,0 +1,5 @@
+---
+'@twilio-paste/codemods': patch
+---
+
+Add to user dialog package

.codesandbox/ci.json

@@ -100,6 +100,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

@@ -285,14 +285,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>