Debt - 3952 - Replace primitives #4136

esizer · 2022-09-30T19:59:21Z

Resolves #3952

📋 Summary

This replaces our underlying custom/reach common primitives with radix-ui

❓Rationale

Warning
Reach is not currently maintained.

Currently, we are stuck on react@17 and the only real blocker is reach-ui. After some research and looking at a number of primitive libraries, it seems as though radix is the best option because:

It has full keyboard navigation
Managed focus
Has proper semantics for assistive technology
WAI-ARIA compliant
Screen reader tested
Allows us to worry about styling rather than API
Exposes all sub-components for more control
Has a fairly large library to use

✅ TO DO

Fix linting
Translation run

🧪 Testing

Good luck! 🍀

Build all projects npm run production --workspaces
Bounce around the place where the components were replaced and confirm they all still work and look fine
Check storybook for components and docs! npm run storybook

Places to Check

Admin
- Logout
- Edit Pool
- Table column dialog
- User/Pool Candidate filter dialogs
- API Table search dropdown
- User tabs
IAP
- Dialogs on homepage
Talent Search
- Employment equity form dialogs
- Experience form delete confirmation
- Logout
- Role Salary form dialogs

⚛️ Components

Component	Created	Stories	Tests	Replaced
`Accordion`	✅	✅	✅	✅
`AlertDialog`	✅	✅	✅	✅
`Collapsible`	✅	✅	✅	✅
`Dialog`	✅	✅	✅	✅
`DropdownMenu`	✅	✅	✅	✅
`ScrollArea`	✅	✅	✅	✅
`Separator`	✅	✅	✅	✅
`Switch`	✅	✅	✅	✅
`Tabs`	✅	✅	✅	✅
`ToggleGroup`	✅	✅	✅	✅

Accordion

import Accordion from "@common/components/Accordion";

/**
 * Allows multiple accordions items to be open at once
 */
const ExampleAccordionMultipleOpen = () => (
  <Accordion.Root type="multiple">
    <Accordion.Item value="one">
        <Accordion.Trigger Icon={HeroIcon} subtitle="Subtitle">
          Example Accordion One Heading
        </Accordion.Trigger>
        <Accordion.Content>
          <p>Example accordion one content.
        </Accordion.Content>
      </Accordion.Item>
    <Accordion.Item value="two">
        <Accordion.Trigger Icon={HeroIcon} subtitle="Subtitle">
          Example Accordion Two Heading
        </Accordion.Trigger>
        <Accordion.Content>
          <p>Example accordion two content.
        </Accordion.Content>
      </Accordion.Item>
  </Accordion.Root>
);

/**
 * Allows only one accordions item to be open at once
 */
const ExampleAccordionSingleOpen = () => (
  <Accordion.Root type="single">
    <Accordion.Item value="one">
        <Accordion.Trigger Icon={HeroIcon} subtitle="Subtitle">
          Example Accordion One Heading
        </Accordion.Trigger>
        <Accordion.Content>
          <p>Example accordion one content.
        </Accordion.Content>
      </Accordion.Item>
  </Accordion.Root>
);

Alert Dialog

import AlertDialog from "@common/components/AlertDialog";
import Button from "@common/components/Button";

const ExampleAlertDialog = () => (
  <AlertDialog.Root>
    <AlertDialog.Trigger>
      <Button>Open Alert Dialog</Button>
    </AlertDialog.Trigger>
    <AlertDialog.Content>
      <AlertDialog.Title>Example Alert Dialog</AlertDialog.Title>
      <AlertDialog.Description>Example Alert Dialog Description</AlertDialog.Description>
      <AlertDialog.Footer>
        <AlertDialog.Cancel>
          <Button color="white">Cancel</Button>
        </AlertDialog.Cancel>
        <AlertDialog.Action>
          <Button color="cta">Action</Button>
        </AlertDialog.Action>
      </AlertDialog.Footer>
    </AlertDialog.Content>
  </AlertDialog.Root>
);

Dialog

import Dialog from "@common/components/Dialog";
import Button from "@common/components/Button";

