@gitlab/ui 94.7.0 → 94.9.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.
Files changed (22) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/components/base/breadcrumb/breadcrumb.js +1 -1
  3. package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js +6 -2
  4. package/dist/components/base/new_dropdowns/listbox/listbox.js +1 -1
  5. package/dist/index.css +2 -2
  6. package/dist/index.css.map +1 -1
  7. package/dist/tailwind.css +1 -1
  8. package/dist/tailwind.css.map +1 -1
  9. package/package.json +2 -2
  10. package/src/components/base/alert/alert.scss +8 -2
  11. package/src/components/base/breadcrumb/breadcrumb.scss +6 -0
  12. package/src/components/base/breadcrumb/breadcrumb.vue +0 -1
  13. package/src/components/base/button/button.scss +224 -67
  14. package/src/components/base/dropdown/dropdown.scss +20 -4
  15. package/src/components/base/label/label.scss +5 -0
  16. package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue +6 -2
  17. package/src/components/base/new_dropdowns/dropdown.scss +7 -2
  18. package/src/components/base/new_dropdowns/listbox/listbox.vue +4 -2
  19. package/src/components/base/search_box_by_click/search_box_by_click.scss +12 -3
  20. package/src/components/base/segmented_control/segmented_control.scss +120 -42
  21. package/src/scss/storybook.scss +4 -0
  22. package/src/scss/variables.scss +7 -0
package/src/components/base/segmented_control/segmented_control.scss CHANGED
@@ -27,67 +27,95 @@
27
27
  }
28
28
  }
29
29
 
