@hashicorp/design-system-components 1.0.4 → 1.1.0

package/.stylelintignore

@@ -0,0 +1,26 @@
+# unconventional js
+/blueprints/*/files/
+/vendor/
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/bower_components/
+/node_modules/
+
+# misc
+/coverage/
+!.*
+.*/
+.eslintcache
+.lint-todo/
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
+/package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @hashicorp/design-system-components
 
+## 1.1.0
+
+### Minor Changes
+
+- [#539](https://github.com/hashicorp/design-system/pull/539) [`5b548865`](https://github.com/hashicorp/design-system/commit/5b548865ed1000e5f51c22365a81c858576bd2bd) Thanks [@alex-ju](https://github.com/alex-ju)! - Add custom styles for `ember-power-select` add-on
+
+* [#577](https://github.com/hashicorp/design-system/pull/577) [`2f5a2c21`](https://github.com/hashicorp/design-system/commit/2f5a2c214c25be7fd91c2e73c88fb436f72dbd6f) Thanks [@alex-ju](https://github.com/alex-ju)! - Add small variant to `Hds::Dropdown::ToggleButton`
+
+### Patch Changes
+
+- [#545](https://github.com/hashicorp/design-system/pull/545) [`6d2a6298`](https://github.com/hashicorp/design-system/commit/6d2a6298c407a74a14a11b3426fd60d673d10954) Thanks [@didoo](https://github.com/didoo)! - Small cleanup (reformatting, linting) of the Sass files. Should have zero visual impact on the components.
+
+* [#565](https://github.com/hashicorp/design-system/pull/565) [`0f5247f0`](https://github.com/hashicorp/design-system/commit/0f5247f0f088ad35f877294089d0c69caaffdb37) Thanks [@didoo](https://github.com/didoo)! - added stylelint to the codebase and re-organized CSS declarations
+
+* Updated dependencies [[`0b245333`](https://github.com/hashicorp/design-system/commit/0b24533369ccc2d02aa5c6c8b8ba4f722e07d236)]:
+  - @hashicorp/design-system-tokens@1.0.1
+
 ## 1.0.4
 
 ### Patch Changes

package/addon/components/hds/badge/index.hbs

@@ -1,7 +1,7 @@
 <div class={{this.classNames}} ...attributes>
   {{#if @icon}}
     <div class="hds-badge__icon">
-      <FlightIcon @name={{this.icon}} @size="16" @stretched="true" />
+      <FlightIcon @name={{this.icon}} @size="16" @stretched={{true}} />
     </div>
   {{/if}}
   {{#if this.isIconOnly}}

package/addon/components/hds/badge/index.js

@@ -30,7 +30,7 @@ export default class HdsBadgeIndexComponent extends Component {
     assert(
       `@size for "Hds::Badge" must be one of the following: ${SIZES.join(
         ', '
-      )}, received: ${size}`,
+      )}; received: ${size}`,
       SIZES.includes(size)
     );
 
@@ -51,7 +51,7 @@ export default class HdsBadgeIndexComponent extends Component {
     assert(
       `@type for "Hds::Badge" must be one of the following: ${TYPES.join(
         ', '
-      )}, received: ${type}`,
+      )}; received: ${type}`,
       TYPES.includes(type)
     );
 
@@ -72,7 +72,7 @@ export default class HdsBadgeIndexComponent extends Component {
     assert(
       `@color for "Hds::Badge" must be one of the following: ${COLORS.join(
         ', '
-      )}, received: ${color}`,
+      )}; received: ${color}`,
       COLORS.includes(color)
     );
 

package/addon/components/hds/badge-count/index.js

@@ -23,7 +23,7 @@ export default class HdsBadgeCountIndexComponent extends Component {
     assert(
       `@size for "Hds::BadgeCount" must be one of the following: ${SIZES.join(
         ', '
-      )}, received: ${size}`,
+      )}; received: ${size}`,
       SIZES.includes(size)
     );
 
@@ -44,7 +44,7 @@ export default class HdsBadgeCountIndexComponent extends Component {
     assert(
       `@type for "Hds::BadgeCount" must be one of the following: ${TYPES.join(
         ', '
-      )}, received: ${type}`,
+      )}; received: ${type}`,
       TYPES.includes(type)
     );
 
@@ -65,7 +65,7 @@ export default class HdsBadgeCountIndexComponent extends Component {
     assert(
       `@color for "Hds::BadgeCount" must be one of the following: ${COLORS.join(
         ', '
-      )}, received: ${color}`,
+      )}; received: ${color}`,
       COLORS.includes(color)
     );
 

package/addon/components/hds/breadcrumb/item.js

@@ -14,7 +14,7 @@ export default class HdsBreadcrumbItemComponent extends Component {
 
     if (maxWidth) {
       assert(
-        `@maxWidth for "Hds::Breadcrumb::Item" must be a size as number in 'px' or in 'em' (eg. '200px' or '24em'), received: ${maxWidth}`,
+        `@maxWidth for "Hds::Breadcrumb::Item" must be a size as number in 'px' or in 'em' (eg. '200px' or '24em'); received: ${maxWidth}`,
         maxWidth.match(/^\d+(px|em)$/)
       );
 

package/addon/components/hds/card/container.js

@@ -23,7 +23,7 @@ export default class HdsCardContainerComponent extends Component {
     assert(
       `@level for "Hds::Card::Container" must be one of the following: ${LEVELS.join(
         ', '
-      )}, received: ${level}`,
+      )}; received: ${level}`,
       LEVELS.includes(level)
     );
 
@@ -44,7 +44,7 @@ export default class HdsCardContainerComponent extends Component {
       assert(
         `@levelHover for "Hds::Card::Container" must be one of the following: ${LEVELS.join(
           ', '
-        )}, received: ${levelHover}`,
+        )}; received: ${levelHover}`,
         LEVELS.includes(levelHover)
       );
     }
@@ -66,7 +66,7 @@ export default class HdsCardContainerComponent extends Component {
       assert(
         `@levelActive for "Hds::Card::Container" must be one of the following: ${LEVELS.join(
           ', '
-        )}, received: ${levelActive}`,
+        )}; received: ${levelActive}`,
         LEVELS.includes(levelActive)
       );
     }
@@ -88,7 +88,7 @@ export default class HdsCardContainerComponent extends Component {
     assert(
       `@background for "Hds::Card::Container" must be one of the following: ${BACKGROUNDS.join(
         ', '
-      )}, received: ${background}`,
+      )}; received: ${background}`,
       BACKGROUNDS.includes(background)
     );
 
@@ -109,7 +109,7 @@ export default class HdsCardContainerComponent extends Component {
     assert(
       `@overflow for "Hds::Card::Container" must be one of the following: ${OVERFLOWS.join(
         ', '
-      )}, received: ${overflow}`,
+      )}; received: ${overflow}`,
       OVERFLOWS.includes(overflow)
     );
 

package/addon/components/hds/dropdown/toggle/button.hbs

@@ -18,6 +18,7 @@
   @icon="chevron-down"
   @iconPosition="trailing"
   @color={{this.color}}
+  @size={{@size}}
   ...attributes
   aria-expanded={{if @isOpen "true" "false"}}
   {{on "click" this.onClick}}

package/addon/components/hds/form/field/index.js

@@ -37,7 +37,7 @@ export default class HdsFormFieldIndexComponent extends Component {
     assert(
       `@type for "Hds::Form::Field" must be one of the following: ${LAYOUT_TYPES.join(
         ', '
-      )}, received: ${layout}`,
+      )}; received: ${layout}`,
       LAYOUT_TYPES.includes(layout)
     );
 

package/addon/components/hds/form/text-input/base.js

@@ -28,7 +28,7 @@ export default class HdsFormTextInputBaseComponent extends Component {
     assert(
       `@type for "Hds::Form::TextInput" must be one of the following: ${TYPES.join(
         ', '
-      )}, received: ${type}`,
+      )}; received: ${type}`,
       TYPES.includes(type)
     );
 

package/addon/components/hds/icon-tile/index.hbs

@@ -1,18 +1,18 @@
 <div class={{this.classNames}} aria-hidden="true" ...attributes>
   {{#if @icon}}
     <div class="hds-icon-tile__icon">
-      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched="true" />
+      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
     </div>
   {{/if}}
   {{#if @logo}}
     <div class="hds-icon-tile__logo">
-      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched="true" />
+      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
     </div>
   {{/if}}
   {{#if this.iconSecondary}}
     <div class="hds-icon-tile__extra">
       <div class="hds-icon-tile__extra-icon">
-        <FlightIcon @name={{this.iconSecondary}} @size="16" @stretched="true" />
+        <FlightIcon @name={{this.iconSecondary}} @size="16" @stretched={{true}} />
       </div>
     </div>
   {{/if}}

package/addon/components/hds/icon-tile/index.js

@@ -32,7 +32,7 @@ export default class HdsIconTileIndexComponent extends Component {
     assert(
       `@size for "Hds::IconTile" must be one of the following: ${SIZES.join(
         ', '
-      )}, received: ${size}`,
+      )}; received: ${size}`,
       SIZES.includes(size)
     );
 
@@ -59,7 +59,7 @@ export default class HdsIconTileIndexComponent extends Component {
     assert(
       `@color for "Hds::IconTile" must be one of the following: ${COLORS.join(
         ', '
-      )}, received: ${color}`,
+      )}; received: ${color}`,
       COLORS.includes(color)
     );
 
@@ -112,7 +112,7 @@ export default class HdsIconTileIndexComponent extends Component {
       assert(
         `@logo for "Hds::IconTile" must be one of the following: ${PRODUCTS.join(
           ', '
-        )}, received: ${logo}`,
+        )}; received: ${logo}`,
         PRODUCTS.includes(logo)
       );
     }

package/addon/components/hds/stepper/step/indicator.js

@@ -17,7 +17,7 @@ export default class HdsStepperIndicatorStepIndexComponent extends Component {
     assert(
       `@status for "Hds::Stepper::Step::Indicator" must be one of the following: ${STATUSES.join(
         ', '
-      )}, received: ${status}`,
+      )}; received: ${status}`,
       STATUSES.includes(status)
     );
 

package/addon/components/hds/stepper/task/indicator.js

@@ -23,7 +23,7 @@ export default class HdsStepperIndicatorTaskIndexComponent extends Component {
     assert(
       `@status for "Hds::Stepper::Task::Indicator" must be one of the following: ${STATUSES.join(
         ', '
-      )}, received: ${status}`,
+      )}; received: ${status}`,
       STATUSES.includes(status)
     );
 

package/app/styles/@hashicorp/design-system-components.scss

@@ -27,16 +27,16 @@
 @use "../components/toast";
 // END COMPONENT CSS FILES IMPORTS
 
+// stylelint-disable-next-line selector-class-pattern
 .sr-only {
-	border: 0 !important;
-	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
-	-webkit-clip-path: inset(50%) !important;
-		clip-path: inset(50%) !important;  /* 2 */
-	height: 1px !important;
-	margin: -1px !important;
-	overflow: hidden !important;
-	padding: 0 !important;
-	position: absolute !important;
-	width: 1px !important;
-	white-space: nowrap !important;            /* 3 */
-}
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: -1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;            /* 3 */
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
+  clip-path: inset(50%) !important;  /* 2 */
+}

