@gitlab/ui 39.2.1 → 39.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.
Files changed (34) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/index.css +2 -2
  3. package/dist/index.css.map +1 -1
  4. package/dist/utility_classes.css +1 -1
  5. package/dist/utility_classes.css.map +1 -1
  6. package/package.json +2 -2
  7. package/scss_to_js/scss_variables.js +6 -2
  8. package/scss_to_js/scss_variables.json +24 -4
  9. package/src/components/base/avatar_link/avatar_link.scss +1 -0
  10. package/src/components/base/badge/badge.scss +1 -1
  11. package/src/components/base/breadcrumb/breadcrumb.scss +1 -1
  12. package/src/components/base/button/button.scss +34 -34
  13. package/src/components/base/carousel/carousel.scss +7 -0
  14. package/src/components/base/datepicker/datepicker.scss +4 -0
  15. package/src/components/base/dropdown/dropdown_item.scss +0 -1
  16. package/src/components/base/form/form_checkbox/form_checkbox.scss +1 -1
  17. package/src/components/base/form/form_input/form_input.scss +2 -2
  18. package/src/components/base/form/form_select/form_select.scss +2 -2
  19. package/src/components/base/label/label.scss +2 -1
  20. package/src/components/base/link/link.scss +1 -1
  21. package/src/components/base/link/link.stories.js +15 -0
  22. package/src/components/base/nav/nav.scss +7 -0
  23. package/src/components/base/pagination/pagination.scss +14 -7
  24. package/src/components/base/path/path.scss +29 -5
  25. package/src/components/base/search_box_by_click/search_box_by_click.scss +1 -1
  26. package/src/components/base/table/table.scss +6 -0
  27. package/src/components/base/token/token.scss +6 -0
  28. package/src/components/base/token_selector/token_selector.scss +2 -2
  29. package/src/components/shared_components/close_button/close_button.scss +11 -11
  30. package/src/scss/components.scss +3 -1
  31. package/src/scss/mixins.scss +26 -4
  32. package/src/scss/utilities.scss +0 -8
  33. package/src/scss/utility-mixins/outline.scss +1 -1
  34. package/src/scss/variables.scss +8 -4
package/src/scss/components.scss CHANGED
@@ -17,9 +17,10 @@
17
17
  @import '../components/base/avatars_inline/avatars_inline';
18
18
  @import '../components/base/badge/badge';
19
19
  @import '../components/base/breadcrumb/breadcrumb';
20
- @import '../components/base/datepicker/datepicker';
21
20
  @import '../components/base/banner/banner';
22
21
  @import '../components/base/broadcast_message/broadcast_message';
22
+ @import '../components/base/carousel/carousel';
23
+ @import '../components/base/datepicker/datepicker';
23
24
  @import '../components/base/daterange_picker/daterange_picker';
24
25
  @import '../components/base/drawer/drawer';
25
26
  @import '../components/base/dropdown/dropdown';
@@ -48,6 +49,7 @@
48
49
  @import '../components/base/loading_icon/loading_icon';
49
50
  @import '../components/base/markdown/markdown';
50
51
  @import '../components/base/modal/modal';
52
+ @import '../components/base/nav/nav';
51
53
  @import '../components/base/navbar/navbar';
52
54
  @import '../components/base/button/button';
53
55
  @import '../components/base/pagination/pagination';
package/src/scss/mixins.scss CHANGED
@@ -47,18 +47,40 @@
47
47
  }
48
48
  }
49
49
 
50
- @mixin gl-focus($size: null, $color: false, $important: false, $inset: false) {
50
+ /**
51
+ * Helper function for :focus
52
+ *
53
+ * @param $size is deprecated and should not be used anymore
54
+ */
55
+ @mixin gl-focus(
56
+ $size: null,
57
+ $color: false,
58
+ $important: false,
59
+ $inset: false,
60
+ $focus-ring: $focus-ring,
61
+ $outline: false,
62
+ $outline-offset: $outline-offset
63
+ ) {
51
64
  @if $inset == true {
52
65
  @if $color {
53
- box-shadow: inset 0 0 0 $size $color, $focus-ring-inset if-important($important);
66
+ box-shadow: inset 0 0 0 $outline-width $blue-400,
67
+ inset 0 0 0 #{$outline-width + $outline-offset} $white,
68
+ inset 0 0 0 #{$outline-width + $outline-offset + 1px} $color,
69
+ $focus-ring-inset if-important($important);
54
70
  outline: none if-important($important);
71
+ } @else if $outline == true {
72
+ outline: $focus-ring-outline if-important($important);
73
+ outline-offset: $outline-offset;
55
74
  } @else {
56
- box-shadow: $focus-ring-inset if-important($important);
75
+ box-shadow: inset 0 0 0 $outline-width $blue-400, $focus-ring-inset if-important($important);
57
76
  outline: none if-important($important);
58
77
  }
59
78
  } @else if $color {
60
- box-shadow: inset 0 0 0 $size $color, $focus-ring if-important($important);
79
+ box-shadow: inset 0 0 0 $gl-border-size-1 $color, $focus-ring if-important($important);
61
80
  outline: none if-important($important);
81
+ } @else if $outline == true {
82
+ outline: $focus-ring-outline if-important($important);
83
+ outline-offset: $outline-offset;
62
84
  } @else {
63
85
  box-shadow: $focus-ring if-important($important);
64
86
  outline: none if-important($important);
package/src/scss/utilities.scss CHANGED
@@ -3607,17 +3607,9 @@
3607
3607
  outline: none
3608
3608
  }
3609
3609
 
3610
- .gl-focus-outline-none:focus {
3611
- outline: none
3612
- }
3613
-
3614
3610
  .gl-outline-none\! {
3615
3611
  outline: none !important
3616
3612
  }
3617
-
3618
- .gl-focus-outline-none\!:focus {
3619
- outline: none !important
3620
- }
3621
3613
  .gl-overflow-hidden {
3622
3614
  overflow: hidden
3623
3615
  }
package/src/scss/utility-mixins/outline.scss CHANGED
@@ -7,6 +7,6 @@
7
7
  outline: 0;
8
8
  }
9
9
 
10
- @mixin gl-outline-none($focus: true) {
10
+ @mixin gl-outline-none {
11
11
  outline: none;
12
12
  }
package/src/scss/variables.scss CHANGED
@@ -417,10 +417,14 @@ $gl-transition-duration-slow: 0.4s;
417
417
  $gl-transition-duration-medium: 0.2s;
418
418
 
419
419
  // Focus ring
420
- $focus-ring: 0 0 0 $gl-border-size-1 rgba($white, 0.4),
421
- 0 0 0 $gl-border-size-4 rgba($blue-500, 0.48);
422
- $focus-ring-inset: inset 0 0 0 $gl-border-size-3 rgba($blue-500, 0.48),
423
- inset 0 0 0 $gl-border-size-4 rgba($white, 0.4);
420
+ $outline-offset: 1px;
421
+ $outline-width: 2px;
422
+ $focus-ring: 0 0 0 $outline-offset $white, 0 0 0 #{$outline-offset + $outline-width} $blue-400;
423
+ $focus-ring-inset: inset 0 0 0 #{$outline-width + $outline-offset} $white,
424
+ inset 0 0 0 $outline-offset $white;
425
+ $focus-ring-dark: 0 0 0 $outline-offset rgba($black, 0.6),
426
+ 0 0 0 #{$outline-offset + $outline-width} $blue-300;
427
+ $focus-ring-outline: $outline-width solid $blue-400;
424
428
 
425
429
  // Toasts
426
430
  $toast-max-width: px-to-rem(586px);