@momentum-design/components 0.7.1 → 0.7.3

Sign up to get free protection for your applications and to get access to all the features.
@@ -8,7 +8,7 @@ import { Component } from '../../models';
8
8
  * - `dot`: Displays a dot notification badge with a blue color.
9
9
  * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.
10
10
  * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,
11
- * it shows `maxCounter+`. The maximum value of the counter is 999 and anything about that will be set to `999+`.
11
+ * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.
12
12
  * - `success`: Displays a success badge with a check circle icon and green color.
13
13
  * - `warning`: Displays a warning badge with a warning icon and yellow color.
14
14
  * - `error`: Displays a error badge with a error legacy icon and red color.
@@ -44,7 +44,7 @@ declare class Badge extends Component {
44
44
  */
45
45
  counter?: number;
46
46
  /**
47
- * The maximum number can be set up to 999, anything about that will be rendered as _999+_.
47
+ * The maximum number can be set up to 999, anything above that will be rendered as _999+_.
48
48
  * The max counter can be `9`, `99` or `999`.
49
49
  */
50
50
  maxCounter: number;
@@ -23,7 +23,7 @@ import styles from './badge.styles';
23
23
  * - `dot`: Displays a dot notification badge with a blue color.
24
24
  * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.
25
25
  * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,
26
- * it shows `maxCounter+`. The maximum value of the counter is 999 and anything about that will be set to `999+`.
26
+ * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.
27
27
  * - `success`: Displays a success badge with a check circle icon and green color.
28
28
  * - `warning`: Displays a warning badge with a warning icon and yellow color.
29
29
  * - `error`: Displays a error badge with a error legacy icon and red color.
@@ -46,7 +46,7 @@ class Badge extends Component {
46
46
  */
47
47
  this.variant = DEFAULTS.VARIANT;
48
48
  /**
49
- * The maximum number can be set up to 999, anything about that will be rendered as _999+_.
49
+ * The maximum number can be set up to 999, anything above that will be rendered as _999+_.
50
50
  * The max counter can be `9`, `99` or `999`.
51
51
  */
52
52
  this.maxCounter = DEFAULTS.MAX_COUNTER;
@@ -96,7 +96,6 @@ class Badge extends Component {
96
96
  <mdc-icon
97
97
  class="mdc-badge-icon ${classMap(this.getIconClasses(overlay, iconVariant, type))}"
98
98
  name="${ifDefined(iconName)}"
99
- length-unit="${DEFAULTS.LENGTH_UNIT}"
100
99
  size="${DEFAULTS.ICON_SIZE}"
101
100
  ></mdc-icon>
102
101
  `;
@@ -23,7 +23,6 @@ declare const ICON_STATE: {
23
23
  };
24
24
  declare const DEFAULTS: {
25
25
  TYPE: string;
26
- LENGTH_UNIT: string;
27
26
  MAX_COUNTER: number;
28
27
  MAX_COUNTER_LIMIT: number;
29
28
  VARIANT: string;
@@ -9,9 +9,9 @@ const BADGE_TYPE = {
9
9
  ERROR: 'error',
10
10
  };
11
11
  const ICON_NAMES_LIST = {
12
- SUCCESS_ICON_NAME: 'check-circle-filled',
13
- WARNING_ICON_NAME: 'warning-filled',
14
- ERROR_ICON_NAME: 'error-legacy-filled',
12
+ SUCCESS_ICON_NAME: 'check-circle-badge-filled',
13
+ WARNING_ICON_NAME: 'warning-badge-filled',
14
+ ERROR_ICON_NAME: 'error-legacy-badge-filled',
15
15
  };
16
16
  const ICON_VARIANT = {
17
17
  PRIMARY: 'primary',
@@ -24,7 +24,6 @@ const ICON_STATE = {
24
24
  };
25
25
  const DEFAULTS = {
26
26
  TYPE: BADGE_TYPE.DOT,
27
- LENGTH_UNIT: 'rem',
28
27
  MAX_COUNTER: 99,
29
28
  MAX_COUNTER_LIMIT: 999,
30
29
  VARIANT: ICON_VARIANT.PRIMARY,
@@ -120,7 +120,7 @@
120
120
  "declarations": [
121
121
  {
122
122
  "kind": "class",
123
- "description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything about that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
123
+ "description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
124
124
  "name": "Badge",
125
125
  "members": [
126
126
  {
@@ -164,7 +164,7 @@
164
164
  "type": {
165
165
  "text": "number"
166
166
  },
167
- "description": "The maximum number can be set up to 999, anything about that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
167
+ "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
168
168
  "attribute": "max-counter",
169
169
  "reflects": true
170
170
  },
@@ -406,7 +406,7 @@
406
406
  "type": {
407
407
  "text": "number"
408
408
  },
409
- "description": "The maximum number can be set up to 999, anything about that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
409
+ "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
410
410
  "fieldName": "maxCounter"
411
411
  },
412
412
  {
@@ -433,7 +433,7 @@
433
433
  "module": "/src/models"
434
434
  },
435
435
  "tagName": "mdc-badge",
436
- "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything about that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n */",
436
+ "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n */",
437
437
  "customElement": true
438
438
  }
439
439
  ],
@@ -7,7 +7,7 @@ import Component from '../../components/badge';
7
7
  * - `dot`: Displays a dot notification badge with a blue color.
8
8
  * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.
9
9
  * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,
10
- * it shows `maxCounter+`. The maximum value of the counter is 999 and anything about that will be set to `999+`.
10
+ * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.
11
11
  * - `success`: Displays a success badge with a check circle icon and green color.
12
12
  * - `warning`: Displays a warning badge with a warning icon and yellow color.
13
13
  * - `error`: Displays a error badge with a error legacy icon and red color.
@@ -10,7 +10,7 @@ import { TAG_NAME } from '../../components/badge/badge.constants';
10
10
  * - `dot`: Displays a dot notification badge with a blue color.
11
11
  * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.
12
12
  * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,
13
- * it shows `maxCounter+`. The maximum value of the counter is 999 and anything about that will be set to `999+`.
13
+ * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.
14
14
  * - `success`: Displays a success badge with a check circle icon and green color.
15
15
  * - `warning`: Displays a warning badge with a warning icon and yellow color.
16
16
  * - `error`: Displays a error badge with a error legacy icon and red color.
package/package.json CHANGED
@@ -37,5 +37,5 @@
37
37
  "@momentum-design/icons": "*",
38
38
  "@momentum-design/tokens": "*"
39
39
  },
40
- "version": "0.7.1"
40
+ "version": "0.7.3"
41
41
  }