const ExampleDialog = () => (
  <Dialog.Root>
    <Dialog.Trigger>
      <Button>Open Dialog</Button>
    </Dialog.Trigger>
    <Dialog.Content>
      <Dialog.Header subtitle="short description">
        Dialog Title
      </Dialog>
      <p>Dialog body</p>
      <Dialog.Footer>
        <Dialog.Close>
          <Button>Close</Button>
        </Dialog.Close>
      </Dialog.Footer>
    </Dialog.Content>
  </Dialog.Root>
);

Collapsible

import Collapsible from "@common/components/Collapsible";
import Button from "@common/components/Button";

const ExampleCollapsible = () => (
 <Collapsible.Root>
	 <Collapsible.Trigger asChild>
		 <Button>Open Collapsible</Button>
	 </Collapsible.Trigger>
	 <Collapsible.Content>
		 <p>Content for a Collapsible element</p>
	 </Collapsible.Content>
 </Collapsible.Root>

Dropdown Menu

import DropdownMenu from "@common/components/DropdownMenu";

const DropdownMenuExample = () => {
  const [value, setValue] = React.useState<string>("");
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
        <Button>Open Dropdown</Button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Label>Basic Items</DropdownMenu.Label>
        <DropdownMenu.Item>Item One</DropdownMenu.Item>
        <DropdownMenu.Item>Item Two</DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Label>Form Items</DropdownMenu.Label>
        <DropdownMenu.CheckboxItem>
          Basic CheckboxItem
        </DropdownMenu.CheckboxItem>
        <DropdownMenu.RadioGroup value={value} onValueChange={setValue}>
          <DropdownMenu.RadioItem value="one">
            <Check />
            RadioItem One
          </DropdownMenu.RadioItem>
          <DropdownMenu.RadioItem value="two">
            <Check />
            RadioItem Two
          </DropdownMenu.RadioItem>
          <DropdownMenu.RadioItem value="three">
            <Check />
            RadioItem Three
          </DropdownMenu.RadioItem>
        </DropdownMenu.RadioGroup>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  );
}

Scroll Area

import ScrollArea from "@common/components/ScrollArea";

const ExampleScrollArea = () => (
	<ScrollArea.Root style={{ height: 500, width: 320, }}>
		<ScrollArea.Viewport>
			<p>Content for the Scroll Area</p>
		<ScrollArea.ViewPort>
		<ScrollArea.Scrollbar orientation="vertical">
			<ScrollArea.Thumb />
		</ScrollArea.Scrollbar>
	</ScrollArea.Root>
);

Separator

import Separator from "@common/components/Separator";

const ExampleSeparator = () => (
	<Separator
		decorative
		orientation="vertical"
		color="secondary"
	/>
);

Switch

import Switch from "@common/components/Switch";

const SwitchExample = () => (
	<Switch.Root id="example-switch">
		<Switch.Thumb />
	</Switch.Root>
);

Tabs

import DropdownMenu from "@common/components/DropdownMenu";

const ExampleTabs = () => (
	<Tabs.Root defaultValue="one">
	    <Tabs.List aria-label="Tabs Nav">
			<Tabs.Trigger value="one">One</Tabs.Trigger>
			<Tabs.Trigger value="two">Two</Tabs.Trigger>
			<Tabs.Trigger value="three">Three</Tabs.Trigger>
		</Tabs.List>
		<Tabs.Content value="one">
			<p>One</p>
		</Tabs.Content>
		<Tabs.Content value="two">
			<p>Two</p>
		</Tabs.Content>
		<Tabs.Content value="three">
			<p>Three</p>
		</Tabs.Content>
	</Tabs.Root>
);

Toggle Group

import Toggle Group from "@common/components/ToggleGroup";

const ToggleGroupExample = () => (
	<ToggleGroup.Root>
		<ToggleGroup.Item value="one">One</ToggleGroup.Item>
		<ToggleGroup.Item value="two">Two</ToggleGroup.Item>
		<ToggleGroup.Item value="three">Three</ToggleGroup.Item>
	</ToggleGroup.Root>
);

esizer · 2022-11-02T22:51:16Z

bolding appears to have been lost

