Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(user-dialog): add user dialog listbox #3254

Merged
merged 16 commits into from
Jun 27, 2023
Merged

feat(user-dialog): add user dialog listbox #3254

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
4f04aea
feat(topbar): add user dialog listbox
nkrantz May 26, 2023
20fa655
chore: export list from package
nkrantz May 30, 2023
0808fa3
chore: add select and onselect to story
nkrantz May 31, 2023
1bf9de1
chore(listbox): add element to listbox primitive props
nkrantz Jun 18, 2023
75f1bd7
chore(topbar): add tests and stories for user dialog
nkrantz Jun 18, 2023
a50ff2a
chore: changeset
nkrantz Jun 21, 2023
415a4c4
chore: create user dialog package
nkrantz Jun 22, 2023
01c9dec
chore: fix listbox deps
nkrantz Jun 22, 2023
530c018
chore: rename user dialog stories
nkrantz Jun 23, 2023
fe2add1
chore: pr feedback
nkrantz Jun 26, 2023
6e310ce
chore: add href prop to listitem
nkrantz Jun 27, 2023
b93b930
chore: codemods and story edit
nkrantz Jun 27, 2023
1b80cb7
chore: fix chevron color
nkrantz Jun 27, 2023
d72d545
Merge branch 'main' into user-dialog-part-II
SiTaggart Jun 27, 2023
fac2ce9
chore: slight amend to keyboard tests
SiTaggart Jun 27, 2023
ce5b0e1
chore: ignore the user dialog customization a11y test
SiTaggart Jun 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 10 additions & 0 deletions packages/paste-core/components/user-dialog/__tests__/index.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,16 @@ describe('User Dialog', () => {
if (userDialog === null) return;
expect(userDialog).not.toBeVisible();
});

it('should render an anchor when href is passed', async () => {
render(<BasicUserDialog />);
const renderedUserDialogButton = screen.getByRole('button');
await waitFor(() => {
userEvent.click(renderedUserDialogButton);
});
expect(screen.getByTestId('SECOND_ITEM').getAttribute('href')).toBe('https://www.google.com');
expect(document.querySelector('a')).toBeInTheDocument();
});
});
});

Expand Down
5 changes: 4 additions & 1 deletion packages/paste-core/components/user-dialog/src/UserDialogListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,21 @@ import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
import type {UserDialogListItemProps, UserDialogListboxItemProps} from './types';

const UserDialogListboxItem = React.forwardRef<HTMLButtonElement, UserDialogListboxItemProps>(
({children, element = 'USER_DIALOG', ...props}, ref) => {
({children, href, element = 'USER_DIALOG', ...props}, ref) => {
return (
<Box
{...safelySpreadBoxProps(props)}
element={`${element}_LIST_ITEM`}
as={href ? 'a' : 'div'}
href={href}
ref={ref}
width="100%"
paddingLeft="space60"
paddingRight="space70"
paddingY="space50"
display="flex"
columnGap="space30"
color="colorText"
borderLeftStyle="solid"
borderLeftWidth="borderWidth20"
borderLeftColor="colorBorderWeakest"
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/user-dialog/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,11 @@ export interface UserDialogListboxProps extends React.HTMLAttributes<HTMLDivElem
export interface UserDialogListItemProps extends ListboxPrimitiveItemProps {
href?: string;
element?: BoxProps['element'];
as?: any;
}

export interface UserDialogListboxItemProps extends React.HTMLAttributes<HTMLDivElement> {
element?: BoxProps['element'];
href?: string;
}

export interface UserDialogListGroupProps extends ListboxPrimitiveGroupProps {
Expand Down
21 changes: 13 additions & 8 deletions packages/paste-core/components/user-dialog/stories/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const BasicUserDialog: StoryFn = () => {
onSelect={() => setSelected(id1)}
data-testid="FIRST_ITEM"
>
<UserIcon decorative color="colorTextIcon" />
<UserIcon decorative color="inherit" />
Item
</UserDialogListItem>
<UserDialogSeparator />
Expand All @@ -61,8 +61,9 @@ export const BasicUserDialog: StoryFn = () => {
selected={selected === id2}
onSelect={() => setSelected(id2)}
data-testid="SECOND_ITEM"
href="https://www.google.com"
>
<UserIcon decorative color="colorTextIcon" />
<UserIcon decorative color="inherit" />
nkrantz marked this conversation as resolved.
Show resolved Hide resolved
Item
</UserDialogListItem>
<UserDialogSeparator />
Expand All @@ -73,7 +74,7 @@ export const BasicUserDialog: StoryFn = () => {
onSelect={() => setSelected(id3)}
data-testid="THIRD_ITEM"
>
<ThemeIcon decorative color="colorTextIcon" />
<ThemeIcon decorative color="inherit" />
<Box width="100%" display="flex" justifyContent="space-between">
Theme
<Badge variant="decorative10" as="span" size="small">
Expand All @@ -83,7 +84,7 @@ export const BasicUserDialog: StoryFn = () => {
</UserDialogListItem>
<UserDialogSeparator />
<UserDialogListItem {...userDialogList} key="4" selected={selected === '4'} onSelect={() => setSelected('4')}>
<TranslationIcon decorative color="colorTextIcon" />
<TranslationIcon decorative color="inherit" />
<Box width="100%" display="flex" justifyContent="space-between">
Language
<Badge variant="decorative10" as="span" size="small">
Expand Down Expand Up @@ -121,6 +122,7 @@ export const ImageUserDialog: StoryFn = () => {
</UserDialogListItem>
<UserDialogListItem
{...userDialogList}
href="https://www.google.com"
key={id2}
selected={selected === id2}
onSelect={() => setSelected(id2)}
Expand Down Expand Up @@ -181,6 +183,7 @@ export const StateHookUserDialog: StoryFn = () => {
key={id2}
selected={selected === id2}
onSelect={() => setSelected(id2)}
href="https://www.google.com"
>
Item2
</UserDialogListItem>
Expand Down Expand Up @@ -255,7 +258,7 @@ export const CustomizedUserDialog: StoryFn = () => {
selected={selected === id1a}
onSelect={() => setSelected(id1a)}
>
<UserIcon decorative color="colorTextIcon" />
<UserIcon decorative color="inherit" />
Item
</UserDialogListItem>
<UserDialogSeparator />
Expand All @@ -264,8 +267,9 @@ export const CustomizedUserDialog: StoryFn = () => {
key={id2a}
selected={selected === id2a}
onSelect={() => setSelected(id2a)}
href="https://www.google.com"
>
<ThemeIcon decorative color="colorTextIcon" />
<ThemeIcon decorative color="inherit" />
<Box width="100%" display="flex" justifyContent="space-between">
Theme
<Badge variant="decorative10" as="span" size="small">
Expand All @@ -290,7 +294,7 @@ export const CustomizedUserDialog: StoryFn = () => {
onSelect={() => setSelected(id1b)}
element="FOO"
>
<UserIcon decorative color="colorTextIcon" />
<UserIcon decorative color="inherit" />
Item
</UserDialogListItem>
<UserDialogSeparator />
Expand All @@ -300,8 +304,9 @@ export const CustomizedUserDialog: StoryFn = () => {
selected={selected === id2b}
onSelect={() => setSelected(id2b)}
element="FOO"
href="https://www.google.com"
>
<ThemeIcon decorative color="colorTextIcon" />
<ThemeIcon decorative color="inherit" />
<Box width="100%" display="flex" justifyContent="space-between">
Theme
<Badge variant="decorative10" as="span" size="small">
Expand Down