package/app/styles/@hashicorp/design-system-power-select-overrides.scss

@@ -0,0 +1,225 @@
+//
+// POWER-SELECT
+//
+// selectors is this file are defined to match original PowerSelect styles
+// and are meant to provide overrides through specificity
+//
+
+/* stylelint-disable selector-class-pattern */
+.hds-power-select {
+  font-size: 0.875rem; // 14px
+  font-family: var(--token-typography-font-stack-text);
+
+  .ember-basic-dropdown-trigger,
+  .ember-power-select-trigger {
+    max-width: 100%;
+    min-height: 34px;
+    padding: calc(var(--token-form-control-padding) + 1px);
+    padding-right: calc(var(--token-form-control-padding) + 24px); // extra space for the icon
+    padding-left: 44px;
+    color: var(--token-form-control-base-foreground-value-color);
+    background-color: var(--token-form-control-base-surface-color-default);
+    background-image: var(--token-form-select-background-image-data-url), url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.78 4.28a.75.75 0 00-1.06-1.06l-7.97 7.97-3.47-3.47a.75.75 0 00-1.06 1.06l4 4a.75.75 0 001.06 0l8.5-8.5z' fill='%231060ff'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right var(--token-form-select-background-image-position-right-x) center, top 8px left 20px;
+    background-size: var(--token-form-select-background-image-size) var(--token-form-select-background-image-size);
+    border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
+    border-radius: var(--token-form-control-border-radius);
+    box-shadow: var(--token-elevation-low-box-shadow);
+
+    &:hover,
+    &.mock-hover {
+      border-color: var(--token-form-control-base-border-color-hover);
+    }
+
+    &:focus,
+    &.mock-focus {
+      border-color: var(--token-color-focus-action-internal);
+      outline: 3px solid var(--token-color-focus-action-external);
+      outline-offset: 0;
+    }
+
+    &[aria-expanded="true"] {
+      &.ember-basic-dropdown-trigger--in-place {
+        border-radius: var(--token-form-control-border-radius);
+      }
+    }
+
+    &[aria-disabled="true"] {
+      color: var(--token-form-control-disabled-foreground-color);
+      background-color: var(--token-form-control-disabled-surface-color);
+      background-image: var(--token-form-select-background-image-data-url-disabled), url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.78 4.28a.75.75 0 00-1.06-1.06l-7.97 7.97-3.47-3.47a.75.75 0 00-1.06 1.06l4 4a.75.75 0 001.06 0l8.5-8.5z' fill='%238c909c'/%3E%3C/svg%3E");
+      border-color: var(--token-form-control-disabled-border-color);
+      box-shadow: none;
+      cursor: not-allowed;
+    }
+  }
+
+  .ember-power-select-status-icon {
+    display: none;
+  }
+
+  .ember-basic-select-dropdown,
+  .ember-power-select-dropdown {
+    &.ember-basic-dropdown-content--in-place {
+      margin-top: -3px;
+      border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
+      border-bottom-right-radius: 6px;
+      border-bottom-left-radius: 6px;
+      box-shadow: var(--token-elevation-high-box-shadow), var(--token-elevation-high-box-shadow);
+    }
+  }
+
+  .ember-power-select-search {
+    padding: 8px 12px 14px;
+
+    .ember-power-select-search-input {
+      width: 100%;
+      max-width: 100%;
+      padding: var(--token-form-control-padding);
+      color: var(--token-form-control-base-foreground-value-color);
+      line-height: 1rem;
+      background-color: var(--token-form-control-base-surface-color-default);
+      border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
+      border-radius: var(--token-form-control-border-radius);
+      box-shadow: var(--hds-elevation-inset-box-shadow);
+
+      // PLACEHOLDER
+
+      ::placeholder {
+        color: var(--token-form-control-base-foreground-placeholder-color);
+      }
+
+      // STATUS
+
+      &:hover,
+      &.mock-hover {
+        border-color: var(--token-form-control-base-border-color-hover);
+      }
+
+      // focus (same for all the states)
+
+      &:focus,
+      &.mock-focus {
+        border-color: var(--token-color-focus-action-internal);
+        // Notice: Safari doesn't apply a rounded border
+        outline: 3px solid var(--token-color-focus-action-external);
+        outline-offset: 0;
+      }
+
+      &[type="search"] {
+        padding-left: calc(var(--token-form-control-padding) + 24px); // extra space for the icon
+        background-image: var(--token-form-text-input-background-image-data-url-search);
+        background-repeat: no-repeat;
+        background-position: var(--token-form-text-input-background-image-position-x) 50%;
+        background-size: var(--token-form-text-input-background-image-size);
+
+        &::-webkit-search-cancel-button {
+          width: var(--token-form-text-input-background-image-size);
+          height: var(--token-form-text-input-background-image-size);
+          background-image: var(--token-form-text-input-background-image-data-url-search-cancel);
+          background-position: center center;
+          background-size: var(--token-form-text-input-background-image-size);
+          appearance: none;
+        }
+      }
+    }
+  }
+
+  .ember-power-select-group-name {
+    padding: 8px 16px;
+    color: var(--token-color-foreground-faint);
+    font-weight: var(--token-typography-font-weight-medium);
+    font-size: var(--token-typography-body-300-font-size);
+    font-family: var(--token-typography-body-300-font-family);
+  }
+
+  .ember-power-select-selected-item {
+    display: block;
+    margin-left: 0;
+    line-height: normal;
+  }
+
+  .ember-power-select-options {
+    padding: 6px 0;
+  }
+
+  .ember-power-select-options[role="listbox"] {
+    max-height: 36rem;
+    overflow-x: clip;
+    overflow-y: auto;
+  }
+
+  .ember-power-select-option {
+    display: block;
+    margin: 0 12px;
+    padding: 8px 8px 8px 32px;
+    line-height: normal;
+    background: none;
+    border: var(--token-form-control-border-width) solid transparent;
+    border-radius: var(--token-form-control-border-radius);
+
+    &[aria-selected="true"] {
+      color: var(--token-color-foreground-strong);
+      background-color: inherit;
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.78 4.28a.75.75 0 00-1.06-1.06l-7.97 7.97-3.47-3.47a.75.75 0 00-1.06 1.06l4 4a.75.75 0 001.06 0l8.5-8.5z' fill='%231060ff'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: top 8px left 8px;
+      background-size: var(--token-form-select-background-image-size) var(--token-form-select-background-image-size);
+    }
+
+    &[aria-current="true"],
+    &:hover {
+      color: inherit;
+      background-color: var(--token-color-surface-action);
+      border: var(--token-form-control-border-width) solid var(--token-color-palette-blue-300);
+    }
+  }
+
+  .ember-power-select-multiple-trigger {
+    padding-top: calc(var(--token-form-control-padding) - 3px);
+    padding-bottom: calc(var(--token-form-control-padding) - 3px);
+    padding-left: 20px;
+    background-image: var(--token-form-select-background-image-data-url);
+  }
+
+  .ember-power-select-multiple-option {
+    display: inline-flex;
+    align-items: stretch;
+    float: none;
+    margin: 4px 4px 4px 0;
+    padding: 3px 10px 5px 10px;
+    color: var(--token-color-foreground-primary);
+    font-weight: var(--token-typography-font-weight-medium);
+    font-size: 0.8125rem; // 13px
+    font-family: var(--token-typography-font-stack-text);
+    line-height: 1rem; // 16px
+    vertical-align: middle;
+    background-color: var(--token-color-surface-interactive);
+    border: 1px solid var(--token-color-border-strong);
+    border-radius: 50px;
+  }
+
+  .ember-power-select-multiple-remove-btn {
+    margin: 0; // reset default button margin
+    margin-right: 4px;
+    font-weight: 300;
+    font-size: 1rem;
+    border: none; // reset default button border
+    border-radius: inherit;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &:not(:hover) {
+      opacity: 1;
+    }
+  }
+
+  .hds-power-select__after-options {
+    padding: 8px;
+    color: var(--token-color-foreground-primary);
+    font-size: 0.8125rem; // 13px
+    background-color: var(--token-color-surface-faint);
+    border-top: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
+  }
+}