Hmm, very odd. Something else that I do not remember touching in this PR. I just merged in main to see if I'm just a few commits behind or something 🤔

esizer · 2022-11-02T23:17:55Z

is this change intentional? I thought the ones on the left were supposed to be worded differently intentionally

Looks like it was some bad merge conflict resolutions on my part. Should be good now in fix equity option titles

bolding appears to have been lost

I'm not sure what one is correct but main is bold so I updated it to be bold in fix regular font weight delete action

change to that dropdown makes it no longer recognizable as a dropdown, lost its little pointer

Good eye! Added chevron in fix dropdown menu styles

vd1992 · 2022-11-03T16:58:10Z

is this change intentional? I thought the ones on the left were supposed to be worded differently intentionally

Looks like it was some bad merge conflict resolutions on my part. Should be good now in fix equity option titles

bolding appears to have been lost

I'm not sure what one is correct but main is bold so I updated it to be bold in fix regular font weight delete action

change to that dropdown makes it no longer recognizable as a dropdown, lost its little pointer

Good eye! Added chevron in fix dropdown menu styles

Nice! Overall it looks like things function just the same as before!
All right, I'll hand things back to Yoni, who I entirely have faith in to review this

yonikid15

This was a big one, but as always great work Eric 🎉 Thanks for taking this one on, and again apologies for the long wait on the review.

Manual tests:

Editing all touched sections of the Profile. Ensure all forms work behave and look correct.
Login/Logout.
Editing a pool.
Table column and filter dialogs, and search dropdowns.
User tabs
Dialogs on IAP homepage.

Bugs:

On the IAP homepage, the "See Eligibility Criteria" and "Learn more" dialog close buttons are not working.
On the IAP homepage, when closing a dialog the tab index jumps back to the first element on the page, in this case the Home link in the nav menu. This can get annoying for users with screen readers. It seems to be working correctly on the Admin and TalentSearch side though.
User cannot scroll when the dialog is open. This could prevent the user from seeing the entire Dialog, especially on smaller screens. For example, on the EE dialog I cannot click the Save button. Also, the "Learn more" dialog on IAP homepage is very long so most of the content is unviewable. Would adding a <ScrollArea /> within the Dialog fix this?
The search form dropdown is missing on Pool Candidates table. ISSUE Feature - Pool Candidate table search filter #4621
Clicking add user to pool breaks the page. It looks like it has something to do with the Input components (out of scope(?)). To recreate: go to Users table->View User->Click "add user to pool"

Cool stuff:

Thanks for adding the docs for each of the new Primitives. It will come in handy down the line when ppl are using them for the first time.
I like the subtle transition of color and the rotating chevron on the Accordion when opening and closing.

esizer · 2022-11-07T13:43:13Z

On the IAP homepage, the "See Eligibility Criteria" and "Learn more" dialog close buttons are not working.

On the IAP homepage, when closing a dialog the tab index jumps back to the first element on the page, in this case the Home link in the nav menu. This can get annoying for users with screen readers. It seems to be working correctly on the Admin and TalentSearch side though.

Good catch, fixed with fix iap dialog close + focus

User cannot scroll when the dialog is open. This could prevent the user from seeing the entire Dialog, especially on smaller screens. For example, on the EE dialog I cannot click the Save button. Also, the "Learn more" dialog on IAP homepage is very long so most of the content is unviewable. Would adding a <ScrollArea /> within the Dialog fix this?

Oops, this was a problem with the composition of the dialog. Thanks for catching that! Fixed in fix long content dialogs not scrolling

Clicking add user to pool breaks the page. It looks like it has something to do with the Input components (out of scope(?)). To recreate: go to Users table->View User->Click "add user to pool"

Looks like this was missed in the unsaved changes PR 😢 Fixed in fix add user to pool dialog

yonikid15

Almost there! The close button seems to have jumped into the top right of the screen. Was that intentional?

esizer · 2022-11-07T18:33:59Z

Almost there! The close button seems to have jumped into the top right of the screen. Was that intentional?

oohhh, good eye 🦅 Fixed with fix dialog close button position

yonikid15

Alright looks good to me! ✅

esizer and others added 30 commits September 30, 2022 14:28

