TAC-style Header - Githubissues

A draft PR demonstrating how the header might look in the TAC style.

Still very much a work in progress.

Here's the current proposed mark-up.

<header role="banner">

  <cagov-burger-button>
    <button>
      <span class="visually-hidden">Main menu</span>
    </button>
  </cagov-burger-button>

  <cagov-org-badge data-overflow>
    <span>California</span>
    <span>Department Website</span>
    <img
      src="https://cdn.cdt.ca.gov/cdt/CAWeb/site-logo-circle.svg"
      alt="Eureka Design System logo" />
  </cagov-org-badge>

  <search>
    <form>
      <label for="site-search" class="visually-hidden">Search this site</label>
      <input type="search" id="site-search" placeholder="Search here..." />
      <button type="submit">
        <span class="visually-hidden">Search</span>
      </button>
    </form>
  </search>

  <a role="button" href="#">Login</a>

  <cagov-waffle-menu>
    <button>
      <span class="visually-hidden">ca.gov links</span>
    </button>
  </cagov-waffle-menu>

</header>

I'm curious what the benefit of a custom element wrapped around buttons is?

Shouldn't we do something like the following within the TAC methodology: `

I notice in the comments that is says

/* 
cagov-waffle-menu
Using a Custom Element name here in anticipation of future
JavaScript code.
*/

I haven't tested this out but in my experience you pretty much always need a wrapper div around a button for CSS proper positioning and styling. Especially in headers because the elements have to move dynamically based on screensize.

You would definitely want to have plain button styles like that in the Design System. No question. That would be useful in all kinds of scenarios, like forms and button-like links.

As Zakiya pointed out from the code comments, the custom element names are primarily there for JavaScript.

That said, in the broader context of TAC, I think there's another argument in favor of the custom element names here. Both of these buttons are unique, one-off features. Both of these buttons are in service of a specific component, and probably aren't going to be very useful elsewhere. For these reasons, I like the idea of keeping the styles specific via the custom element name. Better to not mix these component-specific styles in with the general button styles. A class would work here too. But TAC favors tags. (We can of course do our own thing. We don't need to follow TAC religiously.)

If we do want to make reusable burger and waffle icon buttons in the DS, then yeah, we'd probably want a different approach.

Morning all! Happy Monday. Does there happen to be CSS for this

Office-of-Digital-Services / California-Design-System

TAC-style Header #32