Prefer attributes over CSS classes

[rajsite]

Pull Request

🤨 Rationale

This PR migrates nimble away from using host CSS classes as part of the API for nimble components.

For users, host CSS classes defining styles provides poor typing compared to attributes and is strange as users expect to define classes and associated styles themselves. For nimble developers host classes make inflexible APIs as you cannot readily associate behavior changes to adding or removing classes and even doing so may defy user expectations.

See the discussion in #676 for additional background.

👩‍💻 Implementation

The following API changes were made per component:

breadcrumb

• [appearance] enum has keys: default, prominent
  • removed class .prominent-links

button

• [appearance-variant] enum has keys default, primary
  • removed class .primary

combobox

• [error-visible] boolean
  • removed class .invalid

icon

• [severity] enum has keys default, success, information, warning, error
  • removed classes .fail, .warning, .pass, .information

number-field

• [error-visible] boolean
  • removed class .invalid

text-field

• [full-bleed] boolean
  • removed class .clear-inline-padding
• [error-visible] boolean
  • removed class .invalid

tooltip

• [severity] enum has keys default, information, error
  • removed classes .fail, .information
• [icon-visible] boolean attribute
  • removed class .icon-visible

In addition some minor refactors are included in this PR:

• nimble-components
  • IHasErrorText renamed to ErrorPattern to match our other pattern conventions and used consistently
  • ButtonPattern was also updated to align
  • DesignSystem.tagFor used consistently in component templates instead of context.tagFor or hard-coded names
  • Various storybook updates such as generating uniqueIDs for tooltip stories, splitting text-customization story to be per component instead of a monolithic test, cleaned up shared storybook states
• nimble-angular
  • Removed the login component of the example app to align with blazor app
• nimble-blazor
  • Consistent whitespace formatting for razor templates

🧪 Testing

For nimble-components largely relied on chromatic and storybook for regressions. For components, angular, and blazor added the expected tests for new enumerated attributes (type tests, directive tests, and blazor component render tests).

✅ Checklist

• I have updated the project documentation to reflect my changes or determined no changes are needed. Doc updates are in Prefer attributes over host classes documentation #676

[msmithNI]

Heads up that the "Testing" section of your PR description is partially missing/ cut off - I only see "For nimble-components largely relied" in it.