@ni/nimble-components 21.6.6 → 21.6.7
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/all-components-bundle.js +20 -3
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +11 -2
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/spinner/styles.js +9 -2
- package/dist/esm/spinner/styles.js.map +1 -1
- package/dist/esm/spinner/template.js +11 -0
- package/dist/esm/spinner/template.js.map +1 -1
- package/package.json +1 -1
|
@@ -4,17 +4,24 @@ import { Black15, Black91, DigitalGreenLight, PowerGreen, White } from '@ni/nimb
|
|
|
4
4
|
import { spinnerSmallHeight } from '../theme-provider/design-tokens';
|
|
5
5
|
import { Theme } from '../theme-provider/types';
|
|
6
6
|
import { themeBehavior } from '../utilities/style/theme';
|
|
7
|
+
import { ZIndexLevels } from '../utilities/style/types';
|
|
7
8
|
export const styles = css `
|
|
8
|
-
${display('inline-
|
|
9
|
+
${display('inline-grid')}
|
|
9
10
|
|
|
10
11
|
:host {
|
|
11
12
|
height: ${spinnerSmallHeight};
|
|
12
13
|
aspect-ratio: 1 / 1;
|
|
13
14
|
}
|
|
14
15
|
|
|
16
|
+
div.overlay {
|
|
17
|
+
z-index: ${ZIndexLevels.zIndex1};
|
|
18
|
+
margin: max(2px, 6.25%);
|
|
19
|
+
grid-area: 1/1;
|
|
20
|
+
}
|
|
21
|
+
|
|
15
22
|
div.container {
|
|
16
23
|
margin: max(2px, 6.25%);
|
|
17
|
-
|
|
24
|
+
grid-area: 1/1;
|
|
18
25
|
${
|
|
19
26
|
/**
|
|
20
27
|
* At some spinner sizes / browser zoom levels, the spinner bits/squares appear to slightly overlap visually.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/spinner/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,OAAO,EACP,iBAAiB,EACjB,UAAU,EACV,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/spinner/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,OAAO,EACP,iBAAiB,EACjB,UAAU,EACV,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;kBAGV,kBAAkB;;;;;mBAKjB,YAAY,CAAC,OAAO;;;;;;;;UAQ7B;AACE;;;;;;GAMG;AACH,EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwHP,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8DAEmD,OAAO;;;8DAGP,iBAAiB;;SAEtE,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8DAEmD,OAAO;;;8DAGP,UAAU;;SAE/D,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8DAEmD,KAAK;;;8DAGL,UAAU;;SAE/D,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n Black15,\n Black91,\n DigitalGreenLight,\n PowerGreen,\n White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { spinnerSmallHeight } from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { ZIndexLevels } from '../utilities/style/types';\n\nexport const styles = css`\n ${display('inline-grid')}\n\n :host {\n height: ${spinnerSmallHeight};\n aspect-ratio: 1 / 1;\n }\n\n div.overlay {\n z-index: ${ZIndexLevels.zIndex1};\n margin: max(2px, 6.25%);\n grid-area: 1/1;\n }\n\n div.container {\n margin: max(2px, 6.25%);\n grid-area: 1/1;\n ${\n /**\n * At some spinner sizes / browser zoom levels, the spinner bits/squares appear to slightly overlap visually.\n * If we set a color with transparency on each bit, it'll look wrong in the overlapping region (since the opacity\n * combines and affects the color at the overlapping spot).\n * Currently all 3 themes use a color with opacity = 0.6, so that's applied here on the parent element instead,\n * which avoids that issue.\n */\n ''\n }\n opacity: 0.6;\n }\n\n :host([appearance='accent']) div.container {\n opacity: 1;\n }\n\n div.bit1,\n div.bit2 {\n background: var(--ni-private-spinner-bits-background-color);\n width: 50%;\n height: 50%;\n margin: auto;\n animation-duration: 1600ms;\n animation-iteration-count: infinite;\n animation-play-state: var(\n --ni-private-spinner-animation-play-state,\n running\n );\n animation-timing-function: cubic-bezier(0.65, 0, 0.35, 0);\n }\n\n div.bit1 {\n animation-name: ni-private-spinner-keyframes-1;\n }\n\n div.bit2 {\n animation-name: ni-private-spinner-keyframes-2;\n }\n\n @media (prefers-reduced-motion) {\n div.bit1,\n div.bit2 {\n animation-timing-function: ease-in-out, steps(1);\n animation-duration: 3200ms;\n }\n\n div.bit1 {\n animation-name: ni-private-spinner-no-motion-opacity-keyframes,\n ni-private-spinner-no-motion-transform-keyframes-1;\n }\n\n div.bit2 {\n animation-name: ni-private-spinner-no-motion-opacity-keyframes,\n ni-private-spinner-no-motion-transform-keyframes-2;\n }\n }\n\n @keyframes ni-private-spinner-keyframes-1 {\n 0%,\n 100% {\n transform: translate(-50%, 0);\n }\n\n 25% {\n transform: translate(50%, 0);\n }\n\n 50% {\n transform: translate(50%, 100%);\n }\n\n 75% {\n transform: translate(-50%, 100%);\n }\n }\n\n @keyframes ni-private-spinner-keyframes-2 {\n 0%,\n 100% {\n transform: translate(50%, 0);\n }\n\n 25% {\n transform: translate(-50%, 0);\n }\n\n 50% {\n transform: translate(-50%, -100%);\n }\n\n 75% {\n transform: translate(50%, -100%);\n }\n }\n\n @keyframes ni-private-spinner-no-motion-opacity-keyframes {\n 0%,\n 50%,\n 100% {\n opacity: 0;\n }\n\n 25%,\n 75% {\n opacity: 1;\n }\n }\n\n @keyframes ni-private-spinner-no-motion-transform-keyframes-1 {\n 0%,\n 100% {\n transform: translate(-50%, 0);\n }\n 50% {\n transform: translate(50%, 0);\n }\n }\n\n @keyframes ni-private-spinner-no-motion-transform-keyframes-2 {\n 0%,\n 100% {\n transform: translate(50%, 0);\n }\n\n 50% {\n transform: translate(-50%, 0);\n }\n }\n`.withBehaviors(\n themeBehavior(\n Theme.light,\n css`\n :host {\n --ni-private-spinner-bits-background-color: ${Black91};\n }\n :host([appearance='accent']) {\n --ni-private-spinner-bits-background-color: ${DigitalGreenLight};\n }\n `\n ),\n themeBehavior(\n Theme.dark,\n css`\n :host {\n --ni-private-spinner-bits-background-color: ${Black15};\n }\n :host([appearance='accent']) {\n --ni-private-spinner-bits-background-color: ${PowerGreen};\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n :host {\n --ni-private-spinner-bits-background-color: ${White};\n }\n :host([appearance='accent']) {\n --ni-private-spinner-bits-background-color: ${PowerGreen};\n }\n `\n )\n);\n"]}
|
|
@@ -1,6 +1,17 @@
|
|
|
1
1
|
import { html } from '@microsoft/fast-element';
|
|
2
|
+
/* eslint-disable @typescript-eslint/indent */
|
|
3
|
+
// prettier-ignore
|
|
2
4
|
export const template = html `
|
|
3
5
|
<template role="progressbar">
|
|
6
|
+
${''
|
|
7
|
+
/**
|
|
8
|
+
* In Firefox, the 'title' set on the spinner is very finicky when
|
|
9
|
+
* the spinner is animating. Therefore, put a transparent overlay on
|
|
10
|
+
* top of the spinning bits so that the title displays as expected.
|
|
11
|
+
*/
|
|
12
|
+
}
|
|
13
|
+
<div class="overlay"></div>
|
|
14
|
+
|
|
4
15
|
<div class="container">
|
|
5
16
|
<div class="bit1"></div>
|
|
6
17
|
<div class="bit2"></div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/spinner/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAS
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/spinner/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,8CAA8C;AAC9C,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAS;;UAE3B,EAAE;AACA;;;;GAIG;AACP;;;;;;;;CAQP,CAAC","sourcesContent":["import { html } from '@microsoft/fast-element';\nimport type { Spinner } from '.';\n\n/* eslint-disable @typescript-eslint/indent */\n// prettier-ignore\nexport const template = html<Spinner>`\n <template role=\"progressbar\">\n ${''\n /**\n * In Firefox, the 'title' set on the spinner is very finicky when\n * the spinner is animating. Therefore, put a transparent overlay on\n * top of the spinning bits so that the title displays as expected.\n */\n }\n <div class=\"overlay\"></div>\n\n <div class=\"container\">\n <div class=\"bit1\"></div>\n <div class=\"bit2\"></div>\n </div>\n </template>\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "21.6.
|
|
3
|
+
"version": "21.6.7",
|
|
4
4
|
"description": "Styled web components for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
|