chore: fix example

twilio-labs · Jun 27, 2023 · 0faee14 · 0faee14
1 parent 7fe5ce2
commit 0faee14
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 7 deletions.
diff --git a/packages/paste-core/components/user-dialog/src/UserDialog.tsx b/packages/paste-core/components/user-dialog/src/UserDialog.tsx
@@ -24,6 +24,8 @@ const UserDialogPopover = React.forwardRef<HTMLDivElement, UserDialogPopoverProp
       padding="space0"
       marginTop="space30"
       width="size30"
+      zIndex="zIndex80"
+      outline="none"
     >
       {props.children}
     </Box>

diff --git a/packages/paste-website/src/component-examples/UserDialogExamples.ts b/packages/paste-website/src/component-examples/UserDialogExamples.ts
@@ -1,13 +1,86 @@
 export const defaultUserDialogExample = `
 const UserDialogExample = () => {
-    const userDialog = useUserDialogState()
     const userDialogList = useUserDialogListState()
     const [selected, setSelected] = React.useState()
     const id1 = useUID();
     const id2 = useUID();
     const id3 = useUID();
     return (
-        <UserDialogContainer {...userDialog} name="User Name" icon={UserIcon} baseId="i-am-user-dialog">
+        <UserDialogContainer name="User Name" icon={UserIcon} baseId="i-am-user-dialog">
+          <UserDialog aria-label="user menu" data-testid="basic-user-dialog">
+            <UserDialogUserInfo>
+              <UserDialogUserName>Name</UserDialogUserName>
+              <UserDialogUserEmail>[email protected]</UserDialogUserEmail>
+            </UserDialogUserInfo>
+            <UserDialogList {...userDialogList} data-testid="user-dialog-listbox">
+              <UserDialogListItem
+                {...userDialogList}
+                key={id1}
+                selected={selected === id1}
+                onSelect={() => setSelected(id1)}
+                data-testid="FIRST_ITEM"
+              >
+                <UserIcon decorative />
+                Item
+              </UserDialogListItem>
+              <UserDialogSeparator />
+              <UserDialogListItem
+                {...userDialogList}
+                key={id2}
+                selected={selected === id2}
+                onSelect={() => setSelected(id2)}
+                data-testid="SECOND_ITEM"
+                href="https://www.google.com"
+              >
+                <UserIcon decorative />
+                Item
+              </UserDialogListItem>
+              <UserDialogSeparator />
+              <UserDialogListItem
+                {...userDialogList}
+                key={id3}
+                selected={selected === id3}
+                onSelect={() => setSelected(id3)}
+                data-testid="THIRD_ITEM"
+              >
+                <ThemeIcon decorative />
+                <Box width="100%" display="flex" justifyContent="space-between">
+                  Theme
+                  <Badge variant="decorative10" as="span" size="small">
+                    Light
+                  </Badge>
+                </Box>
+              </UserDialogListItem>
+              <UserDialogSeparator />
+              <UserDialogListItem {...userDialogList} key="4" selected={selected === '4'} onSelect={() => setSelected('4')}>
+                <TranslationIcon decorative />
+                <Box width="100%" display="flex" justifyContent="space-between">
+                  Language
+                  <Badge variant="decorative10" as="span" size="small">
+                    EN
+                  </Badge>
+                </Box>
+              </UserDialogListItem>
+            </UserDialogList>
+          </UserDialog>
+        </UserDialogContainer>
+    );
+}
+
+render(
+    <UserDialogExample/>
+)
+`.trim();
+
+export const imageUserDialogExample = `
+const UserDialogExample = () => {
+    const userDialogList = useUserDialogListState()
+    const [selected, setSelected] = React.useState()
+    const id1 = useUID();
+    const id2 = useUID();
+    const id3 = useUID();
+    return (
+        <UserDialogContainer name="User Name" icon={UserIcon} baseId="i-am-user-dialog" src="/images/avatars/avatar3.png" >
           <UserDialog aria-label="user menu" data-testid="basic-user-dialog">
             <UserDialogUserInfo>
               <UserDialogUserName>Name</UserDialogUserName>

diff --git a/packages/paste-website/src/pages/components/user-dialog/index.mdx b/packages/paste-website/src/pages/components/user-dialog/index.mdx
@@ -28,7 +28,7 @@ import {useUID} from '@twilio-paste/uid-library';
 import packageJson from '@twilio-paste/user-dialog/package.json';
 import DefaultLayout from '../../../layouts/DefaultLayout';
 import {getFeature, getNavigationData} from '../../../utils/api';
-import {defaultUserDialogExample} from '../../../component-examples/UserDialogExamples.ts';
+import {defaultUserDialogExample, imageUserDialogExample} from '../../../component-examples/UserDialogExamples.ts';
 export default DefaultLayout;
 
 export const getStaticProps = async () => {
@@ -62,7 +62,6 @@ export const getStaticProps = async () => {
 
 <LivePreview
   scope={{
-    useUserDialogState,
     UserDialog,
     UserDialogUserInfo,
     UserDialogUserName,
@@ -105,10 +104,12 @@ When the user is focused on a list item, the following keyboard interactions app
 
 ## Default User Dialog
 
-Account-specific controls are aligned to the left, such as:
-
 Use a User Dialog to display actions that a user can trigger related to their profile. Add separators to group menu items.
 
+User Dialog works similarly to [Avatar](/components/avatar), in that you may use either initials, an image, or a [Paste Icon](/components/icons) to represent the user. Pass `name`/`src`/`icon` to UserDialogContainer.
+
+In order to use links as options for the UserDialogList items, provide the `href` prop to the UserDialogListItem.
+
 <LivePreview
   scope={{
     useUserDialogState,
@@ -130,7 +131,7 @@ Use a User Dialog to display actions that a user can trigger related to their pr
   }}
   noInline
 >
-  {defaultUserDialogExample}
+  {imageUserDialogExample}
 </LivePreview>
 
 ## Usage guide