@hashicorp/design-system-components 0.9.1 → 0.9.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hashicorp/design-system-components
 
+## 0.9.2
+
+### Patch Changes
+
+- [#209](https://github.com/hashicorp/design-system/pull/209) [`6021d433`](https://github.com/hashicorp/design-system/commit/6021d43352b8e38b268b06cd98ca0c62adb14999) Thanks [@didoo](https://github.com/didoo)! - Re-ordered declarations of CSS states
+
 ## 0.9.1
 
 ### Patch Changes

package/NEW-COMPONENT-CHECKLIST.md

@@ -14,25 +14,27 @@ The engineering checklist has six parts: creating the feature branch, component
 
 ### Component Creation
 
-- [ ] create new branch from main for the component.
+- [ ] create new branch from main for the component (`git checkout -b USER/COMPONENT-NAME`)
 - [ ] create new component
-  - `ember generate component hds/COMPONENT_NAME/index --gc` (the component won't need to be invoked with index, it's just to put all the files in the correct place)
-  - if it's a variation on a component, then `hds/COMPONENT_NAME/VARIATION` instead of `index`
+  - `ember generate component hds/COMPONENT-NAME/index --gc` (the component won't need to be invoked with index, it's just to put all the files in the correct place)
+  - tip: if you forget to generate the backing class (via `--gc`), you can add it with `ember generate component-class hds/COMPONENT-NAME/index`.
+  - if it's a child component, then `hds/COMPONENT_NAME/CHILD_NAME` instead of `index`
+  - tip: if you need to destroy a component and start over again, `ember destroy component hds/COMPONENT-NAME/index` will remove the component and the related files as appropriate.
 - [ ] **component template**
   - use semantic HTML
   - the component should have a css class that is the same as the component (e.g. `hds/button` should have a class name of `hds-button` on the component, and additional CSS classes should start with this same class name.
   - add `...attributes` unless doing so would be detrimental (e.g., a parent element and child element in the same component that both have ...attributes)
 - [ ] **component class**
   - use getters (vs template conditionals or constructors, if possible)
-  - write API comments in the JS doc way (copy from an existing DS component)
-  - use the same naming as the Figma file for the components API unless it conflicts with a pre-existing HTML attribute. If that is the case, document the difference in the comment.
-  - ensure that all existing functionality (from a Structure component) is accounted for in some way. If we are not providing existing functionality at all, it should be documented (along with the reason why). If we are providing temporary functionality, explain that it's temporary and why.
-  - check the [design system website](https://design-system-website.vercel.app/?path=/story/example-introduction--page) to see what kind of component functionality is being used across all products
+  - we have chosen to define the value of the `class` attribute (containing the different CSS class names) for the "root" of the element's code in the backing class, UNLESS that component only has one CSS class name.
+  - write API comments in the [JS doc](https://jsdoc.app/) format (look at existing components for examples)
+  - use the same naming as the Figma file for the components API, unless it conflicts with a pre-existing HTML attribute. If that is the case, document the difference in a comment.
+  - if there is an existing Structure component that is similar to the HDS component being created, ensure that all existing functionality is accounted for in some way. If we are not providing existing functionality at all, it should be documented (along with the reason why). If we are providing temporary functionality, explain that it's temporary and why.
   - booleans should start with a verb (is/has/etc)
-  - assertion text should match the content style of the other components.
-  - goal is a terse invocation
+  - assertions should match the content style of the other components, e.g., `'@text for "Hds::Button" must have a valid value'`,
+  - program with intent; think about the invocation for the developer who will use the component. The goal is a terse invocation, but we also want to consider the big picture. Try to get feedback when you can.
 - [ ] **component style**
-  - create `component/COMPONENT_NAME.scss` in `app/styles`
+  - create `component/COMPONENT-NAME.scss` in `app/styles`
   - add `@use` to `app/styles/@hashicorp/design-system-components.scss` (see existing code for precise syntax)
   - use design tokens wherever possible, comment where they are not
   - sizes should be in relative units
@@ -42,12 +44,18 @@ The engineering checklist has six parts: creating the feature branch, component
   - [ ] test defaults
   - [ ] try not to repeat tests (i.e., don't have to test all sizes, all colors, etc.)
   - [ ] test all accessibility attributes
+  - [ ] test assertions
 - [ ] **documentation**
   - create component page `ember generate route components/COMPONENT_NAME --dummy`
   - add link to `templates/index.hbs` page
-  - [ ] API docs
+  - [ ] Definition of component (from CRD) (this should be a paragraph under the component name, and before the first section)
+  - [ ] Component API
   - [ ] Usage
+  - [ ] Design Guidelines
   - [ ] Accessibility
+    - Conformance Rating [(internal document)](https://docs.google.com/document/d/1OjTKpQLB_wuZSVJNLbbguTzMDMYCHKhNdKQz7-Kfqic/edit#bookmark=id.v7r42vfu4pdd)
+    - Known Issues (if any)
+    - Related WCAG (pull from CRD or ask Melanie)
   - [ ] Showcase
 
 ### Component Review
@@ -69,5 +77,6 @@ Pre-review request checks:
   - Edge (once available)
 
 When ready for review:
+
 - [ ] add situationally appropriate reviewers
 - [ ] added instructions for reviewers in your PR, letting them know what kind of review you need

package/app/styles/components/breadcrumb.scss

@@ -2,6 +2,7 @@
 // BREADCRUMB
 //
 // properties within each class are sorted alphabetically
+// notice: pseudo-classes for the states *must* follow the order link > visited > hover > focus > active
 //
 //
 
@@ -75,9 +76,6 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
     // notice: the text decoration is applied directly to the "text" container because of a bug in Safari (see https://github.com/hashicorp/design-system-components/issues/159)
     text-decoration-color: transparent;
 
-    // we apply the focus directly to the element, without using a pseudo-element
-    @include hds-focus-ring-basic();
-
     &:hover,
     &.is-hover {
         color: var(--token-color-palette-neutral-600);
@@ -87,6 +85,9 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
         }
     }
 
+    // we apply the focus directly to the element, without using a pseudo-element
+    @include hds-focus-ring-basic();
+
     &:active,
     &.is-active {
         color: var(--token-color-foreground-secondary);
@@ -153,25 +154,27 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
     padding: 0;
     width: $hds-breadcrumb-item-height;
 
-    // we apply the focus directly to the element, without using a pseudo-element
-    @include hds-focus-ring-basic();
-
     &:hover,
     &.is-hover {
         border-color: var(--token-color-border-strong);
         color: var(--token-color-foreground-faint);
     }
+
+    // we apply the focus directly to the element, without using a pseudo-element
+    @include hds-focus-ring-basic();
+
+    &:focus,
+    &.is-focus {
+        background-color: transparent;
+        border: none; // important: we need to completely remove the border, of the inner box-shadow of the focus ring will be drawn inside the border
+    }
+
     &:active,
     &.is-active {
         background-color: var(--token-color-surface-interactive-active);
         border-color: var(--token-color-border-strong);
         color: var(--token-color-foreground-primary);
     }
-    &:focus,
-    &.is-focus {
-        background-color: transparent;
-        border: none; // important: we need to completely remove the border, of the inner box-shadow of the focus ring will be drawn inside the border
-    }
 }
 
 .hds-breadcrumb__truncation-content {

package/app/styles/components/button.scss

@@ -2,8 +2,7 @@
 // BUTTON COMPONENT
 //
 // properties within each class are sorted alphabetically
-// notice: pseudo-classes for the states *must* follow the order link > visited > focus > hover > active
-// see https://github.com/hashicorp/design-system-components/issues/132
+// notice: pseudo-classes for the states *must* follow the order link > visited > hover > focus > active
 //
 //
 
@@ -145,6 +144,14 @@ $size-props: (
   box-shadow: var(--token-elevation-low-box-shadow);
   color: var(--token-color-foreground-high-contrast);
 
+  &:hover,
+  &.is-hover {
+    background-color: var(--token-color-palette-blue-300);
+    border-color: var(--token-color-palette-blue-400);
+    color: var(--token-color-foreground-high-contrast);
+    cursor: pointer;
+  }
+
   &:focus,
   &.is-focus {
     background-color: var(--token-color-palette-blue-200);
@@ -163,13 +170,7 @@ $size-props: (
       top: -$shift;
     }
   }
-  &:hover,
-  &.is-hover {
-    background-color: var(--token-color-palette-blue-300);
-    border-color: var(--token-color-palette-blue-400);
-    color: var(--token-color-foreground-high-contrast);
-    cursor: pointer;
-  }
+
   &:active,
   &.is-active {
     background-color: var(--token-color-palette-blue-400);
@@ -188,6 +189,14 @@ $size-props: (
   box-shadow: var(--token-elevation-low-box-shadow);
   color: var(--token-color-foreground-primary);
 
+  &:hover,
+  &.is-hover {
+    background-color: var(--token-color-surface-primary);
+    border-color: var(--token-color-border-strong);
+    color: var(--token-color-foreground-primary);
+    cursor: pointer;
+  }
+
   &:focus,
   &.is-focus {
     background-color: var(--token-color-surface-faint);
@@ -197,13 +206,7 @@ $size-props: (
       border-color: var(--token-color-focus-action-external);
     }
   }
-  &:hover,
-  &.is-hover {
-    background-color: var(--token-color-surface-primary);
-    border-color: var(--token-color-border-strong);
-    color: var(--token-color-foreground-primary);
-    cursor: pointer;
-  }
+
   &:active,
   &.is-active {
     background-color: var(--token-color-surface-interactive-active);
@@ -221,6 +224,14 @@ $size-props: (
   border-color: transparent;
   color: var(--token-color-foreground-action);
 
+  &:hover,
+  &.is-hover {
+    background-color: var(--token-color-surface-primary);
+    border-color: var(--token-color-border-strong);
+    color: var(--token-color-foreground-action-hover);
+    cursor: pointer;
+  }
+
   &:focus,
   &.is-focus {
     border-color: var(--token-color-focus-action-internal);
@@ -229,13 +240,7 @@ $size-props: (
       border-color: var(--token-color-focus-action-external);
     }
   }
-  &:hover,
-  &.is-hover {
-    background-color: var(--token-color-surface-primary);
-    border-color: var(--token-color-border-strong);
-    color: var(--token-color-foreground-action-hover);
-    cursor: pointer;
-  }
+
   &:active,
   &.is-active {
     background-color: var(--token-color-surface-interactive-active);
@@ -271,6 +276,14 @@ $size-props: (
   box-shadow: var(--token-elevation-low-box-shadow);
   color: var(--token-color-foreground-critical-on-surface);
 
+  &:hover,
+  &.is-hover {
+    background-color: var(--token-color-palette-red-300);
+    border-color: var(--token-color-palette-red-400);
+    color: var(--token-color-foreground-high-contrast);
+    cursor: pointer;
+  }
+
   &:focus,
   &.is-focus {
     background-color: var(--token-color-surface-critical);
@@ -280,13 +293,6 @@ $size-props: (
       border-color: var(--token-color-focus-critical-external);
     }
   }
-  &:hover,
-  &.is-hover {
-    background-color: var(--token-color-palette-red-300);
-    border-color: var(--token-color-palette-red-400);
-    color: var(--token-color-foreground-high-contrast);
-    cursor: pointer;
-  }
 
   &:active,
   &.is-active {

package/app/styles/components/dropdown.scss

@@ -15,7 +15,6 @@
 //
 // properties within each class are sorted alphabetically
 // notice: pseudo-classes for the states *must* follow the order link > visited > hover > focus > active
-// see https://github.com/hashicorp/design-system-components/issues/132
 //
 //
 

package/app/styles/components/link/standalone.scss

@@ -2,8 +2,7 @@
 // LINK > STANDALONE COMPONENT
 //
 // properties within each class are sorted alphabetically
-// notice: pseudo-classes for the states *must* follow the order link > visited > focus > hover > active
-// see https://github.com/hashicorp/design-system-components/issues/132
+// notice: pseudo-classes for the states *must* follow the order link > visited > hover > focus > active
 //
 //
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",