@instructure/ui-badge 7.13.0 → 7.16.0
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/CHANGELOG.md +18 -0
- package/es/Badge/__examples__/Badge.examples.js +5 -0
- package/es/Badge/index.js +18 -17
- package/es/Badge/theme.js +1 -0
- package/lib/Badge/__examples__/Badge.examples.js +5 -0
- package/lib/Badge/index.js +18 -17
- package/lib/Badge/theme.js +1 -0
- package/package.json +12 -12
- package/src/Badge/README.md +48 -51
- package/src/Badge/__examples__/Badge.examples.js +7 -0
- package/src/Badge/index.js +1 -1
- package/src/Badge/styles.css +9 -0
- package/src/Badge/theme.js +1 -0
- package/types/index.d.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [7.16.0](https://github.com/instructure/instructure-ui/compare/v7.15.0...v7.16.0) (2022-02-08)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-badge
|
|
9
|
+
|
|
10
|
+
# [7.15.0](https://github.com/instructure/instructure-ui/compare/v7.14.1...v7.15.0) (2022-02-03)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @instructure/ui-badge
|
|
13
|
+
|
|
14
|
+
## [7.14.1](https://github.com/instructure/instructure-ui/compare/v7.14.0...v7.14.1) (2021-12-06)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @instructure/ui-badge
|
|
17
|
+
|
|
18
|
+
# [7.14.0](https://github.com/instructure/instructure-ui/compare/v7.13.0...v7.14.0) (2021-12-01)
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
- **ui-badge:** add `inverse` variant to Badge ([a5c0b6f](https://github.com/instructure/instructure-ui/commit/a5c0b6f)), backports [#801](https://github.com/instructure/instructure-ui/issues/801)
|
|
23
|
+
|
|
6
24
|
# [7.13.0](https://github.com/instructure/instructure-ui/compare/v7.12.0...v7.13.0) (2021-11-18)
|
|
7
25
|
|
|
8
26
|
**Note:** Version bump only for package @instructure/ui-badge
|
|
@@ -45,5 +45,10 @@ export default {
|
|
|
45
45
|
},
|
|
46
46
|
filter: function filter(props) {
|
|
47
47
|
return props.type === 'notification' && props.countUntil || props.standalone && props.placement !== 'start top';
|
|
48
|
+
},
|
|
49
|
+
getExampleProps: function getExampleProps(props) {
|
|
50
|
+
return props.variant === 'inverse' ? {
|
|
51
|
+
background: 'primary-inverse'
|
|
52
|
+
} : {};
|
|
48
53
|
}
|
|
49
54
|
};
|
package/es/Badge/index.js
CHANGED
|
@@ -39,24 +39,25 @@ import { safeCloneElement } from '@instructure/ui-react-utils';
|
|
|
39
39
|
import { uid } from '@instructure/uid';
|
|
40
40
|
import { testable } from '@instructure/ui-testable';
|
|
41
41
|
var styles = {
|
|
42
|
-
componentId: '
|
|
42
|
+
componentId: 'cECYn',
|
|
43
43
|
template: function template(theme) {
|
|
44
|
-
return "\n\n.
|
|
44
|
+
return "\n\n.cECYn_bGBk{border-radius:".concat(theme.borderRadius || 'inherit', ";box-sizing:border-box;color:").concat(theme.color || 'inherit', ";font-family:").concat(theme.fontFamily || 'inherit', ";font-size:").concat(theme.fontSize || 'inherit', ";font-weight:").concat(theme.fontWeight || 'inherit', ";pointer-events:none;text-align:center;white-space:nowrap}\n\n[dir=ltr] .cECYn_bGBk,[dir=rtl] .cECYn_bGBk{text-align:center}\n\n.cECYn_bGBk:not(.cECYn_bBTa){position:absolute;z-index:").concat(theme.notificationZIndex || 'inherit', "}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_dDWY.cECYn_bXWC{top:calc(-1*").concat(theme.countOffset || 'inherit', ")}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_dDWY.cECYn_KksD{top:").concat(theme.notificationOffset || 'inherit', "}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_bPSM.cECYn_bXWC{bottom:calc(-1*").concat(theme.countOffset || 'inherit', ")}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_bPSM.cECYn_KksD{bottom:").concat(theme.notificationOffset || 'inherit', "}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_fcMK.cECYn_bXWC{inset-inline-end:auto;inset-inline-start:calc(-1*").concat(theme.countOffset || 'inherit', ")}\n\n[dir=ltr] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_fcMK.cECYn_bXWC{left:calc(-1*").concat(theme.countOffset || 'inherit', ");right:auto}\n\n[dir=rtl] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_fcMK.cECYn_bXWC{left:auto;right:calc(-1*").concat(theme.countOffset || 'inherit', ")}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_fcMK.cECYn_KksD{inset-inline-end:auto;inset-inline-start:").concat(theme.notificationOffset || 'inherit', "}\n\n[dir=ltr] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_fcMK.cECYn_KksD{left:").concat(theme.notificationOffset || 'inherit', ";right:auto}\n\n[dir=rtl] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_fcMK.cECYn_KksD{left:auto;right:").concat(theme.notificationOffset || 'inherit', "}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_bXgF.cECYn_bXWC{inset-inline-end:calc(-1*").concat(theme.countOffset || 'inherit', ");inset-inline-start:auto}\n\n[dir=ltr] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_bXgF.cECYn_bXWC{left:auto;right:calc(-1*").concat(theme.countOffset || 'inherit', ")}\n\n[dir=rtl] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_bXgF.cECYn_bXWC{left:calc(-1*").concat(theme.countOffset || 'inherit', ");right:auto}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_bXgF.cECYn_KksD{inset-inline-end:").concat(theme.notificationOffset || 'inherit', ";inset-inline-start:auto}\n\n[dir=ltr] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_bXgF.cECYn_KksD{left:auto;right:").concat(theme.notificationOffset || 'inherit', "}\n\n[dir=rtl] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_bXgF.cECYn_KksD{left:").concat(theme.notificationOffset || 'inherit', ";right:auto}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_bXgF.cECYn_bXWC,.cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_fcMK.cECYn_bXWC{top:calc(50% - ").concat(theme.size || 'inherit', "/2)}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_bXgF.cECYn_KksD,.cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_fcMK.cECYn_KksD{top:calc(50% - ").concat(theme.sizeNotification || 'inherit', "/2)}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_fcMK.cECYn_bXWC{inset-inline-end:calc(100% - ").concat(theme.countOffset || 'inherit', ");inset-inline-start:auto}\n\n[dir=ltr] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_fcMK.cECYn_bXWC{left:auto;right:calc(100% - ").concat(theme.countOffset || 'inherit', ")}\n\n[dir=rtl] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_fcMK.cECYn_bXWC{left:calc(100% - ").concat(theme.countOffset || 'inherit', ");right:auto}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_fcMK.cECYn_KksD{inset-inline-end:auto;inset-inline-start:calc(-1*").concat(theme.sizeNotification || 'inherit', "/2)}\n\n[dir=ltr] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_fcMK.cECYn_KksD{left:calc(-1*").concat(theme.sizeNotification || 'inherit', "/2);right:auto}\n\n[dir=rtl] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_fcMK.cECYn_KksD{left:auto;right:calc(-1*").concat(theme.sizeNotification || 'inherit', "/2)}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_bXgF.cECYn_bXWC{inset-inline-end:auto;inset-inline-start:calc(100% - ").concat(theme.countOffset || 'inherit', ")}\n\n[dir=ltr] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_bXgF.cECYn_bXWC{left:calc(100% - ").concat(theme.countOffset || 'inherit', ");right:auto}\n\n[dir=rtl] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_bXgF.cECYn_bXWC{left:auto;right:calc(100% - ").concat(theme.countOffset || 'inherit', ")}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_bXgF.cECYn_KksD{inset-inline-end:calc(-1*").concat(theme.sizeNotification || 'inherit', "/2);inset-inline-start:auto}\n\n[dir=ltr] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_bXgF.cECYn_KksD{left:auto;right:calc(-1*").concat(theme.sizeNotification || 'inherit', "/2)}\n\n[dir=rtl] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_bXgF.cECYn_KksD{left:calc(-1*").concat(theme.sizeNotification || 'inherit', "/2);right:auto}\n\n.cECYn_bGBk.cECYn_bXWC{-webkit-padding-end:").concat(theme.padding || 'inherit', ";-webkit-padding-start:").concat(theme.padding || 'inherit', ";line-height:").concat(theme.size || 'inherit', ";min-width:").concat(theme.size || 'inherit', ";padding-inline-end:").concat(theme.padding || 'inherit', ";padding-inline-start:").concat(theme.padding || 'inherit', "}\n\n[dir=ltr] .cECYn_bGBk.cECYn_bXWC{padding-left:").concat(theme.padding || 'inherit', ";padding-right:").concat(theme.padding || 'inherit', "}\n\n[dir=rtl] .cECYn_bGBk.cECYn_bXWC{padding-left:").concat(theme.padding || 'inherit', ";padding-right:").concat(theme.padding || 'inherit', "}\n\n.cECYn_bGBk.cECYn_KksD{height:").concat(theme.sizeNotification || 'inherit', ";width:").concat(theme.sizeNotification || 'inherit', "}\n\n.cECYn_zGXc{background-color:").concat(theme.colorDanger || 'inherit', "}\n\n.cECYn_zGXc.cECYn_fdSp:before{border-color:").concat(theme.colorDanger || 'inherit', "}\n\n.cECYn_cOXX{background-color:").concat(theme.colorSuccess || 'inherit', "}\n\n.cECYn_cOXX.cECYn_fdSp:before{border-color:").concat(theme.colorSuccess || 'inherit', "}\n\n.cECYn_bXiG{background-color:").concat(theme.colorPrimary || 'inherit', "}\n\n.cECYn_bXiG.cECYn_fdSp:before{border-color:").concat(theme.colorPrimary || 'inherit', "}\n\n.cECYn_enfx{background-color:").concat(theme.color || 'inherit', ";color:").concat(theme.colorInverse || 'inherit', "}\n\n.cECYn_enfx.cECYn_fdSp:before{border-color:").concat(theme.color || 'inherit', "}\n\n@keyframes cECYn_fdSp{to{opacity:0.9;transform:scale(1)}}\n\n.cECYn_fdSp{position:relative}\n\n.cECYn_fdSp:before{animation-direction:alternate;animation-duration:1s;animation-iteration-count:4;animation-name:cECYn_fdSp;border:").concat(theme.pulseBorderThickness || 'inherit', " solid;border-radius:").concat(theme.borderRadius || 'inherit', ";box-sizing:border-box;content:\"\";height:calc(100% + 0.5rem);inset-inline-end:auto;inset-inline-start:-0.25rem;opacity:0;position:absolute;top:-0.25rem;transform:scale(0.75);width:calc(100% + 0.5rem)}\n\n[dir=ltr] .cECYn_fdSp:before{left:-0.25rem;right:auto}\n\n[dir=rtl] .cECYn_fdSp:before{left:auto;right:-0.25rem}\n\n.cECYn_gasz{box-sizing:border-box;position:relative}\n\n.cECYn_gasz svg{display:block}");
|
|
45
45
|
},
|
|
46
|
-
'root': '
|
|
47
|
-
'standalone': '
|
|
48
|
-
'positioned--top': '
|
|
49
|
-
'count': '
|
|
50
|
-
'notification': '
|
|
51
|
-
'positioned--bottom': '
|
|
52
|
-
'positioned--start': '
|
|
53
|
-
'positioned--end': '
|
|
54
|
-
'positioned--center': '
|
|
55
|
-
'danger': '
|
|
56
|
-
'pulse': '
|
|
57
|
-
'success': '
|
|
58
|
-
'primary': '
|
|
59
|
-
'
|
|
46
|
+
'root': 'cECYn_bGBk',
|
|
47
|
+
'standalone': 'cECYn_bBTa',
|
|
48
|
+
'positioned--top': 'cECYn_dDWY',
|
|
49
|
+
'count': 'cECYn_bXWC',
|
|
50
|
+
'notification': 'cECYn_KksD',
|
|
51
|
+
'positioned--bottom': 'cECYn_bPSM',
|
|
52
|
+
'positioned--start': 'cECYn_fcMK',
|
|
53
|
+
'positioned--end': 'cECYn_bXgF',
|
|
54
|
+
'positioned--center': 'cECYn_eCdq',
|
|
55
|
+
'danger': 'cECYn_zGXc',
|
|
56
|
+
'pulse': 'cECYn_fdSp',
|
|
57
|
+
'success': 'cECYn_cOXX',
|
|
58
|
+
'primary': 'cECYn_bXiG',
|
|
59
|
+
'inverse': 'cECYn_enfx',
|
|
60
|
+
'wrapper': 'cECYn_gasz'
|
|
60
61
|
};
|
|
61
62
|
import theme from "./theme.js";
|
|
62
63
|
/**
|
|
@@ -196,7 +197,7 @@ var Badge = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_class =
|
|
|
196
197
|
* Make the Badge slowly pulse twice to get the user's attention.
|
|
197
198
|
*/
|
|
198
199
|
pulse: PropTypes.bool,
|
|
199
|
-
variant: PropTypes.oneOf(['primary', 'success', 'danger']),
|
|
200
|
+
variant: PropTypes.oneOf(['primary', 'success', 'danger', 'inverse']),
|
|
200
201
|
|
|
201
202
|
/**
|
|
202
203
|
* Supported values are `top start`, `top end`, `end center`, `bottom end`,
|
package/es/Badge/theme.js
CHANGED
|
@@ -35,6 +35,7 @@ export default function generator(_ref) {
|
|
|
35
35
|
colorDanger: colors.textDanger,
|
|
36
36
|
colorSuccess: colors.textSuccess,
|
|
37
37
|
colorPrimary: colors.textBrand,
|
|
38
|
+
colorInverse: colors.textDarkest,
|
|
38
39
|
size: '1.25rem',
|
|
39
40
|
countOffset: '0.5rem',
|
|
40
41
|
notificationOffset: '0.125rem',
|
|
@@ -55,6 +55,11 @@ var _default = {
|
|
|
55
55
|
},
|
|
56
56
|
filter: function filter(props) {
|
|
57
57
|
return props.type === 'notification' && props.countUntil || props.standalone && props.placement !== 'start top';
|
|
58
|
+
},
|
|
59
|
+
getExampleProps: function getExampleProps(props) {
|
|
60
|
+
return props.variant === 'inverse' ? {
|
|
61
|
+
background: 'primary-inverse'
|
|
62
|
+
} : {};
|
|
58
63
|
}
|
|
59
64
|
};
|
|
60
65
|
exports.default = _default;
|
package/lib/Badge/index.js
CHANGED
|
@@ -44,24 +44,25 @@ var _theme = _interopRequireDefault(require("./theme.js"));
|
|
|
44
44
|
var _dec, _dec2, _class, _class2, _temp;
|
|
45
45
|
|
|
46
46
|
var styles = {
|
|
47
|
-
componentId: '
|
|
47
|
+
componentId: 'cECYn',
|
|
48
48
|
template: function template(theme) {
|
|
49
|
-
return "\n\n.
|
|
49
|
+
return "\n\n.cECYn_bGBk{border-radius:".concat(theme.borderRadius || 'inherit', ";box-sizing:border-box;color:").concat(theme.color || 'inherit', ";font-family:").concat(theme.fontFamily || 'inherit', ";font-size:").concat(theme.fontSize || 'inherit', ";font-weight:").concat(theme.fontWeight || 'inherit', ";pointer-events:none;text-align:center;white-space:nowrap}\n\n[dir=ltr] .cECYn_bGBk,[dir=rtl] .cECYn_bGBk{text-align:center}\n\n.cECYn_bGBk:not(.cECYn_bBTa){position:absolute;z-index:").concat(theme.notificationZIndex || 'inherit', "}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_dDWY.cECYn_bXWC{top:calc(-1*").concat(theme.countOffset || 'inherit', ")}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_dDWY.cECYn_KksD{top:").concat(theme.notificationOffset || 'inherit', "}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_bPSM.cECYn_bXWC{bottom:calc(-1*").concat(theme.countOffset || 'inherit', ")}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_bPSM.cECYn_KksD{bottom:").concat(theme.notificationOffset || 'inherit', "}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_fcMK.cECYn_bXWC{inset-inline-end:auto;inset-inline-start:calc(-1*").concat(theme.countOffset || 'inherit', ")}\n\n[dir=ltr] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_fcMK.cECYn_bXWC{left:calc(-1*").concat(theme.countOffset || 'inherit', ");right:auto}\n\n[dir=rtl] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_fcMK.cECYn_bXWC{left:auto;right:calc(-1*").concat(theme.countOffset || 'inherit', ")}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_fcMK.cECYn_KksD{inset-inline-end:auto;inset-inline-start:").concat(theme.notificationOffset || 'inherit', "}\n\n[dir=ltr] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_fcMK.cECYn_KksD{left:").concat(theme.notificationOffset || 'inherit', ";right:auto}\n\n[dir=rtl] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_fcMK.cECYn_KksD{left:auto;right:").concat(theme.notificationOffset || 'inherit', "}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_bXgF.cECYn_bXWC{inset-inline-end:calc(-1*").concat(theme.countOffset || 'inherit', ");inset-inline-start:auto}\n\n[dir=ltr] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_bXgF.cECYn_bXWC{left:auto;right:calc(-1*").concat(theme.countOffset || 'inherit', ")}\n\n[dir=rtl] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_bXgF.cECYn_bXWC{left:calc(-1*").concat(theme.countOffset || 'inherit', ");right:auto}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_bXgF.cECYn_KksD{inset-inline-end:").concat(theme.notificationOffset || 'inherit', ";inset-inline-start:auto}\n\n[dir=ltr] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_bXgF.cECYn_KksD{left:auto;right:").concat(theme.notificationOffset || 'inherit', "}\n\n[dir=rtl] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_bXgF.cECYn_KksD{left:").concat(theme.notificationOffset || 'inherit', ";right:auto}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_bXgF.cECYn_bXWC,.cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_fcMK.cECYn_bXWC{top:calc(50% - ").concat(theme.size || 'inherit', "/2)}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_bXgF.cECYn_KksD,.cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_fcMK.cECYn_KksD{top:calc(50% - ").concat(theme.sizeNotification || 'inherit', "/2)}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_fcMK.cECYn_bXWC{inset-inline-end:calc(100% - ").concat(theme.countOffset || 'inherit', ");inset-inline-start:auto}\n\n[dir=ltr] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_fcMK.cECYn_bXWC{left:auto;right:calc(100% - ").concat(theme.countOffset || 'inherit', ")}\n\n[dir=rtl] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_fcMK.cECYn_bXWC{left:calc(100% - ").concat(theme.countOffset || 'inherit', ");right:auto}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_fcMK.cECYn_KksD{inset-inline-end:auto;inset-inline-start:calc(-1*").concat(theme.sizeNotification || 'inherit', "/2)}\n\n[dir=ltr] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_fcMK.cECYn_KksD{left:calc(-1*").concat(theme.sizeNotification || 'inherit', "/2);right:auto}\n\n[dir=rtl] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_fcMK.cECYn_KksD{left:auto;right:calc(-1*").concat(theme.sizeNotification || 'inherit', "/2)}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_bXgF.cECYn_bXWC{inset-inline-end:auto;inset-inline-start:calc(100% - ").concat(theme.countOffset || 'inherit', ")}\n\n[dir=ltr] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_bXgF.cECYn_bXWC{left:calc(100% - ").concat(theme.countOffset || 'inherit', ");right:auto}\n\n[dir=rtl] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_bXgF.cECYn_bXWC{left:auto;right:calc(100% - ").concat(theme.countOffset || 'inherit', ")}\n\n.cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_bXgF.cECYn_KksD{inset-inline-end:calc(-1*").concat(theme.sizeNotification || 'inherit', "/2);inset-inline-start:auto}\n\n[dir=ltr] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_bXgF.cECYn_KksD{left:auto;right:calc(-1*").concat(theme.sizeNotification || 'inherit', "/2)}\n\n[dir=rtl] .cECYn_bGBk:not(.cECYn_bBTa).cECYn_eCdq.cECYn_bXgF.cECYn_KksD{left:calc(-1*").concat(theme.sizeNotification || 'inherit', "/2);right:auto}\n\n.cECYn_bGBk.cECYn_bXWC{-webkit-padding-end:").concat(theme.padding || 'inherit', ";-webkit-padding-start:").concat(theme.padding || 'inherit', ";line-height:").concat(theme.size || 'inherit', ";min-width:").concat(theme.size || 'inherit', ";padding-inline-end:").concat(theme.padding || 'inherit', ";padding-inline-start:").concat(theme.padding || 'inherit', "}\n\n[dir=ltr] .cECYn_bGBk.cECYn_bXWC{padding-left:").concat(theme.padding || 'inherit', ";padding-right:").concat(theme.padding || 'inherit', "}\n\n[dir=rtl] .cECYn_bGBk.cECYn_bXWC{padding-left:").concat(theme.padding || 'inherit', ";padding-right:").concat(theme.padding || 'inherit', "}\n\n.cECYn_bGBk.cECYn_KksD{height:").concat(theme.sizeNotification || 'inherit', ";width:").concat(theme.sizeNotification || 'inherit', "}\n\n.cECYn_zGXc{background-color:").concat(theme.colorDanger || 'inherit', "}\n\n.cECYn_zGXc.cECYn_fdSp:before{border-color:").concat(theme.colorDanger || 'inherit', "}\n\n.cECYn_cOXX{background-color:").concat(theme.colorSuccess || 'inherit', "}\n\n.cECYn_cOXX.cECYn_fdSp:before{border-color:").concat(theme.colorSuccess || 'inherit', "}\n\n.cECYn_bXiG{background-color:").concat(theme.colorPrimary || 'inherit', "}\n\n.cECYn_bXiG.cECYn_fdSp:before{border-color:").concat(theme.colorPrimary || 'inherit', "}\n\n.cECYn_enfx{background-color:").concat(theme.color || 'inherit', ";color:").concat(theme.colorInverse || 'inherit', "}\n\n.cECYn_enfx.cECYn_fdSp:before{border-color:").concat(theme.color || 'inherit', "}\n\n@keyframes cECYn_fdSp{to{opacity:0.9;transform:scale(1)}}\n\n.cECYn_fdSp{position:relative}\n\n.cECYn_fdSp:before{animation-direction:alternate;animation-duration:1s;animation-iteration-count:4;animation-name:cECYn_fdSp;border:").concat(theme.pulseBorderThickness || 'inherit', " solid;border-radius:").concat(theme.borderRadius || 'inherit', ";box-sizing:border-box;content:\"\";height:calc(100% + 0.5rem);inset-inline-end:auto;inset-inline-start:-0.25rem;opacity:0;position:absolute;top:-0.25rem;transform:scale(0.75);width:calc(100% + 0.5rem)}\n\n[dir=ltr] .cECYn_fdSp:before{left:-0.25rem;right:auto}\n\n[dir=rtl] .cECYn_fdSp:before{left:auto;right:-0.25rem}\n\n.cECYn_gasz{box-sizing:border-box;position:relative}\n\n.cECYn_gasz svg{display:block}");
|
|
50
50
|
},
|
|
51
|
-
'root': '
|
|
52
|
-
'standalone': '
|
|
53
|
-
'positioned--top': '
|
|
54
|
-
'count': '
|
|
55
|
-
'notification': '
|
|
56
|
-
'positioned--bottom': '
|
|
57
|
-
'positioned--start': '
|
|
58
|
-
'positioned--end': '
|
|
59
|
-
'positioned--center': '
|
|
60
|
-
'danger': '
|
|
61
|
-
'pulse': '
|
|
62
|
-
'success': '
|
|
63
|
-
'primary': '
|
|
64
|
-
'
|
|
51
|
+
'root': 'cECYn_bGBk',
|
|
52
|
+
'standalone': 'cECYn_bBTa',
|
|
53
|
+
'positioned--top': 'cECYn_dDWY',
|
|
54
|
+
'count': 'cECYn_bXWC',
|
|
55
|
+
'notification': 'cECYn_KksD',
|
|
56
|
+
'positioned--bottom': 'cECYn_bPSM',
|
|
57
|
+
'positioned--start': 'cECYn_fcMK',
|
|
58
|
+
'positioned--end': 'cECYn_bXgF',
|
|
59
|
+
'positioned--center': 'cECYn_eCdq',
|
|
60
|
+
'danger': 'cECYn_zGXc',
|
|
61
|
+
'pulse': 'cECYn_fdSp',
|
|
62
|
+
'success': 'cECYn_cOXX',
|
|
63
|
+
'primary': 'cECYn_bXiG',
|
|
64
|
+
'inverse': 'cECYn_enfx',
|
|
65
|
+
'wrapper': 'cECYn_gasz'
|
|
65
66
|
};
|
|
66
67
|
|
|
67
68
|
/**
|
|
@@ -198,7 +199,7 @@ var Badge = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.themeable)
|
|
|
198
199
|
* Make the Badge slowly pulse twice to get the user's attention.
|
|
199
200
|
*/
|
|
200
201
|
pulse: _propTypes.default.bool,
|
|
201
|
-
variant: _propTypes.default.oneOf(['primary', 'success', 'danger']),
|
|
202
|
+
variant: _propTypes.default.oneOf(['primary', 'success', 'danger', 'inverse']),
|
|
202
203
|
|
|
203
204
|
/**
|
|
204
205
|
* Supported values are `top start`, `top end`, `end center`, `bottom end`,
|
package/lib/Badge/theme.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-badge",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.16.0",
|
|
4
4
|
"description": "A badge component",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"type": "commonjs",
|
|
@@ -24,21 +24,21 @@
|
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@babel/runtime": "^7.9.2",
|
|
27
|
-
"@instructure/console": "^7.
|
|
28
|
-
"@instructure/ui-color-utils": "^7.
|
|
29
|
-
"@instructure/ui-position": "^7.
|
|
30
|
-
"@instructure/ui-react-utils": "^7.
|
|
31
|
-
"@instructure/ui-testable": "^7.
|
|
32
|
-
"@instructure/ui-themeable": "^7.
|
|
33
|
-
"@instructure/ui-view": "^7.
|
|
34
|
-
"@instructure/uid": "^7.
|
|
27
|
+
"@instructure/console": "^7.16.0",
|
|
28
|
+
"@instructure/ui-color-utils": "^7.16.0",
|
|
29
|
+
"@instructure/ui-position": "^7.16.0",
|
|
30
|
+
"@instructure/ui-react-utils": "^7.16.0",
|
|
31
|
+
"@instructure/ui-testable": "^7.16.0",
|
|
32
|
+
"@instructure/ui-themeable": "^7.16.0",
|
|
33
|
+
"@instructure/ui-view": "^7.16.0",
|
|
34
|
+
"@instructure/uid": "^7.16.0",
|
|
35
35
|
"classnames": "^2",
|
|
36
36
|
"prop-types": "^15"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@instructure/ui-babel-preset": "^7.
|
|
40
|
-
"@instructure/ui-test-locator": "^7.
|
|
41
|
-
"@instructure/ui-test-utils": "^7.
|
|
39
|
+
"@instructure/ui-babel-preset": "^7.16.0",
|
|
40
|
+
"@instructure/ui-test-locator": "^7.16.0",
|
|
41
|
+
"@instructure/ui-test-utils": "^7.16.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": "^16.8"
|
package/src/Badge/README.md
CHANGED
|
@@ -3,6 +3,7 @@ describes: Badge
|
|
|
3
3
|
---
|
|
4
4
|
|
|
5
5
|
### Making badges accessible
|
|
6
|
+
|
|
6
7
|
Badge counts are automatically fed to screenreaders through the `aria-describedby`
|
|
7
8
|
attribute. Often a stand alone number doesn't give a screenreader user enough context (_"3" vs. "You have 3 unread emails"_).
|
|
8
9
|
The examples below use the `formatOutput` prop to make the badge more screenreader-friendly.
|
|
@@ -16,7 +17,7 @@ example: true
|
|
|
16
17
|
count={99}
|
|
17
18
|
pulse
|
|
18
19
|
margin="0 medium 0 0"
|
|
19
|
-
formatOutput={
|
|
20
|
+
formatOutput={(formattedCount) => {
|
|
20
21
|
return (
|
|
21
22
|
<AccessibleContent alt={`You have ${formattedCount} new edits to review`}>
|
|
22
23
|
{formattedCount}
|
|
@@ -33,9 +34,7 @@ example: true
|
|
|
33
34
|
</Badge>
|
|
34
35
|
<Badge
|
|
35
36
|
type="notification"
|
|
36
|
-
formatOutput={
|
|
37
|
-
return <ScreenReaderContent>You have new edits to review</ScreenReaderContent>
|
|
38
|
-
}}
|
|
37
|
+
formatOutput={() => <ScreenReaderContent>You have new edits to review</ScreenReaderContent>}
|
|
39
38
|
>
|
|
40
39
|
<IconButton
|
|
41
40
|
renderIcon={IconUserSolid}
|
|
@@ -78,40 +77,49 @@ Setting `type="notification"` will render small circles that should not contain
|
|
|
78
77
|
example: true
|
|
79
78
|
---
|
|
80
79
|
<div>
|
|
81
|
-
<
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
margin=
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
margin=
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
80
|
+
<Flex padding='small' display='inline-flex' alignItems="center">
|
|
81
|
+
<Badge standalone count={6} margin='0 small 0 0' />
|
|
82
|
+
<Badge
|
|
83
|
+
type="notification"
|
|
84
|
+
standalone
|
|
85
|
+
formatOutput={() => <ScreenReaderContent>This is a notification</ScreenReaderContent>}
|
|
86
|
+
/>
|
|
87
|
+
</Flex>
|
|
88
|
+
<Flex padding='small' display='inline-flex' alignItems="center">
|
|
89
|
+
<Badge standalone variant="success" count={12} margin='0 small 0 0' />
|
|
90
|
+
<Badge
|
|
91
|
+
variant="success"
|
|
92
|
+
type="notification"
|
|
93
|
+
standalone
|
|
94
|
+
formatOutput={() => <ScreenReaderContent>This is a success notification</ScreenReaderContent>}
|
|
95
|
+
/>
|
|
96
|
+
</Flex>
|
|
97
|
+
<Flex padding='small' display='inline-flex' alignItems="center">
|
|
98
|
+
<Badge standalone variant="danger" count={18} countUntil={10} margin='0 small 0 0' />
|
|
99
|
+
<Badge
|
|
100
|
+
variant="danger"
|
|
101
|
+
type="notification"
|
|
102
|
+
standalone
|
|
103
|
+
formatOutput={() => <ScreenReaderContent>This is a danger notification</ScreenReaderContent>}
|
|
104
|
+
/>
|
|
105
|
+
</Flex>
|
|
106
|
+
<View display='inline-flex' background='primary-inverse'>
|
|
107
|
+
<Flex padding='small' display='inline-flex' alignItems="center" background='primary-inverse'>
|
|
108
|
+
<Badge standalone variant="inverse" count={8} margin='0 small 0 0' />
|
|
109
|
+
<Badge
|
|
110
|
+
variant="inverse"
|
|
111
|
+
type="notification"
|
|
112
|
+
standalone
|
|
113
|
+
formatOutput={() => <ScreenReaderContent>This is a danger notification</ScreenReaderContent>}
|
|
114
|
+
/>
|
|
115
|
+
</Flex>
|
|
116
|
+
</View>
|
|
109
117
|
</div>
|
|
110
118
|
```
|
|
111
119
|
|
|
112
120
|
### Placement
|
|
113
121
|
|
|
114
|
-
Default is `top end`.
|
|
122
|
+
Default is `top end`. **Note that standalone badges can't be placed.**
|
|
115
123
|
|
|
116
124
|
```js
|
|
117
125
|
---
|
|
@@ -154,18 +162,14 @@ const Example = () => (
|
|
|
154
162
|
type="notification"
|
|
155
163
|
margin="0 large 0 0"
|
|
156
164
|
placement="top start"
|
|
157
|
-
formatOutput={
|
|
158
|
-
return <ScreenReaderContent>Updates are available for your account</ScreenReaderContent>
|
|
159
|
-
}}
|
|
165
|
+
formatOutput={() => <ScreenReaderContent>Updates are available for your account</ScreenReaderContent>}
|
|
160
166
|
>
|
|
161
167
|
<EditButton />
|
|
162
168
|
</Badge>
|
|
163
169
|
<Badge
|
|
164
170
|
type="notification"
|
|
165
171
|
margin="0 large 0 0"
|
|
166
|
-
formatOutput={
|
|
167
|
-
return <ScreenReaderContent>Updates are available for your account</ScreenReaderContent>
|
|
168
|
-
}}
|
|
172
|
+
formatOutput={() => <ScreenReaderContent>Updates are available for your account</ScreenReaderContent>}
|
|
169
173
|
>
|
|
170
174
|
<EditButton />
|
|
171
175
|
</Badge>
|
|
@@ -173,9 +177,7 @@ const Example = () => (
|
|
|
173
177
|
type="notification"
|
|
174
178
|
margin="0 large 0 0"
|
|
175
179
|
placement="bottom start"
|
|
176
|
-
formatOutput={
|
|
177
|
-
return <ScreenReaderContent>Updates are available for your account</ScreenReaderContent>
|
|
178
|
-
}}
|
|
180
|
+
formatOutput={() => <ScreenReaderContent>Updates are available for your account</ScreenReaderContent>}
|
|
179
181
|
>
|
|
180
182
|
<EditButton />
|
|
181
183
|
</Badge>
|
|
@@ -183,9 +185,7 @@ const Example = () => (
|
|
|
183
185
|
type="notification"
|
|
184
186
|
margin="0 large 0 0"
|
|
185
187
|
placement="bottom end"
|
|
186
|
-
formatOutput={
|
|
187
|
-
return <ScreenReaderContent>Updates are available for your account</ScreenReaderContent>
|
|
188
|
-
}}
|
|
188
|
+
formatOutput={() => <ScreenReaderContent>Updates are available for your account</ScreenReaderContent>}
|
|
189
189
|
>
|
|
190
190
|
<EditButton />
|
|
191
191
|
</Badge>
|
|
@@ -193,18 +193,14 @@ const Example = () => (
|
|
|
193
193
|
type="notification"
|
|
194
194
|
margin="0 large 0 0"
|
|
195
195
|
placement="start center"
|
|
196
|
-
formatOutput={
|
|
197
|
-
return <ScreenReaderContent>Updates are available for your account</ScreenReaderContent>
|
|
198
|
-
}}
|
|
196
|
+
formatOutput={() => <ScreenReaderContent>Updates are available for your account</ScreenReaderContent>}
|
|
199
197
|
>
|
|
200
198
|
<EditButton />
|
|
201
199
|
</Badge>
|
|
202
200
|
<Badge
|
|
203
201
|
type="notification"
|
|
204
202
|
placement="end center"
|
|
205
|
-
formatOutput={
|
|
206
|
-
return <ScreenReaderContent>Updates are available for your account</ScreenReaderContent>
|
|
207
|
-
}}
|
|
203
|
+
formatOutput={() => <ScreenReaderContent>Updates are available for your account</ScreenReaderContent>}
|
|
208
204
|
>
|
|
209
205
|
<EditButton />
|
|
210
206
|
</Badge>
|
|
@@ -214,6 +210,7 @@ const Example = () => (
|
|
|
214
210
|
|
|
215
211
|
render(<Example />)
|
|
216
212
|
```
|
|
213
|
+
|
|
217
214
|
### Guidelines
|
|
218
215
|
|
|
219
216
|
```js
|
|
@@ -43,5 +43,12 @@ export default {
|
|
|
43
43
|
(props.type === 'notification' && props.countUntil) ||
|
|
44
44
|
(props.standalone && props.placement !== 'start top')
|
|
45
45
|
)
|
|
46
|
+
},
|
|
47
|
+
getExampleProps: (props) => {
|
|
48
|
+
return props.variant === 'inverse'
|
|
49
|
+
? {
|
|
50
|
+
background: 'primary-inverse'
|
|
51
|
+
}
|
|
52
|
+
: {}
|
|
46
53
|
}
|
|
47
54
|
}
|
package/src/Badge/index.js
CHANGED
|
@@ -67,7 +67,7 @@ class Badge extends Component {
|
|
|
67
67
|
* Make the Badge slowly pulse twice to get the user's attention.
|
|
68
68
|
*/
|
|
69
69
|
pulse: PropTypes.bool,
|
|
70
|
-
variant: PropTypes.oneOf(['primary', 'success', 'danger']),
|
|
70
|
+
variant: PropTypes.oneOf(['primary', 'success', 'danger', 'inverse']),
|
|
71
71
|
/**
|
|
72
72
|
* Supported values are `top start`, `top end`, `end center`, `bottom end`,
|
|
73
73
|
* `bottom start`, and `start center`
|
package/src/Badge/styles.css
CHANGED
package/src/Badge/theme.js
CHANGED
package/types/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
|
|
3
3
|
export type BadgeType = "count" | "notification";
|
|
4
4
|
|
|
5
|
-
export type BadgeVariant = "primary" | "success" | "danger";
|
|
5
|
+
export type BadgeVariant = "primary" | "success" | "danger" | "inverse";
|
|
6
6
|
|
|
7
7
|
export interface BadgeProps {
|
|
8
8
|
count?: number;
|