@gitlab/ui 124.2.0 → 124.3.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/dist/components/base/form/form_combobox/form_combobox.js +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/tailwind.css +1 -1
- package/dist/tailwind.css.map +1 -1
- package/dist/tokens/tailwind/tokens.cjs +110 -547
- package/package.json +4 -4
- package/src/components/base/form/form_combobox/form_combobox.scss +120 -0
- package/src/components/base/form/form_combobox/form_combobox.vue +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitlab/ui",
|
|
3
|
-
"version": "124.
|
|
3
|
+
"version": "124.3.0",
|
|
4
4
|
"description": "GitLab UI Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
"@jest/test-sequencer": "30.2.0",
|
|
106
106
|
"@rollup/plugin-commonjs": "^28.0.9",
|
|
107
107
|
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
108
|
-
"@rollup/plugin-replace": "^6.0.
|
|
108
|
+
"@rollup/plugin-replace": "^6.0.3",
|
|
109
109
|
"@storybook/addon-a11y": "^7.6.20",
|
|
110
110
|
"@storybook/addon-docs": "^7.6.20",
|
|
111
111
|
"@storybook/addon-essentials": "^7.6.20",
|
|
@@ -137,7 +137,7 @@
|
|
|
137
137
|
"cypress-real-events": "^1.15.0",
|
|
138
138
|
"dompurify": "^3.1.2",
|
|
139
139
|
"emoji-regex": "^10.6.0",
|
|
140
|
-
"esbuild": "^0.25.
|
|
140
|
+
"esbuild": "^0.25.12",
|
|
141
141
|
"gitlab-api-async-iterator": "^1.3.1",
|
|
142
142
|
"glob": "11.0.3",
|
|
143
143
|
"globby": "^14.1.0",
|
|
@@ -163,7 +163,7 @@
|
|
|
163
163
|
"rollup-plugin-string": "^3.0.0",
|
|
164
164
|
"rollup-plugin-svg": "^2.0.0",
|
|
165
165
|
"rollup-plugin-vue": "^5.1.9",
|
|
166
|
-
"sass": "^1.93.
|
|
166
|
+
"sass": "^1.93.3",
|
|
167
167
|
"sass-loader": "^10.5.2",
|
|
168
168
|
"sass-true": "^9",
|
|
169
169
|
"start-server-and-test": "^2.1.2",
|
|
@@ -1,5 +1,125 @@
|
|
|
1
1
|
.gl-form-combobox {
|
|
2
2
|
.gl-form-combobox-inner {
|
|
3
3
|
max-height: $gl-max-dropdown-max-height;
|
|
4
|
+
position: relative;
|
|
5
|
+
@apply gl-grow;
|
|
6
|
+
@apply gl-overflow-y-auto;
|
|
7
|
+
@apply gl-pl-0;
|
|
8
|
+
@apply gl-mb-0;
|
|
9
|
+
@apply gl-py-2;
|
|
10
|
+
@apply gl-list-none;
|
|
11
|
+
border-radius: var(--gl-dropdown-border-radius);
|
|
12
|
+
|
|
13
|
+
&:focus-visible {
|
|
14
|
+
@apply gl-focus;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
ul {
|
|
18
|
+
@apply gl-list-none;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// Update dropdown items to match new listbox styling exactly
|
|
22
|
+
.gl-dropdown-item {
|
|
23
|
+
@apply gl-cursor-pointer;
|
|
24
|
+
@apply gl-px-2;
|
|
25
|
+
@apply gl-my-1;
|
|
26
|
+
|
|
27
|
+
&:first-child {
|
|
28
|
+
@apply gl-mt-0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&:last-child {
|
|
32
|
+
@apply gl-mb-0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// Target the actual Bootstrap dropdown item element
|
|
36
|
+
.dropdown-item {
|
|
37
|
+
transition: background-color $gl-transition-duration-fast $gl-easing-out-cubic,
|
|
38
|
+
box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
|
|
39
|
+
@apply gl-rounded-default;
|
|
40
|
+
@apply gl-border-0;
|
|
41
|
+
@apply gl-w-full;
|
|
42
|
+
background-color: var(--gl-dropdown-option-background-color-unselected-default);
|
|
43
|
+
@apply gl-items-center;
|
|
44
|
+
@apply gl-flex;
|
|
45
|
+
@apply gl-text-base;
|
|
46
|
+
@apply gl-font-normal;
|
|
47
|
+
@apply gl-leading-normal;
|
|
48
|
+
@apply gl-px-3;
|
|
49
|
+
@apply gl-py-0;
|
|
50
|
+
position: relative;
|
|
51
|
+
@apply gl-no-underline;
|
|
52
|
+
color: var(--gl-dropdown-option-text-color-default);
|
|
53
|
+
@apply gl-text-left;
|
|
54
|
+
@apply gl-whitespace-normal;
|
|
55
|
+
@include gl-prefers-reduced-motion-transition;
|
|
56
|
+
|
|
57
|
+
.gl-dropdown-item-text-wrapper {
|
|
58
|
+
@apply gl-min-w-0;
|
|
59
|
+
@apply gl-grow;
|
|
60
|
+
@apply gl-py-3;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// Hover state
|
|
64
|
+
&:not(.disable-hover):hover {
|
|
65
|
+
color: var(--gl-dropdown-option-text-color-hover);
|
|
66
|
+
background-color: var(--gl-dropdown-option-background-color-unselected-hover);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// Focus state (when item receives actual focus)
|
|
70
|
+
&:focus {
|
|
71
|
+
color: var(--gl-dropdown-option-text-color-focus);
|
|
72
|
+
background-color: var(--gl-dropdown-option-background-color-unselected-focus);
|
|
73
|
+
@include gl-focus($inset: true);
|
|
74
|
+
z-index: 1;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// Active state (when item is clicked)
|
|
78
|
+
&:active,
|
|
79
|
+
&:focus:active {
|
|
80
|
+
color: var(--gl-dropdown-option-text-color-active);
|
|
81
|
+
background-color: var(--gl-dropdown-option-background-color-unselected-active);
|
|
82
|
+
@include gl-focus($inset: true);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// Keyboard navigation highlight (Bootstrap active class when :active prop is true)
|
|
86
|
+
&.active {
|
|
87
|
+
color: var(--gl-dropdown-option-text-color-focus) !important;
|
|
88
|
+
background-color: var(--gl-dropdown-option-background-color-unselected-focus) !important;
|
|
89
|
+
@include gl-focus($inset: true);
|
|
90
|
+
z-index: 1;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// Also handle the is-focused class for compatibility
|
|
94
|
+
&.is-focused {
|
|
95
|
+
color: var(--gl-dropdown-option-text-color-focus) !important;
|
|
96
|
+
background-color: var(--gl-dropdown-option-background-color-unselected-focus) !important;
|
|
97
|
+
@include gl-focus($inset: true);
|
|
98
|
+
z-index: 1;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&:focus-visible {
|
|
102
|
+
outline: none;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
// Selected state (if needed for multi-select scenarios)
|
|
107
|
+
&[aria-selected="true"] .dropdown-item {
|
|
108
|
+
background-color: var(--gl-dropdown-option-background-color-selected-default);
|
|
109
|
+
|
|
110
|
+
&:hover {
|
|
111
|
+
background-color: var(--gl-dropdown-option-background-color-selected-hover);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&:focus {
|
|
115
|
+
background-color: var(--gl-dropdown-option-background-color-selected-focus);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
&:active,
|
|
119
|
+
&:focus:active {
|
|
120
|
+
background-color: var(--gl-dropdown-option-background-color-selected-active);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
4
124
|
}
|
|
5
125
|
}
|
|
@@ -248,7 +248,7 @@ export default {
|
|
|
248
248
|
ref="suggestionsMenu"
|
|
249
249
|
data-testid="combobox-dropdown"
|
|
250
250
|
role="listbox"
|
|
251
|
-
class="
|
|
251
|
+
class="gl-form-combobox-inner -gl-mt-3 gl-mb-0 gl-flex gl-w-full gl-list-none gl-flex-col gl-bg-dropdown gl-pl-0 gl-drop-shadow-md"
|
|
252
252
|
@keydown.down="onArrowDown"
|
|
253
253
|
@keydown.up="onArrowUp"
|
|
254
254
|
@keydown.left="onArrowLeft"
|