@gitlab/ui 64.13.2 → 64.13.4
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 +14 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/utility_classes.css +1 -1
- package/dist/utility_classes.css.map +1 -1
- package/dist/utils/constants.js +3 -2
- package/package.json +14 -14
- package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js +2 -2
- package/src/components/base/new_dropdowns/dropdown.scss +3 -3
- package/src/scss/utilities.scss +6 -6
- package/src/scss/utility-mixins/box-shadow.scss +3 -3
- package/src/utils/constants.js +9 -2
package/dist/utils/constants.js
CHANGED
|
@@ -109,10 +109,11 @@ const dropdownPlacements = {
|
|
|
109
109
|
center: 'bottom',
|
|
110
110
|
right: 'bottom-end'
|
|
111
111
|
};
|
|
112
|
+
const dropdownAnyCornerPlacement = [dropdownPlacements.left, 'top-start', dropdownPlacements.right, 'top-end'];
|
|
112
113
|
const dropdownAllowedAutoPlacements = {
|
|
113
|
-
left:
|
|
114
|
+
left: dropdownAnyCornerPlacement,
|
|
114
115
|
center: [dropdownPlacements.center, 'top'],
|
|
115
|
-
right:
|
|
116
|
+
right: dropdownAnyCornerPlacement
|
|
116
117
|
};
|
|
117
118
|
const buttonSizeOptions = {
|
|
118
119
|
small: 'sm',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitlab/ui",
|
|
3
|
-
"version": "64.13.
|
|
3
|
+
"version": "64.13.4",
|
|
4
4
|
"description": "GitLab UI Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -94,18 +94,18 @@
|
|
|
94
94
|
"@rollup/plugin-commonjs": "^11.1.0",
|
|
95
95
|
"@rollup/plugin-node-resolve": "^7.1.3",
|
|
96
96
|
"@rollup/plugin-replace": "^2.3.2",
|
|
97
|
-
"@storybook/addon-a11y": "7.0.
|
|
98
|
-
"@storybook/addon-docs": "7.0.
|
|
99
|
-
"@storybook/addon-essentials": "7.0.
|
|
100
|
-
"@storybook/addon-storyshots": "7.0.
|
|
101
|
-
"@storybook/addon-storyshots-puppeteer": "7.0.
|
|
102
|
-
"@storybook/addon-viewport": "7.0.
|
|
103
|
-
"@storybook/builder-webpack5": "7.0.
|
|
104
|
-
"@storybook/theming": "7.0.
|
|
105
|
-
"@storybook/vue": "7.0.
|
|
106
|
-
"@storybook/vue-webpack5": "7.0.
|
|
107
|
-
"@storybook/vue3": "7.0.
|
|
108
|
-
"@storybook/vue3-webpack5": "7.0.
|
|
97
|
+
"@storybook/addon-a11y": "7.0.23",
|
|
98
|
+
"@storybook/addon-docs": "7.0.23",
|
|
99
|
+
"@storybook/addon-essentials": "7.0.23",
|
|
100
|
+
"@storybook/addon-storyshots": "7.0.23",
|
|
101
|
+
"@storybook/addon-storyshots-puppeteer": "7.0.23",
|
|
102
|
+
"@storybook/addon-viewport": "7.0.23",
|
|
103
|
+
"@storybook/builder-webpack5": "7.0.23",
|
|
104
|
+
"@storybook/theming": "7.0.23",
|
|
105
|
+
"@storybook/vue": "7.0.23",
|
|
106
|
+
"@storybook/vue-webpack5": "7.0.23",
|
|
107
|
+
"@storybook/vue3": "7.0.23",
|
|
108
|
+
"@storybook/vue3-webpack5": "7.0.23",
|
|
109
109
|
"@vue/compat": "^3.2.40",
|
|
110
110
|
"@vue/compiler-sfc": "^3.2.40",
|
|
111
111
|
"@vue/test-utils": "1.3.0",
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
"sass-loader": "^10.2.0",
|
|
154
154
|
"sass-true": "^6.1.0",
|
|
155
155
|
"start-server-and-test": "^1.10.6",
|
|
156
|
-
"storybook": "7.0.
|
|
156
|
+
"storybook": "7.0.23",
|
|
157
157
|
"storybook-dark-mode": "3.0.0",
|
|
158
158
|
"stylelint": "14.9.1",
|
|
159
159
|
"stylelint-config-prettier": "^9.0.5",
|
|
@@ -108,7 +108,7 @@ describe('base dropdown', () => {
|
|
|
108
108
|
middleware: [
|
|
109
109
|
offset({ mainAxis: DEFAULT_OFFSET }),
|
|
110
110
|
autoPlacement({
|
|
111
|
-
allowedPlacements: ['bottom-start', 'top-start'],
|
|
111
|
+
allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
|
|
112
112
|
}),
|
|
113
113
|
],
|
|
114
114
|
}
|
|
@@ -148,7 +148,7 @@ describe('base dropdown', () => {
|
|
|
148
148
|
middleware: [
|
|
149
149
|
offset({ mainAxis: DEFAULT_OFFSET }),
|
|
150
150
|
autoPlacement({
|
|
151
|
-
allowedPlacements: ['bottom-end', 'top-end'],
|
|
151
|
+
allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
|
|
152
152
|
}),
|
|
153
153
|
],
|
|
154
154
|
}
|
|
@@ -137,12 +137,12 @@
|
|
|
137
137
|
&.top-scrim-light {
|
|
138
138
|
height: 2.25rem;
|
|
139
139
|
border-radius: 0.375rem 0.375rem 0 0;
|
|
140
|
-
background: linear-gradient(180deg,
|
|
140
|
+
background: linear-gradient(180deg, $white 0%, $transparent-rgba);
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
&.top-scrim-dark {
|
|
144
144
|
height: 0.25rem;
|
|
145
|
-
background: linear-gradient(180deg,
|
|
145
|
+
background: linear-gradient(180deg, $t-gray-a-16 0%, $transparent-rgba 100%);
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
148
|
}
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
position: relative;
|
|
157
157
|
top: calc(-2.25rem + #{$dropdown-content-padding});
|
|
158
158
|
border-radius: 0 0 0.375rem 0.375rem;
|
|
159
|
-
background: linear-gradient(180deg, rgba
|
|
159
|
+
background: linear-gradient(180deg, $transparent-rgba 0%, $white);
|
|
160
160
|
}
|
|
161
161
|
}
|
|
162
162
|
|
package/src/scss/utilities.scss
CHANGED
|
@@ -2241,27 +2241,27 @@
|
|
|
2241
2241
|
}
|
|
2242
2242
|
|
|
2243
2243
|
.gl-shadow-sm {
|
|
2244
|
-
box-shadow: 0 1px 2px
|
|
2244
|
+
box-shadow: 0 1px 2px $t-gray-a-08
|
|
2245
2245
|
}
|
|
2246
2246
|
|
|
2247
2247
|
.gl-shadow-sm\! {
|
|
2248
|
-
box-shadow: 0 1px 2px
|
|
2248
|
+
box-shadow: 0 1px 2px $t-gray-a-08 !important
|
|
2249
2249
|
}
|
|
2250
2250
|
|
|
2251
2251
|
.gl-shadow-md {
|
|
2252
|
-
box-shadow: 0 2px 8px
|
|
2252
|
+
box-shadow: 0 2px 8px $t-gray-a-16, 0 0 2px $t-gray-a-16
|
|
2253
2253
|
}
|
|
2254
2254
|
|
|
2255
2255
|
.gl-shadow-md\! {
|
|
2256
|
-
box-shadow: 0 2px 8px
|
|
2256
|
+
box-shadow: 0 2px 8px $t-gray-a-16, 0 0 2px $t-gray-a-16 !important
|
|
2257
2257
|
}
|
|
2258
2258
|
|
|
2259
2259
|
.gl-shadow-lg {
|
|
2260
|
-
box-shadow: 0 4px 12px
|
|
2260
|
+
box-shadow: 0 4px 12px $t-gray-a-16, 0 0 4px $t-gray-a-16
|
|
2261
2261
|
}
|
|
2262
2262
|
|
|
2263
2263
|
.gl-shadow-lg\! {
|
|
2264
|
-
box-shadow: 0 4px 12px
|
|
2264
|
+
box-shadow: 0 4px 12px $t-gray-a-16, 0 0 4px $t-gray-a-16 !important
|
|
2265
2265
|
}
|
|
2266
2266
|
.gl-clearfix {
|
|
2267
2267
|
&::after {
|
|
@@ -200,13 +200,13 @@
|
|
|
200
200
|
*/
|
|
201
201
|
|
|
202
202
|
@mixin gl-shadow-sm {
|
|
203
|
-
box-shadow: 0 1px 2px
|
|
203
|
+
box-shadow: 0 1px 2px $t-gray-a-08;
|
|
204
204
|
}
|
|
205
205
|
|
|
206
206
|
@mixin gl-shadow-md {
|
|
207
|
-
box-shadow: 0 2px 8px
|
|
207
|
+
box-shadow: 0 2px 8px $t-gray-a-16, 0 0 2px $t-gray-a-16;
|
|
208
208
|
}
|
|
209
209
|
|
|
210
210
|
@mixin gl-shadow-lg {
|
|
211
|
-
box-shadow: 0 4px 12px
|
|
211
|
+
box-shadow: 0 4px 12px $t-gray-a-16, 0 0 4px $t-gray-a-16;
|
|
212
212
|
}
|
package/src/utils/constants.js
CHANGED
|
@@ -128,10 +128,17 @@ export const dropdownPlacements = {
|
|
|
128
128
|
right: 'bottom-end',
|
|
129
129
|
};
|
|
130
130
|
|
|
131
|
+
const dropdownAnyCornerPlacement = [
|
|
132
|
+
dropdownPlacements.left,
|
|
133
|
+
'top-start',
|
|
134
|
+
dropdownPlacements.right,
|
|
135
|
+
'top-end',
|
|
136
|
+
];
|
|
137
|
+
|
|
131
138
|
export const dropdownAllowedAutoPlacements = {
|
|
132
|
-
left:
|
|
139
|
+
left: dropdownAnyCornerPlacement,
|
|
133
140
|
center: [dropdownPlacements.center, 'top'],
|
|
134
|
-
right:
|
|
141
|
+
right: dropdownAnyCornerPlacement,
|
|
135
142
|
};
|
|
136
143
|
|
|
137
144
|
export const buttonSizeOptions = {
|