@mezzanine-ui/core 1.0.0-rc.2 → 1.0.0-rc.3

package/autocomplete/autocomplete.d.ts

@@ -1,5 +1,5 @@
-import { Size } from '@mezzanine-ui/system/size';
-export type AutoCompleteInputSize = Size;
+import { GeneralSize } from '@mezzanine-ui/system/size';
+export type AutoCompleteInputSize = GeneralSize;
 export type AutoCompleteMode = 'single' | 'multiple';
 export type AutoCompleteTriggerType = 'default' | 'error';
 export type AutoCompleteSelector = 'input' | 'selection';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/core",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.3",
   "description": "Core for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -40,8 +40,8 @@
     }
   },
   "dependencies": {
-    "@mezzanine-ui/icons": "1.0.0-rc.2",
-    "@mezzanine-ui/system": "1.0.0-rc.2",
+    "@mezzanine-ui/icons": "1.0.0-rc.3",
+    "@mezzanine-ui/system": "1.0.0-rc.3",
     "lodash": "^4.17.21",
     "tslib": "^2.8.1"
   },

package/table/_table-styles.scss

@@ -337,6 +337,24 @@ $z-index-config: (
       }
     }
 
+    &--state-added {
+      td {
+        background-color: palette.semantic-variable("background", brand-ghost);
+      }
+    }
+
+    &--state-deleted {
+      td {
+        background-color: palette.semantic-variable("background", error-ghost);
+      }
+    }
+
+    &--state-disabled {
+      td {
+        background-color: palette.semantic-variable("background", neutral-subtle);
+      }
+    }
+
     &--zebra {
       td {
         background-color: palette.semantic-variable("background", neutral-ghost);

package/table/table.d.ts

@@ -21,6 +21,9 @@ export declare const tableClasses: {
     readonly bodyRowSelected: "mzn-table__body__row--selected";
     readonly bodyRowSeparator: "mzn-table__body__row--separator";
     readonly bodyRowZebra: "mzn-table__body__row--zebra";
+    readonly bodyRowStateAdded: "mzn-table__body__row--state-added";
+    readonly bodyRowStateDeleted: "mzn-table__body__row--state-deleted";
+    readonly bodyRowStateDisabled: "mzn-table__body__row--state-disabled";
     readonly bulkActions: "mzn-table__bulk-actions";
     readonly bulkActionsFixed: "mzn-table__bulk-actions--fixed";
     readonly bulkActionsSelectionSummary: "mzn-table__bulk-actions__selection-summary";
@@ -93,6 +96,8 @@ export type HighlightMode = 'cell' | 'column' | 'row' | 'cross';
 export type FixedType = boolean | 'start' | 'end';
 /** Table size type */
 export type TableSize = 'main' | 'sub';
+/** Row state for semantic background color overrides */
+export type TableRowState = 'added' | 'deleted' | 'disabled';
 /**
  * Title menu configuration for table column header dropdown
  */

package/table/table.js

@@ -17,6 +17,9 @@ const tableClasses = {
     bodyRowSelected: `${tableBodyPrefix}__row--selected`,
     bodyRowSeparator: `${tableBodyPrefix}__row--separator`,
     bodyRowZebra: `${tableBodyPrefix}__row--zebra`,
+    bodyRowStateAdded: `${tableBodyPrefix}__row--state-added`,
+    bodyRowStateDeleted: `${tableBodyPrefix}__row--state-deleted`,
+    bodyRowStateDisabled: `${tableBodyPrefix}__row--state-disabled`,
     bulkActions: `${tablePrefix}__bulk-actions`,
     bulkActionsFixed: `${tablePrefix}__bulk-actions--fixed`,
     bulkActionsSelectionSummary: `${tablePrefix}__bulk-actions__selection-summary`,

package/text-field/_text-field-styles.scss

@@ -323,6 +323,38 @@ $size-configs: (
     }
   }
 
+  &--clearing {
+    & > .#{$prefix}__clear-icon {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .#{$prefix}__suffix--overlay {
+      .#{$prefix}__suffix-content {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .#{$prefix}__clear-icon {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+  }
+
+  &__suffix--overlay {
+    display: grid;
+
+    .#{$prefix}__suffix-content,
+    .#{$prefix}__clear-icon {
+      grid-area: 1 / 1;
+    }
+  }
+
+  &__suffix-content {
+    transition: transition.standard(opacity, fast);
+  }
+
   &--disabled {
     cursor: not-allowed;
     pointer-events: none;

package/text-field/textField.d.ts

@@ -7,6 +7,9 @@ export declare const textFieldClasses: {
     readonly active: "mzn-text-field--active";
     readonly clearIcon: "mzn-text-field__clear-icon";
     readonly clearable: "mzn-text-field--clearable";
+    readonly clearing: "mzn-text-field--clearing";
+    readonly suffixContent: "mzn-text-field__suffix-content";
+    readonly suffixOverlay: "mzn-text-field__suffix--overlay";
     readonly disabled: "mzn-text-field--disabled";
     readonly error: "mzn-text-field--error";
     readonly fullWidth: "mzn-text-field--full-width";

package/text-field/textField.js

@@ -5,6 +5,9 @@ const textFieldClasses = {
     active: `${textFieldPrefix}--active`,
     clearIcon: `${textFieldPrefix}__clear-icon`,
     clearable: `${textFieldPrefix}--clearable`,
+    clearing: `${textFieldPrefix}--clearing`,
+    suffixContent: `${textFieldPrefix}__suffix-content`,
+    suffixOverlay: `${textFieldPrefix}__suffix--overlay`,
     disabled: `${textFieldPrefix}--disabled`,
     error: `${textFieldPrefix}--error`,
     fullWidth: `${textFieldPrefix}--full-width`,