create new accordion component

7231e61

add new accordion tests

352b1cb

fixing case, step one

945f803

fix case, step two

561e84f

migrate alert dialog, write story

a766b2c

add useAuth hook

7de2d4e

replace existing alert dialog

0bbf6ad

simplify new accordion types

077ad64

remove unnecessary defs

ea9a01d

remove reach alert dialog

dd3eb12

create new dialog, deprecate current

61aef01

Merge branch 'main' into debt/3952-replace-primitives

c35aee1

add more dialog stories

8205653

fix accordion styles

685e409

replace dropdown menu

5a3ac0f

update lock file

d03490c

add alert dialog tests

7809b6e

add dialog tests

e97dd2a

add dropdown menu tests

83ea4f0

fix typo

4036134

add new tabs component

603a4ff

remove reach tabs

4dfc4cf

replace accordions

9514cba

uninstall reach menu button

0998b49

fix dialog styles

7c5d476

replace iap dialogs

9d40311

fix missing accordion replacement

0517180

being replacing deprecated dialogs

228cfe2

start replacing general info dialogs

563ac1e

refresh page to show updates

5051242

esizer added 4 commits November 2, 2022 19:05

fix equity option titles

b1404e3

fix regular font weight delete action

34bd733

fix dropdown menu styles

807beb5

fix apiManagedTable story

35b353f

esizer added 3 commits November 3, 2022 07:43

fix equity form test

2da0cb4

fix search dropdown colour

7c291fc

fix accordion padding + animation

2833440

yonikid15 requested changes Nov 4, 2022

View reviewed changes

esizer added 3 commits November 7, 2022 08:24

fix iap dialog close + focus

0bb65bc

fix long content dialogs not scrolling

324a4eb

fix add user to pool dialog

6af1284

Merge branch 'main' into debt/3952-replace-primitives

93fe6d5

esizer requested a review from yonikid15 November 7, 2022 13:43

yonikid15 reviewed Nov 7, 2022

View reviewed changes

fix dialog close button position

1b6b43d

esizer requested a review from yonikid15 November 7, 2022 18:34

yonikid15 approved these changes Nov 7, 2022

View reviewed changes

esizer added 4 commits November 7, 2022 13:57

Merge branch 'main' into debt/3952-replace-primitives

3ee2d6c

fix linting

9e550b0

reconnect translations

05a7ee0

fix common additional details without var

335a485

esizer merged commit bcde714 into main Nov 7, 2022

esizer deleted the debt/3952-replace-primitives branch November 7, 2022 19:39

esizer mentioned this pull request Nov 10, 2022

Refactor Dialog component #3266

Closed

mnigh mentioned this pull request Oct 18, 2023

✨ Update the switch component #8245

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Debt - 3952 - Replace primitives #4136

Debt - 3952 - Replace primitives #4136

esizer commented Sep 30, 2022 •

edited

Loading

esizer commented Nov 2, 2022

esizer commented Nov 2, 2022

vd1992 commented Nov 3, 2022

yonikid15 left a comment •

edited

Loading

esizer commented Nov 7, 2022

yonikid15 left a comment

esizer commented Nov 7, 2022

yonikid15 left a comment

Debt - 3952 - Replace primitives #4136

Debt - 3952 - Replace primitives #4136

Conversation

esizer commented Sep 30, 2022 • edited Loading

📋 Summary

❓Rationale

✅ TO DO

🧪 Testing

Places to Check

⚛️ Components

Accordion

Alert Dialog

Dialog

Collapsible

Dropdown Menu

Scroll Area

Separator

Switch

Tabs

Toggle Group

esizer commented Nov 2, 2022

esizer commented Nov 2, 2022

vd1992 commented Nov 3, 2022

yonikid15 left a comment • edited Loading

Choose a reason for hiding this comment

esizer commented Nov 7, 2022

yonikid15 left a comment

Choose a reason for hiding this comment

esizer commented Nov 7, 2022

yonikid15 left a comment

Choose a reason for hiding this comment

esizer commented Sep 30, 2022 •

edited

Loading

yonikid15 left a comment •

edited

Loading