@brightspace-ui/core 1.221.0 → 1.222.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.
Files changed (6) hide show
  1. package/components/card/card-footer-link.js +0 -15
  2. package/components/count-badge/count-badge-icon.js +34 -22
  3. package/components/dropdown/dropdown-content-mixin.js +1 -1
  4. package/components/dropdown/dropdown-content-styles.js +3 -3
  5. package/components/meter/README.md +11 -12
  6. package/package.json +1 -1
package/components/card/card-footer-link.js CHANGED
@@ -76,19 +76,11 @@ class CardFooterLink extends RtlMixin(LitElement) {
76
76
  return [offscreenStyles, css`
77
77
  :host {
78
78
  display: inline-block;
79
- left: 0.15rem;
80
- margin-right: 0.3rem;
81
79
  position: relative;
82
80
  }
83
81
  :host[hidden] {
84
82
  display: none;
85
83
  }
86
- :host([dir="rtl"]) {
87
- left: auto;
88
- margin-left: 0.3rem;
89
- margin-right: 0;
90
- right: 0.15rem;
91
- }
92
84
  a {
93
85
  box-sizing: border-box;
94
86
  display: inline-block;
@@ -99,13 +91,6 @@ class CardFooterLink extends RtlMixin(LitElement) {
99
91
  d2l-count-badge-icon {
100
92
  text-align: initial;
101
93
  }
102
- ::slotted(d2l-tooltip) {
103
- left: calc(-50% + 11px) !important;
104
- }
105
- :host([dir="rtl"]) ::slotted(d2l-tooltip) {
106
- left: 0;
107
- right: calc(-50% + 11px) !important;
108
- }
109
94
  `];
110
95
  }
111
96
 
package/components/count-badge/count-badge-icon.js CHANGED
@@ -29,27 +29,24 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
29
29
  outline: none;
30
30
  }
31
31
 
32
- .d2l-count-badge-wrapper {
33
- display: inline-block;
34
- }
35
-
36
32
  :host {
37
- padding-right: var(--d2l-count-badge-icon-padding);
38
- }
39
-
40
- :host([dir="rtl"]) {
41
- padding-left: var(--d2l-count-badge-icon-padding);
42
- padding-right: 0;
33
+ /* for long numbers, center the number on the icon */
34
+ --d2l-count-badge-icon-padding: calc(-50% + (var(--d2l-count-badge-icon-height) / 2) + 2px);
35
+ display: inline-block;
36
+ /* symmetrical padding to prevent overflows for most numbers */
37
+ padding-left: 0.5rem;
38
+ padding-right: 0.5rem;
39
+ position: relative;
43
40
  }
44
41
 
45
42
  :host([size="large"]) {
46
- --d2l-count-badge-icon-padding: calc(var(--d2l-count-badge-icon-height) - 0.7rem);
47
- margin-top: -0.7rem;
43
+ --d2l-count-badge-icon-padding-top: 0.7rem;
44
+ padding-top: var(--d2l-count-badge-icon-padding-top);
48
45
  }
49
46
 
50
47
  :host([size="small"]) {
51
- --d2l-count-badge-icon-padding: calc(var(--d2l-count-badge-icon-height) - 0.55rem);
52
- margin-top: -0.55rem;
48
+ --d2l-count-badge-icon-padding-top: 0.55rem;
49
+ padding-top: var(--d2l-count-badge-icon-padding-top);
53
50
  }
54
51
 
55
52
  :host([icon*="tier1:"]) {
@@ -63,7 +60,7 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
63
60
  }
64
61
 
65
62
  d2l-tooltip[_open-dir="top"] {
66
- margin-top: -0.6rem;
63
+ margin-top: calc(0px - var(--d2l-count-badge-icon-padding-top));
67
64
  }
68
65
 
69
66
  d2l-icon {
@@ -79,15 +76,30 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
79
76
  }
80
77
 
