@fkui/design 6.17.0 → 6.18.1

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fkui/design",
3
- "version": "6.17.0",
3
+ "version": "6.18.1",
4
4
  "description": "fkui design",
5
5
  "keywords": [
6
6
  "fkui",
@@ -31,25 +31,18 @@
31
31
  ],
32
32
  "scripts": {
33
33
  "build": "node build.mjs",
34
- "clean": "rimraf .jest-cache coverage lib temp test-results",
35
- "test": "jest --coverage",
34
+ "clean": "rimraf coverage lib temp test-results",
35
+ "test": "mkdir -p test-results && node --test --experimental-test-coverage --test-reporter=spec --test-reporter=junit --test-reporter-destination=stdout --test-reporter-destination=test-results/jest-junit.xml",
36
36
  "posttest": "sass -p node --no-source-map tests:temp/tests",
37
- "unit": "jest",
38
- "unit:watch": "jest --watch"
39
- },
40
- "jest": {
41
- "preset": "jest-preset-stylelint",
42
- "runner": "jest-light-runner"
37
+ "unit": "node --test",
38
+ "unit:watch": "node --test --watch"
43
39
  },
44
40
  "devDependencies": {
45
- "@fkui/icon-lib-default": "6.17.0",
46
- "@fkui/theme-default": "6.17.0",
41
+ "@fkui/icon-lib-default": "6.18.0",
42
+ "@fkui/theme-default": "6.18.0",
47
43
  "autoprefixer": "10.4.21",
48
44
  "cssnano": "7.1.1",
49
- "flush-promises": "1.0.2",
50
45
  "glob": "11.0.3",
51
- "jest-light-runner": "0.7.9",
52
- "jest-preset-stylelint": "7.3.0",
53
46
  "picocolors": "1.1.1",
54
47
  "postcss": "8.5.6",
55
48
  "postcss-url": "10.1.3",
@@ -57,7 +50,7 @@
57
50
  "svgo": "4.0.0"
58
51
  },
59
52
  "peerDependencies": {
60
- "@fkui/theme-default": "^6.17.0",
53
+ "@fkui/theme-default": "^6.18.0",
61
54
  "sass": "^1.40.0",
62
55
  "stylelint": ">= 14"
63
56
  },
@@ -74,5 +67,5 @@
74
67
  "npm": ">= 7"
75
68
  },
76
69
  "sass": "./src/fkui.scss",
77
- "gitHead": "e662f6c39d38ff2f75092ac9f50c91de99adcd2f"
70
+ "gitHead": "d8465c63f3165e5dee90581430f0fbb76f3d636a"
78
71
  }
@@ -41,6 +41,7 @@
41
41
  @forward "sort-filter-dataset/variables";
42
42
  @forward "static-panel/variables";
43
43
  @forward "table/variables";
44
+ @forward "table-ng/variables";
44
45
  @forward "text-field/variables";
45
46
  @forward "textarea-field/variables";
46
47
  @forward "tooltip/variables";
@@ -89,6 +90,7 @@
89
90
  @use "sort-filter-dataset";
90
91
  @use "static-panel";
91
92
  @use "table";
93
+ @use "table-ng";
92
94
  @use "text-field";
93
95
  @use "textarea-field";
94
96
  @use "tooltip";
