@brightspace-ui/core 3.130.0 → 3.131.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/components/inputs/input-checkbox.js +10 -2
- package/components/inputs/input-color.js +2 -1
- package/components/inputs/input-label-styles.js +7 -2
- package/components/inputs/input-radio-styles.js +6 -1
- package/components/inputs/input-select-styles.js +9 -3
- package/components/inputs/input-styles.js +9 -1
- package/components/inputs/input-text.js +5 -2
- package/components/typography/styles.js +12 -1
- package/helpers/prism.js +7 -1
- package/helpers/svg-to-css.js +5 -0
- package/package.json +1 -1
|
@@ -9,6 +9,14 @@ import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
9
9
|
import { InputInlineHelpMixin } from './input-inline-help.js';
|
|
10
10
|
import { offscreenStyles } from '../offscreen/offscreen.js';
|
|
11
11
|
import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
|
|
12
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
13
|
+
|
|
14
|
+
export const inputCheck = svgToCSS(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
15
|
+
<path fill="#494C4E" d="M8.4 16.6c.6.6 1.5.6 2.1 0l8-8c.6-.6.6-1.5 0-2.1-.6-.6-1.5-.6-2.1 0l-6.9 7-1.9-1.9c-.6-.6-1.5-.6-2.1 0-.6.6-.6 1.5 0 2.1l2.9 2.9z"/>\
|
|
16
|
+
</svg>`);
|
|
17
|
+
export const inputCheckIndeterminate = svgToCSS(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
18
|
+
<path fill="#494C4E" d="M7.5,11h9c0.8,0,1.5,0.7,1.5,1.5l0,0c0,0.8-0.7,1.5-1.5,1.5h-9C6.7,14,6,13.3,6,12.5l0,0C6,11.7,6.7,11,7.5,11z"/>
|
|
19
|
+
</svg>`);
|
|
12
20
|
|
|
13
21
|
export const cssSizes = {
|
|
14
22
|
inputBoxSize: 1.2,
|
|
@@ -35,10 +43,10 @@ export const checkboxStyles = css`
|
|
|
35
43
|
width: ${cssSizes.inputBoxSize}rem;
|
|
36
44
|
}
|
|
37
45
|
input[type="checkbox"].d2l-input-checkbox:checked {
|
|
38
|
-
background-image:
|
|
46
|
+
background-image: ${inputCheck};
|
|
39
47
|
}
|
|
40
48
|
input[type="checkbox"].d2l-input-checkbox:indeterminate {
|
|
41
|
-
background-image:
|
|
49
|
+
background-image: ${inputCheckIndeterminate};
|
|
42
50
|
}
|
|
43
51
|
input[type="checkbox"].d2l-input-checkbox,
|
|
44
52
|
input[type="checkbox"].d2l-input-checkbox:hover:disabled {
|
|
@@ -15,6 +15,7 @@ import { inputLabelStyles } from './input-label-styles.js';
|
|
|
15
15
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
16
16
|
import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
|
|
17
17
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
18
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
18
19
|
|
|
19
20
|
const DEFAULT_VALUE = '#000000';
|
|
20
21
|
const DEFAULT_VALUE_BG = '#FFFFFF';
|
|
@@ -194,7 +195,7 @@ class InputColor extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(F
|
|
|
194
195
|
height: 1rem;
|
|
195
196
|
}
|
|
196
197
|
.swatch-transparent {
|
|
197
|
-
background-image:
|
|
198
|
+
background-image: ${svgToCSS(SWATCH_TRANSPARENT)};
|
|
198
199
|
background-position-y: -1.5px;
|
|
199
200
|
background-size: cover;
|
|
200
201
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
3
|
+
|
|
4
|
+
const requiredIcon = svgToCSS(`<svg width="5" height="6" viewBox="0 0 5 6" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
+
<path d="M2.38 5.141V3.86c0-.093.006-.184.018-.273.011-.089.031-.173.059-.252a.927.927 0 0 1-.182.175c-.07.051-.145.103-.224.154l-1.106.644-.413-.7 1.113-.644c.084-.051.167-.093.248-.126.082-.033.167-.056.256-.07a.816.816 0 0 1-.256-.07 2.356 2.356 0 0 1-.248-.133L.532 1.914l.406-.7 1.113.658c.08.051.155.104.228.157a.966.966 0 0 1 .185.179 1.002 1.002 0 0 1-.066-.252 2.091 2.091 0 0 1-.018-.273V.388h.826v1.281c0 .098-.006.192-.017.283a1.003 1.003 0 0 1-.067.256c.051-.065.112-.125.182-.179.07-.053.147-.106.231-.157l1.106-.644.413.7-1.113.637a1.954 1.954 0 0 1-.248.13 1.07 1.07 0 0 1-.256.073c.159.028.327.093.504.196l1.113.651-.406.7-1.113-.651a3.307 3.307 0 0 1-.231-.154 1.122 1.122 0 0 1-.189-.175c.06.15.091.322.091.518v1.288H2.38z" fill="#494C4E" fill-rule="evenodd"/>
|
|
6
|
+
</svg>`);
|
|
2
7
|
|
|
3
8
|
export const inputLabelStyles = css`
|
|
4
9
|
.d2l-input-label {
|
|
@@ -14,7 +19,7 @@ export const inputLabelStyles = css`
|
|
|
14
19
|
}
|
|
15
20
|
:host([required]) .d2l-input-label::after,
|
|
16
21
|
.d2l-input-label-required::after {
|
|
17
|
-
background-image:
|
|
22
|
+
background-image: ${requiredIcon};
|
|
18
23
|
bottom: 0.25rem;
|
|
19
24
|
content: "";
|
|
20
25
|
display: inline-block;
|
|
@@ -42,7 +47,7 @@ export const inputLabelStyles = css`
|
|
|
42
47
|
.d2l-input-label-required::after {
|
|
43
48
|
background-color: FieldText;
|
|
44
49
|
background-image: none;
|
|
45
|
-
mask-image:
|
|
50
|
+
mask-image: ${requiredIcon};
|
|
46
51
|
}
|
|
47
52
|
}
|
|
48
53
|
`;
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { css } from 'lit';
|
|
3
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
4
|
+
|
|
5
|
+
const radioCheck = svgToCSS(`<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
|
|
6
|
+
<circle cx="5" cy="5" r="5" fill="#494c4e"></circle>
|
|
7
|
+
</svg>`);
|
|
3
8
|
|
|
4
9
|
export const radioStyles = css`
|
|
5
10
|
.d2l-input-radio,
|
|
@@ -23,7 +28,7 @@ export const radioStyles = css`
|
|
|
23
28
|
.d2l-input-radio[aria-checked="true"],
|
|
24
29
|
.d2l-input-radio:checked,
|
|
25
30
|
.d2l-input-radio-label > input[type="radio"]:checked {
|
|
26
|
-
background-image:
|
|
31
|
+
background-image: ${radioCheck};
|
|
27
32
|
}
|
|
28
33
|
.d2l-input-radio,
|
|
29
34
|
.d2l-input-radio:hover:disabled,
|
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { css, unsafeCSS } from 'lit';
|
|
3
3
|
import { getFocusPseudoClass } from '../../helpers/focus.js';
|
|
4
|
+
import { invalidIcon } from './input-styles.js';
|
|
5
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
4
6
|
|
|
5
7
|
const focusClass = unsafeCSS(getFocusPseudoClass());
|
|
6
8
|
|
|
9
|
+
const chevron = svgToCSS(`<svg width="11" height="7" viewBox="0 0 11 7" xmlns="http://www.w3.org/2000/svg">
|
|
10
|
+
<path d="M1 2l4.5 4M10 2L5.5 6" stroke="#565A5C" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round"/>
|
|
11
|
+
</svg>`);
|
|
12
|
+
|
|
7
13
|
export const selectStyles = css`
|
|
8
14
|
.d2l-input-select {
|
|
9
15
|
-webkit-appearance: none;
|
|
10
16
|
-moz-appearance: none;
|
|
11
17
|
appearance: none;
|
|
12
18
|
background-color: #ffffff;
|
|
13
|
-
background-image:
|
|
19
|
+
background-image: ${chevron};
|
|
14
20
|
background-origin: border-box;
|
|
15
21
|
background-position: center right 17px;
|
|
16
22
|
background-repeat: no-repeat;
|
|
@@ -45,7 +51,7 @@ export const selectStyles = css`
|
|
|
45
51
|
outline-offset: -2px;
|
|
46
52
|
}
|
|
47
53
|
.d2l-input-select[aria-invalid="true"] {
|
|
48
|
-
background-image:
|
|
54
|
+
background-image: ${chevron}, ${invalidIcon};
|
|
49
55
|
background-position: center right 17px, center right calc(1px + 11px + 17px);
|
|
50
56
|
background-repeat: no-repeat, no-repeat;
|
|
51
57
|
background-size: 11px 7px, 0.8rem 0.8rem;
|
|
@@ -88,7 +94,7 @@ export const selectStyles = css`
|
|
|
88
94
|
}
|
|
89
95
|
|
|
90
96
|
.d2l-input-select[aria-invalid="true"] {
|
|
91
|
-
background-image:
|
|
97
|
+
background-image: ${invalidIcon};
|
|
92
98
|
background-position: center right calc(1px + 11px + 17px);
|
|
93
99
|
background-repeat: no-repeat;
|
|
94
100
|
background-size: 0.8rem 0.8rem;
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { css, unsafeCSS } from 'lit';
|
|
3
3
|
import { getFocusPseudoClass } from '../../helpers/focus.js';
|
|
4
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
4
5
|
|
|
5
6
|
const focusClass = unsafeCSS(getFocusPseudoClass());
|
|
6
7
|
|
|
8
|
+
export const invalidIcon = svgToCSS(`<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
|
|
9
|
+
<path fill="#cd2026" d="M17.79 15.11l-7-14a2 2 0 0 0-3.58 0l-7 14a1.975 1.975 0 0 0 .09 1.94A2 2 0 0 0 2 18h14a1.994 1.994 0 0 0 1.7-.95 1.967 1.967 0 0 0 .09-1.94zM9 16a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 9 16zm.98-4.806a1 1 0 0 1-1.96 0l-.99-5A1 1 0 0 1 8.01 5h1.983a1 1 0 0 1 .98 1.194z"/>
|
|
10
|
+
<path fill="#FFF" d="M9 16a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 9 16zm.98-4.806a1 1 0 0 1-1.96 0l-.99-5A1 1 0 0 1 8.01 5h1.983a1 1 0 0 1 .98 1.194z"/>
|
|
11
|
+
</svg>`);
|
|
12
|
+
|
|
7
13
|
export const inputStyles = css`
|
|
8
14
|
.d2l-input {
|
|
9
15
|
background-color: var(--d2l-input-background-color, #ffffff);
|
|
@@ -85,12 +91,13 @@ export const inputStyles = css`
|
|
|
85
91
|
padding-block: calc(0.5rem - 1px);
|
|
86
92
|
}
|
|
87
93
|
textarea.d2l-input[aria-invalid="true"] {
|
|
88
|
-
background-image:
|
|
94
|
+
background-image: ${invalidIcon};
|
|
89
95
|
background-position: top 12px right 18px;
|
|
90
96
|
background-repeat: no-repeat;
|
|
91
97
|
background-size: 0.8rem 0.8rem;
|
|
92
98
|
padding-inline-end: calc(18px + 0.8rem);
|
|
93
99
|
}
|
|
100
|
+
textarea.d2l-input-focus[aria-invalid="true"],
|
|
94
101
|
textarea.d2l-input[aria-invalid="true"]:hover,
|
|
95
102
|
textarea.d2l-input[aria-invalid="true"]:${focusClass} {
|
|
96
103
|
background-position: top calc(12px - 1px) right calc(18px - 1px);
|
|
@@ -99,6 +106,7 @@ export const inputStyles = css`
|
|
|
99
106
|
:host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"] {
|
|
100
107
|
background-position: top 12px left 18px;
|
|
101
108
|
}
|
|
109
|
+
:host([dir="rtl"]) textarea.d2l-input-focus[aria-invalid="true"],
|
|
102
110
|
:host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"]:${focusClass},
|
|
103
111
|
:host([dir="rtl"]) textarea.d2l-input[aria-invalid="true"]:hover {
|
|
104
112
|
background-position: top calc(12px - 1px) left calc(18px - 1px);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import '../tooltip/tooltip.js';
|
|
3
3
|
import { css, html, LitElement, nothing } from 'lit';
|
|
4
|
+
import { inputStyles, invalidIcon } from './input-styles.js';
|
|
4
5
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
6
|
import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
|
|
6
7
|
import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
|
|
@@ -9,7 +10,6 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
|
|
|
9
10
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
10
11
|
import { InputInlineHelpMixin } from './input-inline-help.js';
|
|
11
12
|
import { inputLabelStyles } from './input-label-styles.js';
|
|
12
|
-
import { inputStyles } from './input-styles.js';
|
|
13
13
|
import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
|
|
14
14
|
import { offscreenStyles } from '../offscreen/offscreen.js';
|
|
15
15
|
import { PerfMonitor } from '../../helpers/perfMonitor.js';
|
|
@@ -258,7 +258,10 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
|
|
|
258
258
|
opacity: 0.5;
|
|
259
259
|
}
|
|
260
260
|
.d2l-input-text-invalid-icon {
|
|
261
|
-
background-image:
|
|
261
|
+
background-image: ${invalidIcon};
|
|
262
|
+
background-position: center center;
|
|
263
|
+
background-repeat: no-repeat;
|
|
264
|
+
background-size: 0.8rem 0.8rem;
|
|
262
265
|
display: flex;
|
|
263
266
|
height: 22px;
|
|
264
267
|
position: absolute;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { css, unsafeCSS } from 'lit';
|
|
3
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
3
4
|
|
|
4
5
|
export const _isValidCssSelector = (selector) => {
|
|
5
6
|
const partIsValid = (part) => {
|
|
@@ -361,6 +362,16 @@ export const _generateLabelStyles = (selector, includeSkeleton = true) => {
|
|
|
361
362
|
};
|
|
362
363
|
export const labelStyles = _generateLabelStyles('.d2l-label-text', true);
|
|
363
364
|
|
|
365
|
+
const quoteIcon = svgToCSS(`<svg width="11" height="11" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
366
|
+
<defs>
|
|
367
|
+
<path id="a" d="M0 0h24v24H0z"/>
|
|
368
|
+
</defs>
|
|
369
|
+
<g transform="translate(-1 -1)" fill="none" fill-rule="evenodd">
|
|
370
|
+
<mask id="b" fill="#fff"><use xlink:href="#a"/></mask>
|
|
371
|
+
<path d="M6 22.667A4.667 4.667 0 0 0 10.667 18c0-1.227-.559-2.5-1.334-3.333C8.481 13.75 7.35 13.333 6 13.333c-.411 0 1.333-6.666 3-9 1.667-2.333 1.333-3 .333-3C8 1.333 5.253 4.586 4 7.255 1.773 12 1.333 15.392 1.333 18A4.667 4.667 0 0 0 6 22.667zm12 0A4.667 4.667 0 0 0 22.667 18c0-1.227-.559-2.5-1.334-3.333-.852-.917-1.983-1.334-3.333-1.334-.411 0 1.333-6.666 3-9 1.667-2.333 1.333-3 .333-3-1.333 0-4.08 3.253-5.333 5.922C13.773 12 13.333 15.392 13.333 18A4.667 4.667 0 0 0 18 22.667z" fill="#D3D9E3" mask="url(#b)"/>
|
|
372
|
+
</g>
|
|
373
|
+
</svg>`);
|
|
374
|
+
|
|
364
375
|
/**
|
|
365
376
|
* A private helper method that should not be used by general consumers
|
|
366
377
|
*/
|
|
@@ -380,7 +391,7 @@ export const _generateBlockquoteStyles = (selector) => {
|
|
|
380
391
|
position: relative;
|
|
381
392
|
}
|
|
382
393
|
${selector}::before {
|
|
383
|
-
content:
|
|
394
|
+
content: ${quoteIcon};
|
|
384
395
|
inset-block-start: 0;
|
|
385
396
|
inset-inline-start: 0;
|
|
386
397
|
position: absolute;
|
package/helpers/prism.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { css, unsafeCSS } from 'lit';
|
|
2
|
+
import { svgToCSS } from './svg-to-css.js';
|
|
2
3
|
|
|
3
4
|
const prismLocation = 'https://s.brightspace.com/lib/prismjs/1.28.0';
|
|
4
5
|
//const prismLocation = '/node_modules/prismjs'; // for local debugging
|
|
@@ -145,6 +146,11 @@ const generateColorVariables = (mode, theme) => {
|
|
|
145
146
|
`;
|
|
146
147
|
};
|
|
147
148
|
|
|
149
|
+
const transparentIcon = svgToCSS(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
|
|
150
|
+
<path fill="gray" d="M0 0h2v2H0z"/>
|
|
151
|
+
<path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
|
|
152
|
+
</svg>`);
|
|
153
|
+
|
|
148
154
|
export const codeStyles = css`
|
|
149
155
|
|
|
150
156
|
${unsafeCSS(generateColorVariables(colorModes.LIGHT))}
|
|
@@ -301,7 +307,7 @@ export const codeStyles = css`
|
|
|
301
307
|
* <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
|
|
302
308
|
* </svg>
|
|
303
309
|
*/
|
|
304
|
-
background:
|
|
310
|
+
background: ${transparentIcon};
|
|
305
311
|
/* Prevent visual glitches where one pixel from the repeating pattern could be seen */
|
|
306
312
|
background-position: center;
|
|
307
313
|
background-size: 110%;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.131.0",
|
|
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",
|