@tui/design-system 1.5.0 → 1.6.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 +159 -1
- package/dist/themes/crystalski/index.css +1 -1
- package/dist/themes/firstchoice/index.css +1 -1
- package/dist/themes/tui/index.css +1 -1
- package/package.json +12 -12
- package/scss/lib/cards/selectable/_mixins.scss +0 -4
- package/scss/lib/cards/selectable/_variables.scss +2 -1
- package/scss/lib/forms/datepicker/_mixins.scss +5 -0
- package/scss/lib/forms/input-radio-scroll/_mixins.scss +6 -1
- package/scss/lib/grid/_column.scss +7 -0
- package/scss/lib/grid/_mixins.scss +4 -0
- package/scss/variables/base-theme.json +0 -6
- package/types/components.ts +1 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,170 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## v1.6.0
|
|
4
|
+
|
|
5
|
+
### Updated
|
|
6
|
+
|
|
7
|
+
#### [Alert](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-alert--docs)
|
|
8
|
+
|
|
9
|
+
- Changed `role="alert"` usage from inline on the alert element to a permanent wrapper pattern. Error alerts should be wrapped in `<div role="alert">`
|
|
10
|
+
and other variants in `<div role="status">` to ensure announcements on dynamic injection.
|
|
11
|
+
- Added accessibility guidance on limiting the number of alert/status roles to prevent colliding screen reader announcements.
|
|
12
|
+
- Added guidance on transferring focus to error alerts when used for form-level validation summaries.
|
|
13
|
+
- Added recommendation to use a `<section>` element with `aria-labelledby` for permanent, high-importance alerts to create a navigable landmark for
|
|
14
|
+
screen reader users.
|
|
15
|
+
|
|
16
|
+
#### [Divider](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-divider--docs)
|
|
17
|
+
|
|
18
|
+
- Added accessibility guidance documenting the use of `aria-hidden` on dividers used purely for decoration
|
|
19
|
+
|
|
20
|
+
#### [Date range](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-date-range--docs)
|
|
21
|
+
|
|
22
|
+
- The web component wrapper has been moved so that the `<legend>` is the first child of the fieldset. This fixes an accessibility issue where the
|
|
23
|
+
legend was not the first child due to the web component element. The component will continue to work and style correctly without these changes, but
|
|
24
|
+
to ensure full accessibility compliance please update to the latest markup structure.
|
|
25
|
+
|
|
26
|
+
Was:
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<fieldset class="uilib-form-row" aria-describedby="input-hint input-error" aria-invalid="true">
|
|
30
|
+
<tui-uilib-datepicker class="uilib-datepicker" version="1">
|
|
31
|
+
<legend class="uilib-form-row__label">Select a date</legend>
|
|
32
|
+
<p id="input-hint" class="uilib-form-row__hint">Input hint text</p>
|
|
33
|
+
<div class="uilib-form-row__input">...</div>
|
|
34
|
+
<p id="input-error" class="uilib-form-row__error">
|
|
35
|
+
<span class="uilib-form-row__error-prefix">Error: </span>
|
|
36
|
+
Input error message
|
|
37
|
+
</p>
|
|
38
|
+
</tui-uilib-datepicker>
|
|
39
|
+
</fieldset>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
Updated to:
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<fieldset class="uilib-form-row" aria-describedby="input-hint input-error" aria-invalid="true">
|
|
46
|
+
<legend class="uilib-form-row__label">Select a date</legend>
|
|
47
|
+
<tui-uilib-datepicker class="uilib-datepicker" version="1">
|
|
48
|
+
<p id="input-hint" class="uilib-form-row__hint">Input hint text</p>
|
|
49
|
+
<div class="uilib-form-row__input">...</div>
|
|
50
|
+
<p id="input-error" class="uilib-form-row__error">
|
|
51
|
+
<span class="uilib-form-row__error-prefix">Error: </span>
|
|
52
|
+
Input error message
|
|
53
|
+
</p>
|
|
54
|
+
</tui-uilib-datepicker>
|
|
55
|
+
</fieldset>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
#### [Form row](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-form-row--docs)
|
|
59
|
+
|
|
60
|
+
- Added accessibility guidance on focus management for form submission errors, recommending focus transfer to the error alert or the first errored
|
|
61
|
+
input.
|
|
62
|
+
|
|
63
|
+
#### [Input radio scroll](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-radio-scroll--docs)
|
|
64
|
+
|
|
65
|
+
- The web component wrapper has been moved so that the `<legend>` is the first child of the fieldset. The `uilib-input-radio-scroll` class has also
|
|
66
|
+
moved to the fieldset. The component will continue to work and style correctly without these changes, but to ensure full accessibility compliance
|
|
67
|
+
please update to the latest markup structure.
|
|
68
|
+
|
|
69
|
+
Was:
|
|
70
|
+
|
|
71
|
+
```html
|
|
72
|
+
<fieldset class="uilib-form-row" aria-describedby="group-hint">
|
|
73
|
+
<tui-uilib-input-radio-scroll class="uilib-input-radio-scroll" style="--card-default-width: 15rem">
|
|
74
|
+
<legend class="uilib-form-row__label">Group title</legend>
|
|
75
|
+
<p id="group-hint" class="uilib-form-row__hint">Sub title</p>
|
|
76
|
+
<div class="uilib-form-row__input">...</div>
|
|
77
|
+
</tui-uilib-input-radio-scroll>
|
|
78
|
+
</fieldset>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
Updated to:
|
|
82
|
+
|
|
83
|
+
```html
|
|
84
|
+
<fieldset class="uilib-form-row uilib-input-radio-scroll" aria-describedby="group-hint">
|
|
85
|
+
<legend class="uilib-form-row__label">Group title</legend>
|
|
86
|
+
<p id="group-hint" class="uilib-form-row__hint">Sub title</p>
|
|
87
|
+
<div class="uilib-form-row__input">
|
|
88
|
+
<tui-uilib-input-radio-scroll style="--card-default-width: 15rem"> ... </tui-uilib-input-radio-scroll>
|
|
89
|
+
</div>
|
|
90
|
+
</fieldset>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
#### [Hero](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-hero--docs)
|
|
94
|
+
|
|
95
|
+
- Added `aria-hidden="true"` to the hero image as it is decorative and should not be announced by screen readers
|
|
96
|
+
- Updated default alt text to empty string to reflect the image being purely decorative
|
|
97
|
+
- Added accessibility guidance for visually hidden text in CTA buttons and linking terms and conditions
|
|
98
|
+
|
|
99
|
+
#### [Image](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-image--docs)
|
|
100
|
+
|
|
101
|
+
- Improved accessibility guidance with descriptive alt text examples, use of `aria-hidden` for decorative images, and recommendations for responsive
|
|
102
|
+
image delivery
|
|
103
|
+
|
|
104
|
+
#### [Loader](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-loader--docs)
|
|
105
|
+
|
|
106
|
+
- Removed `role="status"` from the loader element. The loader should instead be placed within a permanent `role="status"` wrapper in the DOM so that
|
|
107
|
+
screen readers announce loading state changes on injection and removal.
|
|
108
|
+
|
|
109
|
+
#### [Modal](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-modal--docs)
|
|
110
|
+
|
|
111
|
+
- Added close on backdrop click. Clicking the overlay area outside the modal dialog now dismisses it.
|
|
112
|
+
|
|
113
|
+
#### [Pagination](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-pagination--docs)
|
|
114
|
+
|
|
115
|
+
- Added focus management guidance for pagination interactions, recommending focus remains on the active control by default but may move to paginated
|
|
116
|
+
content on full page refresh.
|
|
117
|
+
- Added guidance on using live regions to announce content updates when dynamically paginating.
|
|
118
|
+
|
|
119
|
+
#### [Customer review](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-customer-review--docs)
|
|
120
|
+
|
|
121
|
+
- Added accessibility guidance on grouping multiple customer reviews within a `section` element using `aria-labelledby` to link to an overall heading.
|
|
122
|
+
|
|
123
|
+
#### [Numerical rating](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-numerical--docs)
|
|
124
|
+
|
|
125
|
+
- Updated accessible text to read "Customer overall rating" instead of "Customer Reviews" to make it clearer that the score represents an overall
|
|
126
|
+
rating rather than a count of reviews.
|
|
127
|
+
|
|
128
|
+
#### [Percentage rating](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-percentage--docs)
|
|
129
|
+
|
|
130
|
+
- The visually hidden accessible text now always renders regardless of whether the review count is a link or plain text. Previously it was removed
|
|
131
|
+
when the link variant was used, relying solely on the link's `aria-label`.
|
|
132
|
+
- Simplified the reviews link `aria-label` to avoid repeating the rating percentage (already announced via the hidden text):
|
|
133
|
+
|
|
134
|
+
#### [Skeleton](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-skeleton--docs)
|
|
135
|
+
|
|
136
|
+
- Updated accessibility guidance: Use `aria-busy="true"` on the parent container while loading, and remove or set it to false once content has loaded
|
|
137
|
+
to trigger a screen reader announcement.
|
|
138
|
+
|
|
139
|
+
### Fixed
|
|
140
|
+
|
|
141
|
+
#### [Grid](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-grid--docs)
|
|
142
|
+
|
|
143
|
+
- Fix for missing `uilib-grid-col-offset-reset` mixin and classes `.uilib-grid\_\_col--offset-reset`, `.uilib-grid\_\_col--offset-[res]-reset`
|
|
144
|
+
|
|
145
|
+
#### [Input radio scroll](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-radio-scroll--docs)
|
|
146
|
+
|
|
147
|
+
- Fixed an issue where the scroll container remained focusable when all radio inputs are disabled and the content is not scrollable
|
|
148
|
+
|
|
149
|
+
#### [Modal](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-modal--docs)
|
|
150
|
+
|
|
151
|
+
- Fixed `modalClose` event not firing when the modal was dismissed via the Escape key. The event now fires consistently regardless of how the modal is
|
|
152
|
+
closed.
|
|
153
|
+
|
|
154
|
+
### Deprecated
|
|
155
|
+
|
|
156
|
+
#### [Selectable card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-selectable-card--docs)
|
|
157
|
+
|
|
158
|
+
- Deprecated dashed outline variant `uilib-card-selectable--dashed` to simplify and align styling across the estate. With the dashed variant being
|
|
159
|
+
removed the css variable `--uilib-card-selectable-dashed-border-color` has also been deprecated.
|
|
160
|
+
|
|
3
161
|
## v1.5.0
|
|
4
162
|
|
|
5
163
|
### Added
|
|
6
164
|
|
|
7
165
|
#### [Global colours](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-colors--docs)
|
|
8
166
|
|
|
9
|
-
- New colours added neutral statuses
|
|
167
|
+
- New colours added for neutral statuses, `--uilib-color-status-neutral-surface` and `--uilib-color-status-neutral-icon`
|
|
10
168
|
|
|
11
169
|
#### [Alert](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-alert--docs)
|
|
12
170
|
|
|
@@ -241,10 +241,10 @@
|
|
|
241
241
|
--uilib-card-selectable-radius: var(--uilib-border-radius-200);
|
|
242
242
|
--uilib-card-selectable-bg-color: var(--uilib-color-core-neutral);
|
|
243
243
|
--uilib-card-selectable-default-border-color: var(--uilib-color-border-card);
|
|
244
|
-
--uilib-card-selectable-dashed-border-color: var(--uilib-color-border-dashed);
|
|
245
244
|
--uilib-card-selectable-selected-border-color: var(--uilib-color-border-interaction);
|
|
246
245
|
--uilib-card-selectable-selected-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/checkmark-corner-filled.svg");
|
|
247
246
|
--uilib-card-selectable-selected-icon-shape: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/checkmark-corner-solid.svg");
|
|
247
|
+
--uilib-card-selectable-dashed-border-color: var(--uilib-color-border-dashed);
|
|
248
248
|
--uilib-flight-details-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-down.svg");
|
|
249
249
|
--uilib-flyout-dropdown-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/cross.svg");
|
|
250
250
|
--uilib-datepicker-icon-previous: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-left.svg");
|
|
@@ -248,10 +248,10 @@
|
|
|
248
248
|
--uilib-card-selectable-radius: var(--uilib-border-radius-200);
|
|
249
249
|
--uilib-card-selectable-bg-color: var(--uilib-color-core-neutral);
|
|
250
250
|
--uilib-card-selectable-default-border-color: var(--uilib-color-border-card);
|
|
251
|
-
--uilib-card-selectable-dashed-border-color: var(--uilib-color-border-dashed);
|
|
252
251
|
--uilib-card-selectable-selected-border-color: var(--uilib-color-border-interaction);
|
|
253
252
|
--uilib-card-selectable-selected-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/checkmark-corner-filled.svg");
|
|
254
253
|
--uilib-card-selectable-selected-icon-shape: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/checkmark-corner-solid.svg");
|
|
254
|
+
--uilib-card-selectable-dashed-border-color: var(--uilib-color-border-dashed);
|
|
255
255
|
--uilib-flight-details-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-down.svg");
|
|
256
256
|
--uilib-flyout-dropdown-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/cross.svg");
|
|
257
257
|
--uilib-datepicker-icon-previous: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-left.svg");
|
|
@@ -264,10 +264,10 @@
|
|
|
264
264
|
--uilib-card-selectable-radius: var(--uilib-border-radius-200);
|
|
265
265
|
--uilib-card-selectable-bg-color: var(--uilib-color-core-neutral);
|
|
266
266
|
--uilib-card-selectable-default-border-color: var(--uilib-color-border-card);
|
|
267
|
-
--uilib-card-selectable-dashed-border-color: var(--uilib-color-border-dashed);
|
|
268
267
|
--uilib-card-selectable-selected-border-color: var(--uilib-color-border-interaction);
|
|
269
268
|
--uilib-card-selectable-selected-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/checkmark-corner-filled.svg");
|
|
270
269
|
--uilib-card-selectable-selected-icon-shape: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/checkmark-corner-solid.svg");
|
|
270
|
+
--uilib-card-selectable-dashed-border-color: var(--uilib-color-border-dashed);
|
|
271
271
|
--uilib-flight-details-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
|
|
272
272
|
--uilib-flyout-dropdown-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
|
|
273
273
|
--uilib-datepicker-icon-previous: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-left.svg");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tui/design-system",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.0",
|
|
4
4
|
"description": "TUI Design System",
|
|
5
5
|
"author": "TUI Group",
|
|
6
6
|
"//dependencies": {
|
|
@@ -73,15 +73,15 @@
|
|
|
73
73
|
"@eslint/js": "^9.38.0",
|
|
74
74
|
"@figma/code-connect": "^1.4.5",
|
|
75
75
|
"@jest/globals": "^30.2.0",
|
|
76
|
-
"@storybook/addon-a11y": "10.4.5",
|
|
77
|
-
"@storybook/addon-docs": "10.4.5",
|
|
78
|
-
"@storybook/addon-links": "10.4.5",
|
|
79
|
-
"@storybook/addon-themes": "10.4.5",
|
|
80
|
-
"@storybook/html-vite": "10.4.5",
|
|
76
|
+
"@storybook/addon-a11y": "^10.4.5",
|
|
77
|
+
"@storybook/addon-docs": "^10.4.5",
|
|
78
|
+
"@storybook/addon-links": "^10.4.5",
|
|
79
|
+
"@storybook/addon-themes": "^10.4.5",
|
|
80
|
+
"@storybook/html-vite": "^10.4.5",
|
|
81
81
|
"@stylistic/eslint-plugin": "^3.1.0",
|
|
82
|
-
"@tui/cally": "^0.1.
|
|
82
|
+
"@tui/cally": "^0.1.1",
|
|
83
83
|
"@types/js-beautify": "^1.14.3",
|
|
84
|
-
"@types/node": "^
|
|
84
|
+
"@types/node": "^24.0.0",
|
|
85
85
|
"@typescript-eslint/eslint-plugin": "^8.46.2",
|
|
86
86
|
"@typescript-eslint/parser": "^8.46.2",
|
|
87
87
|
"aws-cdk-lib": "^2.259.0",
|
|
@@ -101,13 +101,13 @@
|
|
|
101
101
|
"eslint-plugin-prettier": "^5.5.4",
|
|
102
102
|
"eslint-plugin-react": "^7.37.5",
|
|
103
103
|
"eslint-plugin-react-hooks": "^7.0.1",
|
|
104
|
-
"eslint-plugin-storybook": "10.4.5",
|
|
104
|
+
"eslint-plugin-storybook": "^10.4.5",
|
|
105
105
|
"git-format-staged": "4.0.1",
|
|
106
106
|
"glob": "^13.0.0",
|
|
107
107
|
"globals": "^17.3.0",
|
|
108
108
|
"husky": "^9.1.7",
|
|
109
109
|
"jest": "^30.2.0",
|
|
110
|
-
"js-beautify": "^
|
|
110
|
+
"js-beautify": "^2.0.3",
|
|
111
111
|
"lint-staged": "^17.0.2",
|
|
112
112
|
"log-update": "^8.0.0",
|
|
113
113
|
"node-fetch": "^3.3.2",
|
|
@@ -121,8 +121,8 @@
|
|
|
121
121
|
"sass-true": "^10.0.0",
|
|
122
122
|
"shx": "0.4.0",
|
|
123
123
|
"source-map-support": "^0.5.21",
|
|
124
|
-
"storybook": "10.4.5",
|
|
125
|
-
"storybook-addon-pseudo-states": "10.4.5",
|
|
124
|
+
"storybook": "^10.4.5",
|
|
125
|
+
"storybook-addon-pseudo-states": "^10.4.5",
|
|
126
126
|
"storybook-addon-tag-badges": "^3.1.0",
|
|
127
127
|
"storybook-dark-mode": "^5.0.0",
|
|
128
128
|
"stylelint": "^17.2.0",
|
|
@@ -65,10 +65,6 @@ $uilib-card-selectable-included: false !default;
|
|
|
65
65
|
|
|
66
66
|
box-shadow: none;
|
|
67
67
|
|
|
68
|
-
&--dashed {
|
|
69
|
-
outline: var(--uilib-stroke-size-025) var(--uilib-stroke-style-dashed) var(--uilib-card-selectable-dashed-border-color);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
68
|
&--clickable-card {
|
|
73
69
|
cursor: pointer;
|
|
74
70
|
|
|
@@ -4,8 +4,9 @@ $uilib-card-selectable-variables: (
|
|
|
4
4
|
radius: var(--uilib-border-radius-200),
|
|
5
5
|
bg-color: var(--uilib-color-core-neutral),
|
|
6
6
|
default-border-color: var(--uilib-color-border-card),
|
|
7
|
-
dashed-border-color: var(--uilib-color-border-dashed),
|
|
8
7
|
selected-border-color: var(--uilib-color-border-interaction),
|
|
9
8
|
selected-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/checkmark-corner-filled.svg'),
|
|
10
9
|
selected-icon-shape: url('#{$uilib-assets-base-url}v3/icons/tui/standard/checkmark-corner-solid.svg'),
|
|
10
|
+
// Below are deprecated
|
|
11
|
+
dashed-border-color: var(--uilib-color-border-dashed),
|
|
11
12
|
) !default;
|
|
@@ -35,6 +35,11 @@ $uilib-datepicker-included: false !default;
|
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
+
.uilib-form-row:has(tui-uilib-datepicker[hide-input][defined]) [class^='uilib-form-row__'] {
|
|
39
|
+
/* Hide the form row contents once element is defined */
|
|
40
|
+
display: none;
|
|
41
|
+
}
|
|
42
|
+
|
|
38
43
|
.uilib-datepicker {
|
|
39
44
|
--uilib-datepicker-dual: #{$uilib-datepicker-dual};
|
|
40
45
|
--uilib-datepicker-dual-weeknumbers: #{$uilib-datepicker-dual-weeknumbers};
|
|
@@ -67,6 +67,10 @@ $uilib-input-radio-scroll-included: false !default;
|
|
|
67
67
|
#0000
|
|
68
68
|
);
|
|
69
69
|
|
|
70
|
+
tui-uilib-input-radio-scroll {
|
|
71
|
+
display: contents;
|
|
72
|
+
}
|
|
73
|
+
|
|
70
74
|
.uilib-form-row__label {
|
|
71
75
|
font: var(--uilib-typography-heading-xlarge);
|
|
72
76
|
}
|
|
@@ -175,7 +179,8 @@ $uilib-input-radio-scroll-included: false !default;
|
|
|
175
179
|
@include uilib-visually-hidden;
|
|
176
180
|
}
|
|
177
181
|
|
|
178
|
-
&[is-hydrated]
|
|
182
|
+
&[is-hydrated],
|
|
183
|
+
tui-uilib-input-radio-scroll[is-hydrated] {
|
|
179
184
|
.uilib-input-chip-list,
|
|
180
185
|
.uilib-card-selectable-list {
|
|
181
186
|
scrollbar-width: none;
|
|
@@ -31,12 +31,19 @@
|
|
|
31
31
|
@include uilib-grid-col-offset($i);
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
|
+
|
|
35
|
+
#{$uilib-grid-selector-column}--offset#{$prefix}-reset {
|
|
36
|
+
@include uilib-grid-col-offset-reset;
|
|
37
|
+
}
|
|
38
|
+
|
|
34
39
|
#{$uilib-grid-selector-column}--order#{$prefix}-first {
|
|
35
40
|
@include uilib-grid-col-order-first;
|
|
36
41
|
}
|
|
42
|
+
|
|
37
43
|
#{$uilib-grid-selector-column}--order#{$prefix}-last {
|
|
38
44
|
@include uilib-grid-col-order-last;
|
|
39
45
|
}
|
|
46
|
+
|
|
40
47
|
#{$uilib-grid-selector-column}--order#{$prefix}-reset {
|
|
41
48
|
@include uilib-grid-col-order-reset;
|
|
42
49
|
}
|
|
@@ -106,6 +106,10 @@
|
|
|
106
106
|
grid-column-start: (1 + $offset);
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
+
@mixin uilib-grid-col-offset-reset {
|
|
110
|
+
grid-column-start: auto;
|
|
111
|
+
}
|
|
112
|
+
|
|
109
113
|
@mixin uilib-grid-col-order($i) {
|
|
110
114
|
@if meta.type-of($i) != 'number' {
|
|
111
115
|
@error 'Value for `uilib-grid-col-order` should be a number.';
|
|
@@ -1071,12 +1071,6 @@
|
|
|
1071
1071
|
"title": "Default border colour",
|
|
1072
1072
|
"description": "Default border colour"
|
|
1073
1073
|
},
|
|
1074
|
-
"card-selectable-dashed-border-color": {
|
|
1075
|
-
"primitive": "uilib-color-border-dashed",
|
|
1076
|
-
"displayType": "color",
|
|
1077
|
-
"title": "Dashed border colour",
|
|
1078
|
-
"description": "Dashed border colour"
|
|
1079
|
-
},
|
|
1080
1074
|
"card-selectable-selected-border-color": {
|
|
1081
1075
|
"primitive": "uilib-color-border-interaction",
|
|
1082
1076
|
"displayType": "color",
|
package/types/components.ts
CHANGED
|
@@ -224,15 +224,7 @@ export interface ImageSrcItem {
|
|
|
224
224
|
}
|
|
225
225
|
|
|
226
226
|
export type ImageFocalPoint =
|
|
227
|
-
| 'top-left'
|
|
228
|
-
| 'top-center'
|
|
229
|
-
| 'top-right'
|
|
230
|
-
| 'center-left'
|
|
231
|
-
| 'center'
|
|
232
|
-
| 'center-right'
|
|
233
|
-
| 'bottom-left'
|
|
234
|
-
| 'bottom-center'
|
|
235
|
-
| 'bottom-right';
|
|
227
|
+
'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
|
236
228
|
|
|
237
229
|
export interface ImageProps {
|
|
238
230
|
altText: string;
|