@gitlab/ui 32.25.0 → 32.26.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 +7 -0
- package/dist/components/base/breadcrumb/breadcrumb.js +10 -2
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +2 -2
- package/src/components/base/breadcrumb/breadcrumb.scss +18 -2
- package/src/components/base/breadcrumb/breadcrumb.stories.js +1 -4
- package/src/components/base/breadcrumb/breadcrumb.vue +22 -11
- package/src/components/base/dropdown/dropdown.scss +2 -0
- package/src/components/base/form/form_select/form_select.scss +1 -0
- package/src/components/base/label/label.scss +4 -0
- package/src/components/base/search_box_by_click/search_box_by_click.scss +1 -0
- package/src/components/base/segmented_control/segmented_control.scss +1 -0
- package/src/components/base/table/table.scss +1 -0
- package/src/components/base/toast/toast.scss +1 -0
- package/src/components/base/tooltip/tooltip.scss +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitlab/ui",
|
|
3
|
-
"version": "32.
|
|
3
|
+
"version": "32.26.0",
|
|
4
4
|
"description": "GitLab UI Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
"sass-true": "^5.0.0",
|
|
143
143
|
"start-server-and-test": "^1.10.6",
|
|
144
144
|
"storybook-readme": "5.0.9",
|
|
145
|
-
"stylelint-config-prettier": "
|
|
145
|
+
"stylelint-config-prettier": "9.0.3",
|
|
146
146
|
"stylelint-prettier": "1.2.0",
|
|
147
147
|
"vue": "^2.6.11",
|
|
148
148
|
"vue-jest": "4.0.0-rc.0",
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
$breadcrumb-max-width: $grid-size * 16;
|
|
3
3
|
|
|
4
4
|
.gl-breadcrumbs {
|
|
5
|
+
@include gl-display-flex;
|
|
5
6
|
@include gl-border-0;
|
|
6
7
|
@include gl-inset-border-b-1-gray-200;
|
|
7
8
|
@include gl-py-5;
|
|
@@ -20,10 +21,12 @@ $breadcrumb-max-width: $grid-size * 16;
|
|
|
20
21
|
|
|
21
22
|
.gl-breadcrumb-separator {
|
|
22
23
|
@include gl-display-inline-flex;
|
|
24
|
+
@include gl-absolute;
|
|
25
|
+
right: 0;
|
|
23
26
|
|
|
24
27
|
> svg {
|
|
25
28
|
@include gl-my-auto;
|
|
26
|
-
@include gl-mx-
|
|
29
|
+
@include gl-mx-2;
|
|
27
30
|
@include gl-w-3;
|
|
28
31
|
@include gl-text-gray-500;
|
|
29
32
|
@include gl-fill-current-color;
|
|
@@ -31,7 +34,7 @@ $breadcrumb-max-width: $grid-size * 16;
|
|
|
31
34
|
}
|
|
32
35
|
|
|
33
36
|
.gl-breadcrumb-avatar-tile {
|
|
34
|
-
@include gl-mr-
|
|
37
|
+
@include gl-mr-3;
|
|
35
38
|
@include gl-border-1;
|
|
36
39
|
@include gl-border-solid;
|
|
37
40
|
@include gl-border-gray-200;
|
|
@@ -42,8 +45,21 @@ $breadcrumb-max-width: $grid-size * 16;
|
|
|
42
45
|
.gl-breadcrumb-item {
|
|
43
46
|
@include gl-font-sm;
|
|
44
47
|
@include gl-line-height-normal;
|
|
48
|
+
@include gl-relative;
|
|
49
|
+
@include gl-pr-6;
|
|
50
|
+
|
|
51
|
+
+ .gl-breadcrumb-item {
|
|
52
|
+
@include gl-pl-0;
|
|
53
|
+
|
|
54
|
+
&::before {
|
|
55
|
+
content: '';
|
|
56
|
+
@include gl-display-none;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
45
59
|
|
|
46
60
|
> a {
|
|
61
|
+
@include gl-display-flex;
|
|
62
|
+
@include gl-align-items-center;
|
|
47
63
|
@include gl-text-gray-500;
|
|
48
64
|
@include media-breakpoint-down(xs) {
|
|
49
65
|
@include str-truncated($breadcrumb-max-width);
|
|
@@ -6,10 +6,7 @@ const template = `
|
|
|
6
6
|
:items="items"
|
|
7
7
|
>
|
|
8
8
|
<template #avatar>
|
|
9
|
-
<img class="gl-breadcrumb-avatar-tile" src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=
|
|
10
|
-
</template>
|
|
11
|
-
<template #separator>
|
|
12
|
-
<gl-icon name="angle-right" />
|
|
9
|
+
<img class="gl-breadcrumb-avatar-tile" src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=16" width="16" height="16" />
|
|
13
10
|
</template>
|
|
14
11
|
</gl-breadcrumb>
|
|
15
12
|
`;
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import { BBreadcrumb, BBreadcrumbItem } from 'bootstrap-vue';
|
|
3
|
+
import GlIcon from '../icon/icon.vue';
|
|
3
4
|
|
|
4
5
|
export default {
|
|
5
6
|
components: {
|
|
6
7
|
BBreadcrumb,
|
|
7
8
|
BBreadcrumbItem,
|
|
9
|
+
GlIcon,
|
|
8
10
|
},
|
|
9
11
|
inheritAttrs: false,
|
|
10
12
|
props: {
|
|
@@ -23,13 +25,18 @@ export default {
|
|
|
23
25
|
},
|
|
24
26
|
},
|
|
25
27
|
},
|
|
28
|
+
methods: {
|
|
29
|
+
isLastItem(items, index) {
|
|
30
|
+
return index === items.length - 1;
|
|
31
|
+
},
|
|
32
|
+
},
|
|
26
33
|
};
|
|
27
34
|
</script>
|
|
28
35
|
<template>
|
|
29
36
|
<div class="gl-breadcrumbs">
|
|
37
|
+
<!-- @slot The avatar to display. -->
|
|
38
|
+
<slot name="avatar"></slot>
|
|
30
39
|
<b-breadcrumb class="gl-breadcrumb-list" v-bind="$attrs" v-on="$listeners">
|
|
31
|
-
<!-- @slot The avatar to display. -->
|
|
32
|
-
<slot name="avatar"></slot>
|
|
33
40
|
<template v-for="(item, index) in items">
|
|
34
41
|
<b-breadcrumb-item
|
|
35
42
|
:key="index"
|
|
@@ -37,16 +44,20 @@ export default {
|
|
|
37
44
|
:text="item.text"
|
|
38
45
|
:href="item.href"
|
|
39
46
|
:to="item.to"
|
|
40
|
-
/>
|
|
41
|
-
<span
|
|
42
|
-
v-if="index != items.length - 1"
|
|
43
|
-
:key="`index ${item.text}`"
|
|
44
|
-
class="gl-breadcrumb-separator"
|
|
45
|
-
data-testid="separator"
|
|
46
47
|
>
|
|
47
|
-
|
|
48
|
-
<
|
|
49
|
-
|
|
48
|
+
<span>{{ item.text }}</span>
|
|
49
|
+
<span
|
|
50
|
+
v-if="!isLastItem(items, index)"
|
|
51
|
+
:key="`${index} ${item.text}`"
|
|
52
|
+
class="gl-breadcrumb-separator"
|
|
53
|
+
data-testid="separator"
|
|
54
|
+
>
|
|
55
|
+
<!-- @slot The separator to display. -->
|
|
56
|
+
<slot name="separator">
|
|
57
|
+
<gl-icon name="chevron-right" />
|
|
58
|
+
</slot>
|
|
59
|
+
</span>
|
|
60
|
+
</b-breadcrumb-item>
|
|
50
61
|
</template>
|
|
51
62
|
</b-breadcrumb>
|
|
52
63
|
</div>
|
|
@@ -33,6 +33,7 @@ $label-close-button: '.gl-label-close.gl-button';
|
|
|
33
33
|
&:hover {
|
|
34
34
|
@include gl-reset-color;
|
|
35
35
|
@include gl-shadow-none;
|
|
36
|
+
|
|
36
37
|
.gl-label-text-scoped {
|
|
37
38
|
@include gl-text-decoration-underline;
|
|
38
39
|
}
|
|
@@ -62,6 +63,7 @@ $label-close-button: '.gl-label-close.gl-button';
|
|
|
62
63
|
@include gl-opacity-5;
|
|
63
64
|
@include gl-reset-bg;
|
|
64
65
|
@include gl-shadow-none;
|
|
66
|
+
|
|
65
67
|
.gl-icon {
|
|
66
68
|
@include gl-fill-current-color;
|
|
67
69
|
}
|
|
@@ -92,6 +94,7 @@ $label-close-button: '.gl-label-close.gl-button';
|
|
|
92
94
|
&:focus,
|
|
93
95
|
&:hover {
|
|
94
96
|
@include gl-bg-black;
|
|
97
|
+
|
|
95
98
|
.gl-icon {
|
|
96
99
|
color: var(--label-background-color);
|
|
97
100
|
}
|
|
@@ -113,6 +116,7 @@ $label-close-button: '.gl-label-close.gl-button';
|
|
|
113
116
|
&:focus,
|
|
114
117
|
&:hover {
|
|
115
118
|
@include gl-bg-white;
|
|
119
|
+
|
|
116
120
|
.gl-icon {
|
|
117
121
|
color: var(--label-background-color);
|
|
118
122
|
}
|