@itwin/itwinui-css 3.0.0-dev.0 → 3.0.0-dev.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.
Files changed (5) hide show
  1. package/CHANGELOG.md +200 -1
  2. package/LICENSE.md +1 -1
  3. package/css/all.css +1 -1
  4. package/css/global.css +1 -1
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,204 @@
1
1
  # Changelog
2
2
 
3
+ ## 3.0.0-dev.1
4
+
5
+ ### Major Changes
6
+
7
+ - [#2262](https://github.com/iTwin/iTwinUI/pull/2262): `iui-select-tag` and related classes must now be used together with `iui-tag` (and related) classes. The `iui-select-tag-button-icon` class has been removed.
8
+
9
+ <details>
10
+
11
+ <summary>Diff</summary>
12
+
13
+ ```diff
14
+ - <span class="iui-select-tag">
15
+ + <span class="iui-select-tag iui-tag">
16
+ - <span class="iui-select-tag-label">
17
+ + <span class="iui-select-tag-label iui-tag-label">
18
+ …
19
+ </span>
20
+ <button
21
+ - class="iui-button iui-field iui-select-tag-button"
22
+ + class="iui-button iui-field iui-select-tag-button iui-tag-button"
23
+ aria-label="…"
24
+ >
25
+ - <svg class="iui-button-icon iui-select-tag-button-icon">…</svg>
26
+ + <svg class="iui-button-icon">…</svg>
27
+ </button>
28
+ </span>
29
+ ```
30
+
31
+ </details>
32
+
33
+ - [#2255](https://github.com/iTwin/iTwinUI/pull/2255): Replaces the attribute classes for `iui-checkbox` such as `iui-status`, `iui-disabled`, and `iui-loading` with new `data-iui-` attributes: `data-iui-status`, `data-iui-disabled`, and `data-iui-loading`.
34
+
35
+ ```diff
36
+ - <div class="iui-checkbox iui-positive">
37
+ + <div class="iui-checkbox" data-iui-status="positive">
38
+ ```
39
+
40
+ Possible values include: `"positive"`, `"negative"`, and `"warning"`.
41
+
42
+ ```diff
43
+ - <div class="iui-checkbox iui-disabled">
44
+ + <div class="iui-checkbox" data-iui-disabled="true">
45
+ ```
46
+
47
+ ```diff
48
+ - <div class="iui-checkbox iui-loading">
49
+ + <div class="iui-checkbox" data-iui-loading="true">
50
+ ```
51
+
52
+ - [#2493](https://github.com/iTwin/iTwinUI/pull/2493): `iui-tabs` no longer requires a `iui-not-animated` class. When `iui-animated` is not present, the "not animated" behavior will be automatically used.
53
+ - [#2346](https://github.com/iTwin/iTwinUI/pull/2346): Multi-select now requires different markup:
54
+
55
+ - The tag-container should be be rendered outside the select-button.
56
+ - The select-button requires an additional `data-iui-multi` attribute.
57
+ - For small size only, the tag-container requires an additional `data-iui-size` attribute.
58
+
59
+ <details>
60
+ <summary>Diff</summary>
61
+
62
+ ```diff
63
+ <div class='iui-input-with-icon'>
64
+ <div
65
+ role='combobox'
66
+ tabindex='0'
67
+ class='iui-select-button iui-field'
68
+ data-iui-size='small'
69
+ + data-iui-multi
70
+ >
71
+ - <span class='iui-content'>
72
+ - <div class='iui-select-tag-container'>…</div>
73
+ - </span>
74
+ </div>
75
+ <svg class='iui-end-icon'>…</svg>
76
+ + <span class='iui-content'>
77
+ + <div class='iui-select-tag-container' data-iui-size='small'>…</div>
78
+ + </span>
79
+ </div>
80
+ ```
81
+
82
+ </details>
83
+
84
+ - [#2136](https://github.com/iTwin/iTwinUI/pull/2136): Added a new `iui-fieldset-base` class that removes default `<fieldset>` styles. This class is now required when using `iui-fieldset`.
85
+
86
+ ```diff
87
+ - <fieldset class="iui-fieldset">
88
+ + <fieldset class="iui-fieldset-base iui-fieldset">
89
+ ```
90
+
91
+ - [#2255](https://github.com/iTwin/iTwinUI/pull/2255): The class `iui-radio` now depends on `iui-checkbox` for its styling. Additionally, `iui-radio-wrapper` is now replaced by `iui-checkbox-wrapper` for all `Radio` elements.
92
+
93
+ ```diff
94
+ - <label class="iui-radio-wrapper">
95
+ - <input class="iui-radio">
96
+ + <label class="iui-checkbox-wrapper">
97
+ + <input class="iui-checkbox iui-radio">
98
+ ```
99
+
100
+ - [#2487](https://github.com/iTwin/iTwinUI/pull/2487): In `Table`, `iui-table-empty` now is expected to be under `iui-table-body-extra` instead of `iui-table-body`.
101
+ - [#2469](https://github.com/iTwin/iTwinUI/pull/2469): `iui-tabs-wrapper`, `iui-tabs`, `iui-tab`, `iui-tabs-content`, `iui-tabs-actions-wrapper`, and `iui-tabs-actions` now require setting a new `data-iui-orientation` attribute. This change helps support nested tabs correctly.
102
+
103
+ **Note**: Nested tabs is _not_ recommended for UX related reasons.
104
+
105
+ <details>
106
+ <summary>Diff</summary>
107
+
108
+ ```diff
109
+ - <div class='iui-tabs-wrapper iui-horizontal'>
110
+ + <div class='iui-tabs-wrapper' data-iui-orientation="horizontal">
111
+ <div
112
+ class='iui-tabs'
113
+ + data-iui-orientation="horizontal"
114
+ >
115
+ <button
116
+ class='iui-tab'
117
+ + data-iui-orientation="horizontal"
118
+ >
119
+ …
120
+ </button>
121
+
122
+ <button
123
+ class="iui-button iui-button-base iui-field"
124
+ data-iui-variant="borderless"
125
+ >
126
+ …
127
+ </button>
128
+ </div>
129
+
130
+ <div
131
+ class='iui-tabs-actions-wrapper'
132
+ + data-iui-orientation="horizontal"
133
+ >
134
+ <div
135
+ class='iui-tabs-actions'
136
+ + data-iui-orientation="horizontal"
137
+ >
138
+ …
139
+ </div>
140
+ </div>
141
+
142
+ <div
143
+ class='iui-tabs-content'
144
+ + data-iui-orientation="horizontal"
145
+ >
146
+ …
147
+ </div>
148
+ </div>
149
+ ```
150
+
151
+ </details>
152
+
153
+ ### Minor Changes
154
+
155
+ - [#2040](https://github.com/iTwin/iTwinUI/pull/2040): Added hover state to disabled `.iui-field` and `.iui-list-item` to help with accessibility.
156
+ - [#2551](https://github.com/iTwin/iTwinUI/pull/2551): `iui-tree` now horizontally scrolls instead of truncation of `iui-tree-item`s when in horizontally overflowing `iui-tree`s.
157
+ - [#2524](https://github.com/iTwin/iTwinUI/pull/2524): Added `iui-popover` class to be used on the floating popover content's root.
158
+ - 8f01965a288e20d3840b91f5797675f03d7f6682: Visual changes to tabs for better accessibility and appearance when in theme bridge mode.
159
+
160
+ - Default tabs focus `outline-offset` inset more so to not obstruct the active tab stripe.
161
+ - Dividing line between borderless tabs and content area reduced to `1px` to give the active tab stripe a visual difference.
162
+ - Active borderless tab no longer has `background-color` change.
163
+ - Tab description / sublabel has `color` change with `transition`.
164
+ - Default disabled tab will now have the same background color as the default non-disabled tab.
165
+
166
+ - [#2373](https://github.com/iTwin/iTwinUI/pull/2373): Fixed an issue in `iui-input-flex-container` where the component-level focus styling was colliding with global focus styling, leading to double focus outlines.
167
+ - [#2391](https://github.com/iTwin/iTwinUI/pull/2391): Animation related classes are now deprecated: `.iui-enter`, `.iui-enter-active`, `.iui-exit`, `.iui-exit-active`.
168
+ - [#2493](https://github.com/iTwin/iTwinUI/pull/2493): `iui-tab` now supports `aria-current` (as an alternative to `aria-selected`) for indicating selected state.
169
+ - [#2554](https://github.com/iTwin/iTwinUI/pull/2554): Set `color` property to match the existing `fill` property value of icons when they are used inside a menu item or field components. This ensures consistent icon colors, i.e. when a font icon is used. Additionally, it enables referencing the icon's color value using the `currentColor` keyword.
170
+ - [#2135](https://github.com/iTwin/iTwinUI/pull/2135): Added a new `iui-table-column-manager` class for the column manager's floating content.
171
+ - [#2238](https://github.com/iTwin/iTwinUI/pull/2238): Collapsed `.iui-expandable-searchbox` will now hide its border and background in favor of the ones from the expand button.
172
+ - [#2655](https://github.com/iTwin/iTwinUI/pull/2655): Force text wrapping for long words. Affected component: 'Tile'
173
+
174
+ ### Patch Changes
175
+
176
+ - [#2359](https://github.com/iTwin/iTwinUI/pull/2359): The `Tooltip` now remains visible when hovered up to `4px` outside its border.
177
+ - [#2316](https://github.com/iTwin/iTwinUI/pull/2316): In `.iui-table-paginator`, the `.iui-center` gets a higher z-index over `.iui-left` and `.iui-right`.
178
+ - [#2266](https://github.com/iTwin/iTwinUI/pull/2266): All instances of `user-select: all` have been removed. Affected components: `code`, `information-panel`, `slider`, `stepper`, `tile`.
179
+ - [#2596](https://github.com/iTwin/iTwinUI/pull/2596): Fixed `iui-transfer-list-listbox-wrapper` to now properly handle long strings in the list items.
180
+ - [#2323](https://github.com/iTwin/iTwinUI/pull/2323): Ensured that `.iui-toast-wrapper` does not block clicks when used within other portal containers (e.g. from AppUI).
181
+ - [#2281](https://github.com/iTwin/iTwinUI/pull/2281): `iui-input` with "small" size now has the same height as other field elements with "small" size (e.g. `iui-button`).
182
+ - [#2143](https://github.com/iTwin/iTwinUI/pull/2143): Added `border-radius` to the `.iui-table` class so that the border radius is correctly applied to the table's corners.
183
+ - [#2362](https://github.com/iTwin/iTwinUI/pull/2362): `iui-select-button` now has the same height as other field elements with "small" size such as `iui-input`.
184
+ - [#2152](https://github.com/iTwin/iTwinUI/pull/2152): `iui-breadcrumbs-list` now stretches to the width of `iui-breadcrumbs`.
185
+ - [#2618](https://github.com/iTwin/iTwinUI/pull/2618): `iui-tree-node` hover styles only applied when hover is supported.
186
+ - [#2386](https://github.com/iTwin/iTwinUI/pull/2386): Fixed an issue in `iui-tile-name` where a long string without spaces wasn't wrapping properly.
187
+ - [#2551](https://github.com/iTwin/iTwinUI/pull/2551): Fixed `iui-tree` where the `iui-tree-item`s now stretch to the full width of the horizontally scrolling `iui-tree`.
188
+ - [#2347](https://github.com/iTwin/iTwinUI/pull/2347): `input` and `textarea` inside `.iui-input-flex-container` now properly get `cursor: not-allowed` when disabled.
189
+ - [#2147](https://github.com/iTwin/iTwinUI/pull/2147): Fixed grid blowout in `iui-expandable-content` using `grid-template-columns: minmax(0, 1fr)`.
190
+ - [#2574](https://github.com/iTwin/iTwinUI/pull/2574): `iui-button-group` no longer has overlapping borders between adjacent iTwinUI borderless buttons.
191
+ - [#2641](https://github.com/iTwin/iTwinUI/pull/2641): Changed `.iui-list-item`'s `background-color` on `:hover`.
192
+ - [#2374](https://github.com/iTwin/iTwinUI/pull/2374): Fix fill of svgs in `iui-header-breadcrumb-button`.
193
+ - [#2615](https://github.com/iTwin/iTwinUI/pull/2615): Borders for `iui-table-header` and `iui-table-cell` have been made more subtle.
194
+ - [#2431](https://github.com/iTwin/iTwinUI/pull/2431): Force text wrapping for long words in typography components (`iui-text-…`) and a few other text instances in other components (e.g. `iui-non-ideal-state-title`, `iui-stepper-step`, `iui-workflow-diagram-step`, etc.).
195
+ - [#2139](https://github.com/iTwin/iTwinUI/pull/2139): Added `overlow: auto` to `.iui-tree` to provide more consistent styling across components.
196
+ - [#2127](https://github.com/iTwin/iTwinUI/pull/2127): Fixed an issue in `iui-dialog`, where long titles were not wrapping properly.
197
+ - [#2378](https://github.com/iTwin/iTwinUI/pull/2378): Fix folder variant `iui-tile`'s broken layout when it has a long name.
198
+ - [#2457](https://github.com/iTwin/iTwinUI/pull/2457): Fixed bug in `.iui-button-base` where cursor was `pointer` even when it was disabled.
199
+ - [#2497](https://github.com/iTwin/iTwinUI/pull/2497): Fixed `.iui-tile-thumbnail-badge-container` bug where it is not visible within `.iui-tile-thumbnail`.
200
+ - [#2590](https://github.com/iTwin/iTwinUI/pull/2590): Fix draggable `iui-dialog-title-bar-filled` to also work properly on touch devices.
201
+
3
202
  ## 3.0.0-dev.0
4
203
 
5
204
  ### Major Changes
@@ -269,7 +468,7 @@
269
468
  - [#1884](https://github.com/iTwin/iTwinUI/pull/1884): Fixes bug that caused the `.iui-tabs-wrapper` to change size dependent on which `.iui-tab` was active.
270
469
  - [#1828](https://github.com/iTwin/iTwinUI/pull/1828): The `.iui-svg-icon` inside the `.iui-searchbox` no longer has the same width as `.iui-button`. Its width also no longer changes with the `.iui-searchbox` size. This is because its padding behavior is now similar to `.iui-svg-icon`'s padding behavior, where it uses a constant padding.
271
470
  - [#1894](https://github.com/iTwin/iTwinUI/pull/1894): All instances of `box-sizing: content-box` have been reinforced with `!important` to prevent accidental overrides from application styles.
272
- - [#1906](https://github.com/iTwin/iTwinUI/pull/1906): Dialog title will now wrap to multiple lines instead of getting clippped.
471
+ - [#1906](https://github.com/iTwin/iTwinUI/pull/1906): Dialog title will now wrap to multiple lines instead of getting clipped.
273
472
  - [#1881](https://github.com/iTwin/iTwinUI/pull/1881): `.iui-search-input` and `.iui-search-icon` are now no-op. This is because the main objective of these two classes was collapsing the padding between the icon and `input`/`textarea` in `.iui-input-flex-container`, and that is now handled by `.iui-input-flex-container-icon` instead.
274
473
 
275
474
  ## 2.4.0
package/LICENSE.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # MIT License
2
2
 
3
- Copyright © 2021-2024 Bentley Systems, Incorporated. All rights reserved.
3
+ Copyright © 2021-2025 Bentley Systems, Incorporated. All rights reserved.
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6
6