v5 new component: AppBar/SearchButton

[nurm717123]

Abstract

As part of the v5 Elements release, the ticket #153 was created. To break it into smaller part and allow for more focused discussions, this ticket has been created.

app bar (parent)

this ticket

Specification

• Is new component or existing? new
• Is the component being re-named? no
• Is the component design signed off by product and design? yes, as part of the new app bar
• Guide to component structure & documentation in storybook
• Link to DS in Figma
• Link to Elements Audit in Figma
• Accessibility requirements
• Parent ticket

Developer Checklist

• [ ] Styles alignment between Design System and Elements
• [ ] Check design tokens in Figma and implement CSS variable tokens if available for relevant component
• [ ] Align with accessibility standards / spec as per above
• [ ] If relevant, break down component into Styles Only and React component structures
• [ ] Ensure all variants of components are documented as appropriate
• [ ] Ensure unit test coverage is adequate for component
• [ ] Update documentation in MDX file as per guidelines

Release Checklist

• [ ] Approved PR merged to main
• [ ] Design & product review and feedback addressed by developer
• [ ] Beta release by product / engineering lead to next beta version

Additional Context or Information

[nurm717123]

Hi @kurtdoherty and @adrian-reapit , I created this ticket so the discussion could be more focused and easier, and since the app-bar structure haven't build yet, I think we can discuss on how it will look on this kind of small pr. let me know if this is too small and I will update it 👍

[nurm717123]

my Idea of how it will be structured is something like this:

• app-bar
  • components/ (atomic component)
  • search button
  • menu button
  • icons/ (search icon, hamburger menu icon, .etc)
  • top-bar/
  • app switcher/
  • main nav/
  • secondary nav/
  • top-bar.tsx
  • side-bar/
  • bottom-bar/

any ideas or feedback will be much appreciated ☺️

[kurtdoherty]

Thanks for starting this discussion @nurm717123 👍

Personally, I think it's important for us to separate the "patterns" from the "components". When I look at your suggested file structure above, it feels like:

• The App Bar pattern is being conflated with the App Bar component; and,
• The Side Bar, Bottom Bar, App Switch and others are being conflated with the App Bar pattern.

I see all of these things a independent from each other. I would suggest the App Bar pattern consists of the composition of many different atoms and molecules, one of which may be an AppBar component/atom (which may also need a better name 🤔). I would also suggest that the Side Bar, Bottom Bar, App Switcher and so on are all individual components, some more simple than others.

[nurm717123]

I see all of these things a independent from each other. I would suggest the App Bar pattern consists of the composition of many different atoms and molecules

Thanks Kurt, I think got your point now, so here is the updated one then:

• app-bar/
  • app-bar.atoms.tsx (app switcher, brand, nav button, nav-menu-button, search-button, avatar)
  • app-bar.molecules.tsx (primary navigation, secondary navigation)
  • app-bar.tsx (combination of above)
  • icons/
• side-bar/
• bottom-bar/

or

• app-bar/
  • atoms/
  • app-switcher.atoms
  • brand.atoms
  • nav-button.atoms
  • .etc
  • molecules
  • primary-navigation.molecules
  • secondary-navigation.molecules
  • .etc
  • icons/
  • app-bar.tsx
• side-bar/
• bottom-bar/

I think the second one is better because it separate the code into smaller chunk 🤔

[kurtdoherty]

Sorry, I should have included an explicit example of what I meant by my comments. Since I treat the atoms and molecules that are used in the App Bar pattern as separate things, the file structure I'd suggest is:

• app-bar
• app-switcher
• bottom-bar
• mobile-nav-menu
• nav-item
• nav-icon-item
• side-bar

You'll notice the absence of any "main nav" or "secondary nav" components (I have doubts that we actually need those to be first-class components vs just a plain button group; I've asked Andrei for clarification on the Figma file).