@momentum-design/components 0.7.1 → 0.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +16 -17
- package/dist/browser/index.js.map +2 -2
- package/dist/components/badge/badge.component.d.ts +2 -2
- package/dist/components/badge/badge.component.js +2 -3
- package/dist/components/badge/badge.constants.d.ts +0 -1
- package/dist/components/badge/badge.constants.js +3 -4
- package/dist/custom-elements.json +4 -4
- package/dist/react/badge/index.d.ts +1 -1
- package/dist/react/badge/index.js +1 -1
- package/package.json +1 -1
@@ -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
|
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
|
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
|
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
|
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
|
`;
|
@@ -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
|
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
|
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
|
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
|
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
|
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
|
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