Reorganize side nav

[cjcenizal]

Fixes #416. I tried to incorporate @gchaps's idea of using as few categories as possible and some of @cchaos's original structure. I'm sure there are a bunch of ways we can make this better so shout 'em out!

Layout

Accordion
BottomBar
Card
Flex
Flyout
Header
HorizontalRule
Modal
Page
Panel
Popover
Spacer
Steps
Tables
TableOfRecords
Tabs

Content

Avatar
Badge
CallOut
Code
DescriptionList
Health
Icons
Image
Loading
Progress
Text
Title
Toast
Tooltip

Data controls

Button
Code Editor
Color Picker
ContextMenu
Expression
FilePicker
FilterGroup
Form
KeyPadMenu
Link
Pagination
SearchBar
SideNav

Utilities

Accessibility
DelayHide
ErrorBoundary
IsColorDark
OutsideClickDetector

[cchaos]

If we go this light on the categorization, which I'm ok with, we need to also be smarter about sub-page/sections and look into which components we could probably group into one page.

For example, we could group HorizontalRule and Spacer into one "Separators" or something page. Which would then look something like:

---

Layout

...
Popover
Separators

• Horizontal rule
• Spacer

Steps
...

---

Then we also need to be smart about how we name our sections so that instead of this:

we have something like:

---

Data Controls

...
Filter group
Form controls

• Fields
• Radios and Checkboxes
• ...

Forms groups

• Rows
• Inline
• Validation
• ...

KeyPadMenu
...

[cjcenizal]

@cchaos Great points, I agree. @gchaps What was the original intent behind fewer buckets? What are the advantages?

[snide]

Can we zoom on this one real quick with everyone. Prolly a quick 10 minutes. Some questions

1. If we're not collapsing these, does this categorization help? Should we collapse them?
2. We prolly need to fix the titles looking like clickable links (surprised i just saw this).
3. "Data controls" might need better wording. Possibly break that into "Forms" and "Navigation" which is more clear?
4. Should we maybe change our homepage to link quickly to our most used components (Forms, icons, flex, buttons...etc). Could use the card system for this. Guessing @cchaos or I could do this.
5. Let's very briefly figure out the future of sandboxes and where they fit in here. Are these things we merge and plan on growing? Do we just never merge them? Right now they are packaged into our dist.

[gchaps]

Yep, let's zoom. I'm worried that we're getting away from some of the wording that users might look for. Navigation and Components come to mind. Also, we need to fit in the Guidelines.

I like the idea for the front page rewrite. Color and Spacing are important, but I feel they are hidden on the front page. We should have a link to them in our left nav bar.

I looked at a lot of other design systems. Most collapse.

Also, two things we might consider:

--Search box at the top of the side nav to search the contents of the nav
--Links down the page

[cjcenizal]

Todo:

• Sidenav search is broke.
• Break data controls into forms and navigation.
• Put tabs and steps into navigation.
• Rename content to display.
• Move tables to display.
• Delete sandboxes.
• Put text scales into a guideline.
• Use spaces in navigation item labels.

[cjcenizal]

@gchaps @snide @cchaos Ready for another look.

Guidelines

Writing
Text scales

Layout

Accordion
Bottom Bar
Card
Flex
Flyout
Header
Horizontal Rule
Modal
Page
Panel
Popover
Spacer

Navigation

Button
Context Menu
Key Pad Menu
Link
Pagination
Side Nav
Steps
Tabs

Display

Avatar
Badge
Call Out
Code
Description List
Health
Icons
Image
Loading
Progress
Tables
Table Of Records
Text
Title
Toast
Tooltip

Forms

Code Editor
Color Picker
Expression
File Picker
Filter Group
Form
Search Bar

Utilities

Accessibility
Delay Hide
Error Boundary
Is Color Dark
Outside Click Detector

[gchaps]

I like the buckets. Layout and Display seem very similar to me, as in an arrangement of things. Layout is good, my concern is more with Display. My only suggestion is App Layout and Data Display, but I know there was some concern with "Data"

[cjcenizal]

@gchaps I agree there's some ambiguity there. I'd like to merge this as-is but keep an eye on how people respond to the docs. If there's a lot of confusion let's change the names.

[cchaos]

My edits would be to:

• Change 'Display' to 'Display content'
• Move 'Card' to 'Display content' -- to me it's more than purely layout, it require specific content.
• I'm on the fence about 'Popover' being in 'Layout' because it's literally not within the document layout because of it's positioning. And, again, I'm thinking in engineer terms who will be the main user of this guide.

I know we're starting to add more sections back in, but I really liked the idea of separating out the "Feedback/Messaging" elements. Grouping them in with the general "Display content", to me, makes me worried they'd be over-used and incorrectly used.

[cjcenizal]

@cchaos I moved the Card to Display, but I've left the naming as-is and left Popover in Layout (I'm on the fence too). Let's let this marinate with people and make changes after people have had some time to try this out and give feedback.

[snide]

Ultimately we'll all want something different. Following our normal "tie goes to the runner" mentality, since CJ made the PR, he can own the calls. This is something we can always change later as we see how people respond.