30
- .gl-segmented-control {
31
- label:not(.disabled) {
32
- @apply gl-cursor-pointer;
33
- }
30
+ @if $feature-button-border {
31
+ .gl-segmented-control {
32
+ label:not(.disabled) {
33
+ @apply gl-cursor-pointer;
34
+ }
34
35
 
35
36
  .btn-gl-segmented-button {
36
37
  @apply gl-text-base;
37
38
  @apply gl-leading-normal;
38
39
  @apply gl-text-gray-900;
39
40
  @include gl-fill-current-color;
40
- @apply gl-bg-gray-10;
41
- @include gl-inset-border-y-1-gray-200;
41
+ @include gl-bg-gray-10;
42
+ border-color: $gray-200;
42
43
 
43
- &:first-child {
44
- @include gl-btn-gl-segmented-button-first;
45
- }
46
-
47
- &:last-child {
48
- @include gl-btn-gl-segmented-button-last;
49
- }
50
-
51
- &:hover {
52
- @include gl-inset-border-2-gray-400;
53
- @apply gl-bg-gray-50;
54
- }
55
-
56
- &.focus {
57
- @apply gl-z-1;
58
- @include gl-btn-gl-segmented-button-focus($gray-400);
59
- @apply gl-bg-gray-50;
60
- }
44
+ &:not(:first-child) {
45
+ border-left-color: transparent;
46
+ }
61
47
 
62
- &.active {
63
- @apply gl-z-2;
64
- @include gl-inset-border-2-gray-300;
65
- @apply gl-bg-white;
48
+ &:not(:last-child) {
49
+ border-right-color: transparent;
50
+ }
66
51
 
67
52
  &:hover {
68
- @include gl-inset-border-2-gray-400;
69
- @apply gl-bg-gray-50;
53
+ border-color: $gray-400;
54
+ @include gl-bg-gray-50;
70
55
  }
71
56
 
72
- &.focus,
73
- &.focus:hover {
74
- @include gl-btn-gl-segmented-button-focus($gray-400);
75
- @apply gl-bg-gray-50;
57
+ &.focus {
58
+ @include gl-z-index-1;
59
+ border-color: $gray-400;
60
+ @include gl-focus;
61
+ @include gl-bg-gray-50;
62
+ }
63
+
64
+ &.active {
65
+ @include gl-z-index-2;
66
+ border-color: $gray-400;
67
+ @include gl-inset-border-1-gray-400;
68
+ @include gl-bg-white;
69
+
70
+ &:hover {
71
+ @include gl-inset-border-1-gray-400;
72
+ @include gl-bg-gray-50;
73
+ }
74
+
75
+ &.focus,
76
+ &.focus:hover {
77
+ border-color: $gray-400;
78
+ @include gl-focus;
79
+ @include gl-bg-gray-50;
80
+ }
76
81
  }
77
- }
78
82
 
79
83
  &:focus-within {
80
84
  @apply gl-focus;
81
85
  }
82
86
 
83
- &.disabled,
84
- &[disabled],
85
- &.disabled:hover,
86
- &[disabled]:hover {
87
- @apply gl-text-gray-400;
87
+ &.disabled,
88
+ &[disabled],
89
+ &.disabled:hover,
90
+ &[disabled]:hover {
91
+ @include gl-text-gray-400;
92
+ border-color: $gray-200;
93
+ @include gl-z-index-0;
94
+ @include gl-cursor-not-allowed;
95
+
96
+ &:first-child {
97
+ border-right-color: transparent;
98
+ }
99
+
100
+ &:last-child {
101
+ border-left-color: transparent;
102
+ }
103
+ }
104
+ }
105
+ }
106
+ } @else {
107
+ .gl-segmented-control {
108
+ label:not(.disabled) {
109
+ @include gl-cursor-pointer;
110
+ }
111
+
112
+ .btn-gl-segmented-button {
113
+ @include gl-font-base;
114
+ @include gl-line-height-normal;
115
+ @include gl-text-gray-900;
116
+ @include gl-fill-current-color;
117
+ @include gl-bg-gray-10;
88
118
  @include gl-inset-border-y-1-gray-200;
89
- @apply gl-z-0;
90
- @apply gl-cursor-not-allowed;
91
119
 
92
120
  &:first-child {
93
121
  @include gl-btn-gl-segmented-button-first;
@@ -96,6 +124,56 @@
96
124
  &:last-child {
97
125
  @include gl-btn-gl-segmented-button-last;
98
126
  }
127
+
128
+ &:hover {
129
+ @include gl-inset-border-2-gray-400;
130
+ @include gl-bg-gray-50;
131
+ }
132
+
133
+ &.focus {
134
+ @include gl-z-index-1;
135
+ @include gl-btn-gl-segmented-button-focus($gray-400);
136
+ @include gl-bg-gray-50;
137
+ }
138
+
139
+ &.active {
140
+ @include gl-z-index-2;
141
+ @include gl-inset-border-2-gray-300;
142
+ @include gl-bg-white;
143
+
144
+ &:hover {
145
+ @include gl-inset-border-2-gray-400;
146
+ @include gl-bg-gray-50;
147
+ }
148
+
149
+ &.focus,
150
+ &.focus:hover {
151
+ @include gl-btn-gl-segmented-button-focus($gray-400);
152
+ @include gl-bg-gray-50;
153
+ }
154
+ }
155
+
156
+ &:focus-within {
157
+ @include gl-focus;
158
+ }
159
+
160
+ &.disabled,
161
+ &[disabled],
162
+ &.disabled:hover,
163
+ &[disabled]:hover {
164
+ @apply gl-text-gray-400;
165
+ @include gl-inset-border-y-1-gray-200;
166
+ @apply gl-z-0;
167
+ @apply gl-cursor-not-allowed;
168
+
169
+ &:first-child {
170
+ @include gl-btn-gl-segmented-button-first;
171
+ }
172
+
173
+ &:last-child {
174
+ @include gl-btn-gl-segmented-button-last;
175
+ }
176
+ }
99
177
  }
100
178
  }
101
179
  }
package/src/scss/storybook.scss CHANGED
@@ -1,3 +1,7 @@
1
+ // Enables feature flag for GlButton border migration
2
+ // to see in Storybook the expected new styles
3
+ $feature-button-border: true;
4
+
1
5
  @import 'tokens';
2
6
 
3
7
  @import 'functions';
package/src/scss/variables.scss CHANGED
@@ -207,6 +207,10 @@ $gl-border-radius-6: $gl-spacing-scale-6;
207
207
  $gl-border-radius-7: $gl-spacing-scale-7;
208
208
  $gl-border-radius-full: 50%;
209
209
 
210
+ // component height
211
+ $gl-button-small-size: px-to-rem(24px);
212
+ $gl-button-medium-size: px-to-rem(32px);
213
+
210
214
  // transition parameters
211
215
  $gl-transition-duration-slow: 0.4s;
212
216
  $gl-transition-duration-medium: 0.2s;
@@ -328,3 +332,6 @@ $popover-arrow-color: $popover-bg;
328
332
  $popover-arrow-outer-color: $gray-100;
329
333
 
330
334
  $tooltip-opacity: 1;
335
+
336
+ // Feature flag for GlButton border migration
337
+ $feature-button-border: false !default;