@hashicorp/design-system-components 1.4.0 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @hashicorp/design-system-components
 
+## 1.4.1
+
+### Patch Changes
+
+- [#740](https://github.com/hashicorp/design-system/pull/740) [`cd1a09307`](https://github.com/hashicorp/design-system/commit/cd1a09307aef9617e7a31a5d9e722417f4c9045e) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `indeterminate` style to `Checkbox` component
+
+- Updated dependencies [[`92c83961f`](https://github.com/hashicorp/design-system/commit/92c83961f0e8b01e52e3c596c85871ec5cf8c94d)]:
+  - @hashicorp/design-system-tokens@1.3.0
+
 ## 1.4.0
 
 ### Minor Changes

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

@@ -5,7 +5,7 @@ import { assert } from '@ember/debug';
 
 const DENSITIES = ['short', 'medium', 'tall'];
 const DEFAULT_DENSITY = 'medium';
-const VALIGNMENTS = ['top', 'middle', 'bottom', 'baseline', 'sub', 'text-top'];
+const VALIGNMENTS = ['top', 'middle'];
 const DEFAULT_VALIGN = 'top';
 
 export default class HdsTableIndexComponent extends Component {
@@ -20,11 +20,21 @@ export default class HdsTableIndexComponent extends Component {
   /**
    * @param isStriped
    * @type {boolean}
-   * @default true
-   * @description Determines whether the table rows should have alternating background colors; defaults to true.
+   * @default false
+   * @description Determines whether the table rows should have alternating background colors; defaults to false.
    */
   get isStriped() {
-    return this.args.isStriped ?? true;
+    return this.args.isStriped ?? false;
+  }
+
+  /**
+   * @param isFixedLayout
+   * @type {boolean}
+   * @default false
+   * @description Determines whether the table-display should be set to fixed; meaning, the table columns are of equal width no matter the content; defaults to false.
+   */
+  get isFixedLayout() {
+    return this.args.isFixedLayout ?? false;
   }
 
   /**
@@ -50,7 +60,7 @@ export default class HdsTableIndexComponent extends Component {
    * @param valign
    * @type {string}
    * @default 'top'
-   * @description Determines the vertical alignment of the table cells; options are all of the values accepted by the CSS "vertical-align" property: "top", "middle", "bottom", "baseline", "sub", and "text-top". If no valign is defined, "top" is used.
+   * @description Determines the vertical alignment of the table cells; options are: "top", "middle". If no valign is defined, "top" is used.
    */
   get valign() {
     let { valign = DEFAULT_VALIGN } = this.args;
@@ -78,6 +88,11 @@ export default class HdsTableIndexComponent extends Component {
       classes.push('hds-table--striped');
     }
 
+    // add a class based on the @isFixedLayout argument
+    if (this.isFixedLayout) {
+      classes.push('hds-table--layout-fixed');
+    }
+
     // add a class based on the @density argument
     if (this.density) {
       classes.push(`hds-table--density-${this.density}`);

package/app/styles/components/form/checkbox.scss

@@ -22,7 +22,7 @@
 
   // base (default)
 
-  &:not(:checked) {
+  &:not(:checked, :indeterminate) {
     background-color: var(--token-form-control-base-surface-color-default);
     border-color: var(--token-form-control-base-border-color-default);
     box-shadow: var(--hds-elevation-inset-box-shadow);
@@ -34,16 +34,24 @@
     border-color: var(--token-form-control-checked-border-color-default);
   }
 
+  &:indeterminate {
+    background-color: var(--token-form-control-checked-surface-color-default);
+    background-image: var(--token-form-checkbox-background-image-data-url-indeterminate);
+    border-color: var(--token-form-control-checked-border-color-default);
+  }
+
   // hover
 
-  &:hover:not(:checked),
-  &.mock-hover:not(:checked) {
+  &:hover:not(:checked, :indeterminate),
+  &.mock-hover:not(:checked, :indeterminate) {
     background-color: var(--token-form-control-base-surface-color-hover);
     border-color: var(--token-form-control-base-border-color-hover);
   }
 
   &:hover:checked,
-  &.mock-hover:checked {
+  &.mock-hover:checked,
+  &:hover:indeterminate,
+  &.mock-hover:indeterminate {
     background-color: var(--token-form-control-checked-border-color-default);
     border-color: var(--token-form-control-checked-border-color-hover);
   }
@@ -58,7 +66,7 @@
 
   // DISABLED
 
-  &:disabled:not(:checked) {
+  &:disabled:not(:checked, :indeterminate) {
     background-color: var(--token-form-control-disabled-surface-color);
     border-color: var(--token-form-control-disabled-border-color);
     box-shadow: none;
@@ -72,4 +80,13 @@
     box-shadow: none;
     cursor: not-allowed;
   }
+
+  &:disabled:indeterminate {
+    background-color: var(--token-form-control-disabled-surface-color);
+    background-image: var(--token-form-checkbox-background-image-data-url-indeterminate-disabled);
+    background-repeat: no-repeat;
+    border-color: var(--token-form-control-disabled-border-color);
+    box-shadow: none;
+    cursor: not-allowed;
+  }
 }

package/app/styles/components/table.scss

@@ -16,12 +16,16 @@ $hds-table-cell-padding-tall: 20px 16px;
 
 .hds-table {
   width: 100%;
-  table-layout: fixed;
   border: $hds-table-border-width solid $hds-table-border-color;
   border-radius: $hds-table-border-radius;
   border-spacing: 0;
 }
 
+// TABLE DISPLAY
+.hds-table--layout-fixed {
+  table-layout: fixed;
+}
+
 // TABLE HEADER
 .hds-table__thead {
   .hds-table__tr {
@@ -131,21 +135,6 @@ $hds-table-cell-padding-tall: 20px 16px;
   vertical-align: middle;
 }
 
-.hds-table--valign-bottom .hds-table__tbody td {
-  vertical-align: bottom;
-}
-
-.hds-table--valign-baseline .hds-table__tbody td {
-  vertical-align: baseline;
-}
-
-.hds-table--valign-sub .hds-table__tbody td {
-  vertical-align: sub;
-}
-
-.hds-table--valign-text-top .hds-table__tbody td {
-  vertical-align: text-top;
-}
 
 .hds-table__tbody {
   .hds-table__tr {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -36,7 +36,7 @@
     "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^1.2.0",
+    "@hashicorp/design-system-tokens": "^1.3.0",
     "@hashicorp/ember-flight-icons": "^3.0.2",
     "dialog-polyfill": "^0.5.6",
     "ember-auto-import": "^2.4.2",
@@ -58,7 +58,7 @@
     "@embroider/test-setup": "^1.8.3",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@percy/cli": "^1.13.0",
+    "@percy/cli": "^1.16.0",
     "@percy/ember": "^4.0.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",