@gitlab/ui 68.3.0 → 68.5.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 +14 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/tokens/css/tokens.css +1 -1
- package/dist/tokens/css/tokens.dark.css +1 -1
- package/dist/tokens/js/tokens.dark.js +1 -1
- package/dist/tokens/js/tokens.js +1 -1
- package/dist/tokens/scss/_tokens.dark.scss +1 -1
- package/dist/tokens/scss/_tokens.scss +1 -1
- package/package.json +6 -6
- package/src/components/base/alert/alert.scss +16 -6
- package/src/components/base/alert/alert.stories.js +12 -0
- package/src/components/base/banner/banner.scss +1 -1
- package/src/components/base/broadcast_message/broadcast_message.scss +12 -2
- package/src/components/base/broadcast_message/broadcast_message.stories.js +9 -0
- package/src/scss/mixins.scss +0 -1
package/dist/tokens/js/tokens.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitlab/ui",
|
|
3
|
-
"version": "68.
|
|
3
|
+
"version": "68.5.0",
|
|
4
4
|
"description": "GitLab UI Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -89,14 +89,14 @@
|
|
|
89
89
|
},
|
|
90
90
|
"devDependencies": {
|
|
91
91
|
"@arkweid/lefthook": "0.7.7",
|
|
92
|
-
"@babel/core": "^7.23.
|
|
93
|
-
"@babel/preset-env": "^7.23.
|
|
94
|
-
"@babel/preset-react": "^7.
|
|
92
|
+
"@babel/core": "^7.23.3",
|
|
93
|
+
"@babel/preset-env": "^7.23.3",
|
|
94
|
+
"@babel/preset-react": "^7.23.3",
|
|
95
95
|
"@cypress/grep": "^4.0.1",
|
|
96
96
|
"@gitlab/eslint-plugin": "19.2.0",
|
|
97
97
|
"@gitlab/fonts": "^1.3.0",
|
|
98
98
|
"@gitlab/stylelint-config": "5.0.1",
|
|
99
|
-
"@gitlab/svgs": "3.
|
|
99
|
+
"@gitlab/svgs": "3.71.0",
|
|
100
100
|
"@rollup/plugin-commonjs": "^11.1.0",
|
|
101
101
|
"@rollup/plugin-node-resolve": "^7.1.3",
|
|
102
102
|
"@rollup/plugin-replace": "^2.3.2",
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
"babel-loader": "^8.0.5",
|
|
125
125
|
"babel-plugin-require-context-hook": "^1.0.0",
|
|
126
126
|
"bootstrap": "4.6.2",
|
|
127
|
-
"cypress": "13.
|
|
127
|
+
"cypress": "13.5.0",
|
|
128
128
|
"cypress-axe": "^1.4.0",
|
|
129
129
|
"cypress-real-events": "^1.11.0",
|
|
130
130
|
"dompurify": "^3.0.0",
|
|
@@ -1,15 +1,25 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* --gl-alert-padding-x
|
|
3
|
+
*
|
|
4
|
+
* Way to hook into spacing of gl-alert.
|
|
5
|
+
* This is used e.g. for page wide containers
|
|
6
|
+
* in GitLab.
|
|
7
|
+
*/
|
|
8
|
+
// stylelint-disable length-zero-no-unit
|
|
9
|
+
$gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
|
|
10
|
+
|
|
1
11
|
.gl-alert {
|
|
2
12
|
@include gl-font-base;
|
|
3
13
|
@include gl-relative;
|
|
4
|
-
|
|
14
|
+
padding-inline: calc(#{$gl-spacing-scale-9} + #{$gl-alert-padding-x});
|
|
5
15
|
@include gl-py-5;
|
|
6
16
|
|
|
7
17
|
&-not-dismissible {
|
|
8
|
-
|
|
18
|
+
padding-right: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
|
|
9
19
|
}
|
|
10
20
|
|
|
11
21
|
&-no-icon {
|
|
12
|
-
|
|
22
|
+
padding-left: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
|
|
13
23
|
}
|
|
14
24
|
|
|
15
25
|
.gl-link:not(.gl-label-link) {
|
|
@@ -35,14 +45,14 @@
|
|
|
35
45
|
.gl-alert-icon-container {
|
|
36
46
|
@include gl-absolute;
|
|
37
47
|
@include gl-top-5;
|
|
38
|
-
|
|
48
|
+
left: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
|
|
39
49
|
@include gl-display-flex;
|
|
40
50
|
@include gl-align-items-center;
|
|
41
51
|
height: $gl-line-height-20;
|
|
42
52
|
|
|
43
53
|
.gl-alert-has-title & {
|
|
44
54
|
@include gl-heading-scale-500; // get dynamic font-size
|
|
45
|
-
height: $gl-line-height-heading * 1em; // give unit to unitless relative line-height (1.25)
|
|
55
|
+
height: $gl-line-height-heading * 1em; // give unit to unitless relative line-height (1.25)
|
|
46
56
|
}
|
|
47
57
|
}
|
|
48
58
|
|
|
@@ -69,7 +79,7 @@
|
|
|
69
79
|
.gl-dismiss-btn {
|
|
70
80
|
@include gl-absolute;
|
|
71
81
|
@include gl-top-4;
|
|
72
|
-
|
|
82
|
+
right: calc(#{$gl-spacing-scale-4} + #{$gl-alert-padding-x});
|
|
73
83
|
}
|
|
74
84
|
|
|
75
85
|
.gl-alert-danger {
|
|
@@ -143,6 +143,18 @@ export const Sticky = () => ({
|
|
|
143
143
|
</div>`,
|
|
144
144
|
});
|
|
145
145
|
|
|
146
|
+
export const IncreasedSpacing = (args, { argTypes }) => ({
|
|
147
|
+
components: { GlAlert },
|
|
148
|
+
props: Object.keys(argTypes),
|
|
149
|
+
template: `
|
|
150
|
+
<div style="--gl-alert-padding-x: 0.5rem;">
|
|
151
|
+
<gl-alert>
|
|
152
|
+
Lorem ipsum dolor sit <a class="gl-link" href="#">text link</a> amet
|
|
153
|
+
</gl-alert>
|
|
154
|
+
</div>`,
|
|
155
|
+
});
|
|
156
|
+
IncreasedSpacing.args = generateProps();
|
|
157
|
+
|
|
146
158
|
export default {
|
|
147
159
|
title: 'base/alert',
|
|
148
160
|
component: GlAlert,
|
|
@@ -1,11 +1,21 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* --gl-broadcast-message-padding-x
|
|
3
|
+
*
|
|
4
|
+
* Way to hook into spacing of gl-alert.
|
|
5
|
+
* This is used e.g. for page wide containers
|
|
6
|
+
* in GitLab.
|
|
7
|
+
*/
|
|
8
|
+
// stylelint-disable length-zero-no-unit
|
|
9
|
+
$gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
|
|
10
|
+
|
|
1
11
|
.gl-broadcast-message {
|
|
2
12
|
@include gl-display-flex;
|
|
3
13
|
@include gl-justify-content-space-between;
|
|
4
14
|
@include gl-align-items-flex-start;
|
|
5
15
|
@include gl-font-base;
|
|
6
16
|
@include gl-line-height-20;
|
|
7
|
-
|
|
8
|
-
|
|
17
|
+
padding-left: calc(#{$gl-spacing-scale-5} + #{$gl-broadcast-message-padding-x});
|
|
18
|
+
padding-right: calc(#{$gl-spacing-scale-4} + #{$gl-broadcast-message-padding-x});
|
|
9
19
|
@include gl-py-5;
|
|
10
20
|
|
|
11
21
|
&.indigo {
|
|
@@ -77,6 +77,15 @@ Stacked.parameters = {
|
|
|
77
77
|
storyshots: { disable: true },
|
|
78
78
|
};
|
|
79
79
|
|
|
80
|
+
export const IncreasedSpacing = (args, { argTypes }) => ({
|
|
81
|
+
components: {
|
|
82
|
+
GlBroadcastMessage,
|
|
83
|
+
},
|
|
84
|
+
props: Object.keys(argTypes),
|
|
85
|
+
template: `<div style="--gl-broadcast-message-padding-x: 0.5rem;">${template}</div>`,
|
|
86
|
+
});
|
|
87
|
+
IncreasedSpacing.args = generateProps();
|
|
88
|
+
|
|
80
89
|
export default {
|
|
81
90
|
title: 'base/broadcast message',
|
|
82
91
|
component: GlBroadcastMessage,
|