@@ -0,0 +1,152 @@
1
+ @use "../../core";
2
+ @use "../../core/size";
3
+
4
+ $vertical-padding: core.densify(size.$padding-025);
5
+ $horizontal-padding: size.$padding-050;
6
+
7
+ .table-ng__cell {
8
+ padding: $vertical-padding $horizontal-padding;
9
+ text-wrap: nowrap;
10
+ border: 2px solid transparent;
11
+
12
+ &:focus,
13
+ &:focus-within {
14
+ box-shadow: none;
15
+ border: 2px solid var(--f-color-focus);
16
+ }
17
+
18
+ input,
19
+ button,
20
+ a,
21
+ [role="combobox"] {
22
+ &:focus {
23
+ box-shadow: none;
24
+ }
25
+ }
26
+
27
+ &--select,
28
+ &--text {
29
+ padding: 0 0.25rem;
30
+
31
+ &:focus-visible {
32
+ .table-ng__editable__icon {
33
+ visibility: visible;
34
+ }
35
+ }
36
+
37
+ &:hover {
38
+ .table-ng__editable {
39
+ @extend %text-hover-state;
40
+ }
41
+ }
42
+ }
43
+
44
+ &--text {
45
+ &:focus-visible {
46
+ outline: none !important;
47
+ box-shadow: none !important;
48
+ }
49
+
50
+ &.table-ng__cell--error:not(:focus-within) {
51
+ .table-ng__editable {
52
+ @extend %text-error-state;
53
+ }
54
+ .table-ng__editable__icon {
55
+ visibility: visible;
56
+ }
57
+ }
58
+
59
+ &.table-ng__cell--error:hover:not(:focus-within) {
60
+ .table-ng__editable {
61
+ @extend %text-error-state;
62
+ }
63
+ }
64
+
65
+ &.table-ng__cell--error:focus {
66
+ .table-ng__editable {
67
+ @extend %text-error-state;
68
+ }
69
+ }
70
+
71
+ .table-ng__editable {
72
+ border-width: 2px;
73
+ border-style: solid;
74
+ border-color: transparent;
75
+
76
+ &:focus-within {
77
+ .table-ng__editable__text {
78
+ display: none;
79
+ }
80
+
81
+ .table-ng__textedit {
82
+ flex: 1 0 auto;
83
+ }
84
+ }
85
+ }
86
+ }
87
+
88
+ &--checkbox,
89
+ &--radio {
90
+ text-align: center;
91
+ padding: core.densify(size.$padding-025);
92
+
93
+ input {
94
+ height: var(--f-icon-size-medium);
95
+ width: var(--f-icon-size-medium);
96
+ }
97
+ }
98
+
99
+ &--button {
100
+ button {
101
+ background: inherit;
102
+ border: 0;
103
+ cursor: pointer;
104
+ margin: 0;
105
+ min-width: var(--f-icon-size-medium);
106
+ padding: 0;
107
+ width: 100%;
108
+ }
109
+ }
110
+ }
111
+
112
+ .table-ng__textedit {
113
+ flex: 0 1 0;
114
+ width: 0;
115
+ border: none;
116
+ padding: 0;
117
+ background: transparent;
118
+
119
+ &:focus {
120
+ box-shadow: none !important;
121
+ outline: none !important;
122
+ }
123
+ }
124
+
125
+ .table-ng__editable {
126
+ padding: $vertical-padding $horizontal-padding;
127
+ display: flex;
128
+ align-items: center;
129
+
130
+ &:hover:not(:focus-within) &__icon {
131
+ visibility: visible;
132
+ }
133
+
134
+ &__text {
135
+ flex: 1 1 auto;
136
+ }
137
+
138
+ &__icon {
139
+ visibility: hidden;
140
+ margin-left: 1rem;
141
+ flex: none;
142
+ }
143
+ }
144
+
145
+ %text-hover-state {
146
+ background: var(--fkds-color-action-background-secondary-hover);
147
+ }
148
+
149
+ %text-error-state {
150
+ color: var(--fkds-color-feedback-text-negative);
151
+ border-bottom-color: var(--fkds-color-feedback-text-negative);
152
+ }
@@ -0,0 +1,39 @@
1
+ @use "../../core";
2
+ @use "../../core/size";
3
+
4
+ $vertical-padding: core.densify(size.$padding-025);
5
+ $horizontal-padding: size.$padding-050;
6
+
7
+ .table-ng__column {
8
+ padding: $vertical-padding $horizontal-padding;
9
+ border-bottom: 2px solid transparent;
10
+ border-right: 1px solid transparent;
11
+
12
+ &:focus,
13
+ &:focus-within {
14
+ box-shadow: none;
15
+ border-bottom: 2px solid var(--f-color-focus);
16
+ border-right: 1px solid var(--f-color-focus);
17
+ }
18
+
19
+ &--checkbox {
20
+ text-align: center;
21
+ padding: core.densify(size.$padding-025);
22
+
23
+ input {
24
+ height: var(--f-icon-size-medium);
25
+ width: var(--f-icon-size-medium);
26
+ }
27
+ }
28
+
29
+ &__sort-icon {
30
+ color: var(--f-icon-color-table-header);
31
+ height: var(--f-icon-size-x-small);
32
+ width: var(--f-icon-size-x-small);
33
+ min-width: var(--f-icon-size-x-small);
34
+
35
+ &--discrete {
36
+ color: var(--f-icon-color-table-header-discrete);
37
+ }
38
+ }
39
+ }
@@ -0,0 +1,4 @@
1
+ @use "table-ng";
2
+ @use "cell";
3
+ @use "column";
4
+ @use "pager";
@@ -0,0 +1,7 @@
1
+ @use "../../core";
2
+ @use "../../core/size";
3
+ @use "variables" as *;
4
+
5
+ .pager {
6
+ border-bottom: $pager-border;
7
+ }
@@ -0,0 +1,68 @@
1
+ @use "../../core";
2
+ @use "../../core/size";
3
+ @use "variables" as *;
4
+
5
+ // General variables
6
+ $table-ng-font-size: var(--f-font-size-standard) !default;
7
+ $table-ng-focus-size: 2px !default;
8
+ $table-ng-margin: 0 0 core.densify(var(--f-margin-component-bottom)) !default;
9
+
10
+ // Header
11
+ $table-ng-header-separator: 1px solid var(--f-border-color-grid) !default;
12
+ $table-ng-header-padding: core.densify(size.$padding-025) size.$padding-050 !default;
13
+ $table-ng-header-font-weight: var(--f-font-weight-medium) !default;
14
+
15
+ .table-ng {
16
+ border-collapse: separate;
17
+ border-spacing: 0;
18
+ font-size: $table-ng-font-size;
19
+ margin: $table-ng-margin;
20
+ width: 100%;
21
+
22
+ caption {
23
+ background: $table-ng-caption-background;
24
+ color: $table-ng-caption-foreground;
25
+ font-size: var(--f-font-size-standard);
26
+ font-weight: var(--f-font-weight-medium);
27
+ line-height: var(--f-line-height-large);
28
+ margin-bottom: core.densify(size.$margin-025);
29
+ width: var(--f-width-full);
30
+ text-align: left;
31
+ }
32
+
33
+ thead {
34
+ th {
35
+ background: $table-ng-header-background;
36
+ border-bottom: $table-ng-header-border;
37
+ border-right: $table-ng-header-separator;
38
+ color: $table-ng-header-foreground;
39
+ font-weight: $table-ng-header-font-weight;
40
+ line-height: var(--f-line-height-large);
41
+ padding: $table-ng-header-padding;
42
+ text-align: left;
43
+ vertical-align: top;
44
+
45
+ &:last-child {
46
+ border-right: none;
47
+ }
48
+ }
49
+ }
50
+
51
+ tbody {
52
+ .table-ng__row {
53
+ background: $table-ng-row-background;
54
+ color: $table-ng-row-foreground;
55
+
56
+ &--empty {
57
+ text-align: center;
58
+ }
59
+ }
60
+ }
61
+
62
+ &--striped tbody {
63
+ .table-ng__row:nth-child(even) {
64
+ background: $table-ng-row-background-alt;
65
+ color: $table-ng-row-foreground;
66
+ }
67
+ }
68
+ }
@@ -0,0 +1,17 @@
1
+ // Caption
2
+ $table-ng-caption-background: transparent !default;
3
+ $table-ng-caption-foreground: var(--f-text-color-default) !default;
4
+
5
+ // Header
6
+ $table-ng-header-background: var(--f-background-grid-header) !default;
7
+ $table-ng-header-foreground: var(--f-text-color-default) !default;
8
+ $table-ng-header-border: 2px solid var(--f-border-color-grid-header) !default;
9
+
10
+ // Rows -- Flytta till table-ng-rows.scss?
11
+ $table-ng-row-background: var(--f-background-grid-default) !default;
12
+ $table-ng-row-background-alt: var(--f-background-grid-striped) !default;
13
+ $table-ng-row-foreground: var(--f-text-color-default) !default;
14
+ $table-ng-row-separator: 1px solid var(--f-border-color-grid) !default;
15
+
16
+ // Pager
17
+ $pager-border: 1px solid var(--f-border-color-grid) !default;
@@ -0,0 +1,172 @@
1
+ import { it } from "node:test";
2
+ import stylelint from "stylelint";
3
+ import plugin from "../index.js";
4
+
5
+ const config = {
6
+ plugins: [plugin],
7
+ rules: {
8
+ "fkui/deprecated-variable": true,
9
+ },
10
+ };
11
+
12
+ async function lint(code) {
13
+ const {
14
+ results: [{ warnings, parseErrors }],
15
+ } = await stylelint.lint({
16
+ code,
17
+ config,
18
+ });
19
+ return { warnings, parseErrors };
20
+ }
21
+
22
+ it("should warn when using deprecated variable", async (t) => {
23
+ const { warnings, parseErrors } = await lint(`
24
+ .foo {
25
+ color: var(--f-shadow-large);
26
+ }
27
+ `);
28
+
29
+ t.assert.deepStrictEqual(parseErrors, []);
30
+ t.assert.partialDeepStrictEqual(warnings, [
31
+ {
32
+ column: 13,
33
+ endColumn: 42,
34
+ endLine: 3,
35
+ line: 3,
36
+ rule: "fkui/deprecated-variable",
37
+ severity: "error",
38
+ text: 'Deprecated variable "--f-shadow-large" (fkui/deprecated-variable)',
39
+ url: undefined,
40
+ },
41
+ ]);
42
+ });
43
+
44
+ it("should handle whitespace", async (t) => {
45
+ const { warnings, parseErrors } = await lint(`
46
+ .foo {
47
+ a: var( --f-shadow-large);
48
+ b: var(--f-shadow-large );
49
+ c: var( --f-shadow-large );
50
+ }
51
+ `);
52
+
53
+ t.assert.deepStrictEqual(parseErrors, []);
54
+ t.assert.partialDeepStrictEqual(warnings, [
55
+ {
56
+ column: 13,
57
+ endColumn: 39,
58
+ endLine: 3,
59
+ line: 3,
60
+ rule: "fkui/deprecated-variable",
61
+ severity: "error",
62
+ text: 'Deprecated variable "--f-shadow-large" (fkui/deprecated-variable)',
63
+ url: undefined,
64
+ },
65
+ {
66
+ column: 13,
67
+ endColumn: 39,
68
+ endLine: 4,
69
+ line: 4,
70
+ rule: "fkui/deprecated-variable",
71
+ severity: "error",
72
+ text: 'Deprecated variable "--f-shadow-large" (fkui/deprecated-variable)',
73
+ url: undefined,
74
+ },
75
+ {
76
+ column: 13,
77
+ endColumn: 40,
78
+ endLine: 5,
79
+ line: 5,
80
+ rule: "fkui/deprecated-variable",
81
+ severity: "error",
82
+ text: 'Deprecated variable "--f-shadow-large" (fkui/deprecated-variable)',
83
+ url: undefined,
84
+ },
85
+ ]);
86
+ });
87
+
88
+ it("should handle fallback value", async (t) => {
89
+ const { warnings, parseErrors } = await lint(`
90
+ .foo {
91
+ color: var(--f-shadow-large, #ff00aa);
92
+ }
93
+ `);
94
+
95
+ t.assert.deepStrictEqual(parseErrors, []);
96
+ t.assert.partialDeepStrictEqual(warnings, [
97
+ {
98
+ column: 13,
99
+ endColumn: 51,
100
+ endLine: 3,
101
+ line: 3,
102
+ rule: "fkui/deprecated-variable",
103
+ severity: "error",
104
+ text: 'Deprecated variable "--f-shadow-large" (fkui/deprecated-variable)',
105
+ url: undefined,
106
+ },
107
+ ]);
108
+ });
109
+
110
+ it("should handle properties with multiple declarations", async (t) => {
111
+ const { warnings, parseErrors } = await lint(`
112
+ .foo {
113
+ background: var(--f-shadow-large), var(--f-color-backdrop);
114
+ }
115
+ `);
116
+
117
+ t.assert.deepStrictEqual(parseErrors, []);
118
+ t.assert.partialDeepStrictEqual(warnings, [
119
+ {
120
+ column: 13,
121
+ endColumn: 72,
122
+ endLine: 3,
123
+ line: 3,
124
+ rule: "fkui/deprecated-variable",
125
+ severity: "error",
126
+ text: 'Deprecated variable "--f-shadow-large" (fkui/deprecated-variable)',
127
+ url: undefined,
128
+ },
129
+ {
130
+ column: 13,
131
+ endColumn: 72,
132
+ endLine: 3,
133
+ line: 3,
134
+ rule: "fkui/deprecated-variable",
135
+ severity: "error",
136
+ text: 'Deprecated variable "--f-color-backdrop" (fkui/deprecated-variable)',
137
+ url: undefined,
138
+ },
139
+ ]);
140
+ });
141
+
142
+ it("should handle malformed var", async (t) => {
143
+ const { warnings, parseErrors } = await lint(`
144
+ .foo {
145
+ a: var();
146
+ b: var(--f-shadow-large,);
147
+ }
148
+ `);
149
+ t.assert.deepStrictEqual(parseErrors, []);
150
+ t.assert.partialDeepStrictEqual(warnings, [
151
+ {
152
+ column: 13,
153
+ endColumn: 39,
154
+ endLine: 4,
155
+ line: 4,
156
+ rule: "fkui/deprecated-variable",
157
+ severity: "error",
158
+ text: 'Deprecated variable "--f-shadow-large" (fkui/deprecated-variable)',
159
+ url: undefined,
160
+ },
161
+ ]);
162
+ });
163
+
164
+ it("should not warn when variable is not deprecated", async (t) => {
165
+ const { warnings, parseErrors } = await lint(`
166
+ .foo {
167
+ color: var(--my-fancy-variable);
168
+ }
169
+ `);
170
+ t.assert.deepStrictEqual(parseErrors, []);
171
+ t.assert.deepStrictEqual(warnings, []);
172
+ });
@@ -1,3 +1,3 @@
1
- const deprecatedVariable = require("./deprecatedVariable");
1
+ const deprecatedVariable = require("./deprecated-variable");
2
2
 
3
3
  module.exports = [deprecatedVariable];