81
78
  render() {
82
- const numberPadding = this.size === 'small' ? '0.55rem' : '0.7rem';
83
- const numberStyles = {
79
+ let numberStyles = {
84
80
  border: '2px solid white',
85
- position: 'relative',
86
- left: this.dir === 'rtl' ? 0 : 'var(--d2l-count-badge-icon-padding)',
87
- right: this.dir === 'rtl' ? 'var(--d2l-count-badge-icon-padding)' : 0,
88
- top: numberPadding,
89
- visibility: this.skeleton ? 'hidden' : undefined
81
+ position: 'absolute',
82
+ visibility: this.skeleton ? 'hidden' : undefined,
90
83
  };
84
+
85
+ // center long number strings to prevent overflow
86
+ const centerNumber = this.getNumberString().length >= 4;
87
+
88
+ if (centerNumber) {
89
+ const xPadding = 'var(--d2l-count-badge-icon-padding)';
90
+ numberStyles = {
91
+ ... numberStyles,
92
+ transform: this.dir === 'rtl'
93
+ ? `translateY(-50%) translateX(calc(0px - ${xPadding}))`
94
+ : `translateY(-50%) translateX(${xPadding})`
95
+ };
96
+ } else {
97
+ numberStyles = {
98
+ ... numberStyles,
99
+ [this.dir === 'rtl' ? 'left' : 'right'] : '-0.1rem',
100
+ transform: 'translateY(-50%)'
101
+ };
102
+ }
91
103
  const tabbable = (this.tabStop || this.hasTooltip) && !this.skeleton;
92
104
  const innerHtml = html`
93
105
  ${this.renderCount(numberStyles)}
package/components/dropdown/dropdown-content-mixin.js CHANGED
@@ -15,7 +15,7 @@ const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
15
15
  const minBackdropHeightMobile = 42;
16
16
  const minBackdropWidthMobile = 30;
17
17
  const outerMarginTopBottom = 18;
18
- const defaultVerticalOffset = 20;
18
+ const defaultVerticalOffset = 16;
19
19
 
20
20
  export const DropdownContentMixin = superclass => class extends LocalizeCoreElement(RtlMixin(superclass)) {
21
21
 
package/components/dropdown/dropdown-content-styles.js CHANGED
@@ -16,7 +16,7 @@ export const dropdownContentStyles = css`
16
16
  left: 0;
17
17
  position: absolute;
18
18
  text-align: left;
19
- top: calc(100% + var(--d2l-dropdown-verticaloffset, 20px));
19
+ top: calc(100% + var(--d2l-dropdown-verticaloffset, 16px));
20
20
  width: 100%;
21
21
  z-index: 1000; /* position on top of floating buttons */
22
22
  }
@@ -38,7 +38,7 @@ export const dropdownContentStyles = css`
38
38
 
39
39
  :host([opened-above]) {
40
40
  animation: var(--d2l-dropdown-above-animation-name) 300ms ease;
41
- bottom: calc(100% + var(--d2l-dropdown-verticaloffset, 20px));
41
+ bottom: calc(100% + var(--d2l-dropdown-verticaloffset, 16px));
42
42
  top: auto;
43
43
  }
44
44
 
@@ -49,7 +49,7 @@ export const dropdownContentStyles = css`
49
49
 
50
50
  :host([data-mobile][opened-above]:not([mobile-tray])) {
51
51
  animation: var(--d2l-dropdown-above-animation-name) 300ms ease;
52
- bottom: calc(100% + var(--d2l-dropdown-verticaloffset, 20px));
52
+ bottom: calc(100% + var(--d2l-dropdown-verticaloffset, 16px));
53
53
  top: auto;
54
54
  }
55
55
 
package/components/meter/README.md CHANGED
@@ -56,12 +56,11 @@ Linear meters show a horizontal progress bar.
56
56
  * `value` (required, Number): Current number of completed units. A positive, non-zero number that is less than or equal to `max`.
57
57
  * `max` (Number, default: `100`): Max number of units that are being measured by this meter. A positive, non-zero number.
58
58
  * `percent` Boolean: Shows a percentage instead of `value/max`.
59
- * `text-inline` Boolean: Keeps the meter to a single line.
60
- * `text` String: Context information about what the meter is about.
61
- * `\{\%\}` in the string will be replaced with percentage value
62
- * `{x/y}` in the string will be replaced with fraction with the proper language support
63
- * **DEPRECATED** `{x}` in the string will be replaced with `value`
64
- * **DEPRECATED** `{y}` in the string will be replaced with `max`
59
+ * `text-inline` Boolean: Keeps the meter to a single line. Adding one of the following between `{}` (e.g., `{x/y}`) causes replacements:
60
+ * `%` in the string will be replaced with percentage value
61
+ * `x/y` in the string will be replaced with fraction with the proper language support
62
+ * **DEPRECATED** `x` in the string will be replaced with `value`
63
+ * **DEPRECATED** `y` in the string will be replaced with `max`
65
64
  <!-- docs: end hidden content -->
66
65
 
67
66
  ## Radial meter [d2l-meter-radial]
@@ -89,9 +88,9 @@ Radial meters appear as a half circle. They have more visual weight than a line
89
88
  * `value` (required, Number): Current number of completed units. A positive, non-zero number that is less than or equal to `max`.
90
89
  * `max` (Number, default: `100`): Max number of units that are being measured by this meter. A positive, non-zero number.
91
90
  * `percent` (Boolean): Shows a percentage instead of `value/max`.
92
- * `text` (String): Context information about what the meter is about.
93
- * `{%}` in the string will be replaced with percentage value
94
- * `{x/y}` in the string will be replaced with fraction with the proper language support
91
+ * `text` (String): Context information about what the meter is about. Adding one of the following between `{}` (e.g., `{x/y}`) causes replacements:
92
+ * `%` in the string will be replaced with percentage value
93
+ * `x/y` in the string will be replaced with fraction with the proper language support
95
94
  <!-- docs: end hidden content -->
96
95
 
97
96
 
@@ -134,7 +133,7 @@ All `meter` components have a `foreground-light` style that ensures accessibl
134
133
  * `value` (required, Number): Current number of completed units. A positive, non-zero number that is less than or equal to `max`.
135
134
  * `max` (Number, default: `100`): Max number of units that are being measured by this meter. A positive, non-zero number.
136
135
  * `percent` (Boolean): Shows a percentage instead of `value/max`.
137
- * `text` (String): Context information about what the meter is about.
138
- * `\{\%\}` in the string will be replaced with percentage value
139
- * `{x/y}` in the string will be replaced with fraction with the proper language support
136
+ * `text` (String): Context information about what the meter is about. Adding one of the following between `{}` (e.g., `{x/y}`) causes replacements:
137
+ * `%` in the string will be replaced with percentage value
138
+ * `x/y` in the string will be replaced with fraction with the proper language support
140
139
  <!-- docs: end hidden content -->
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "1.221.0",
3
+ "version": "1.222.3",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "type": "module",
6
6
  "repository": "https://github.com/BrightspaceUI/core.git",