@gitlab/ui 128.13.2 → 128.13.3

package/src/scss/components.scss

@@ -2,80 +2,80 @@
 // Import component stylesheets located in components here. i.e.
 // @import '../components/base/dropdown/dropdown'
 //
-@import '../components/base/new_dropdowns/disclosure/disclosure_dropdown';
-@import '../components/base/keyset_pagination/keyset_pagination';
-@import '../components/charts/gauge/gauge';
-@import '../components/base/token_selector/token_selector';
-@import '../components/base/card/card';
-@import '../components/shared_components/clear_icon_button/clear_icon_button';
-@import '../components/base/accordion/accordion_item';
-@import '../components/base/alert/alert';
-@import '../components/base/attribute_list/attribute_list';
-@import '../components/base/avatar/avatar';
-@import '../components/base/avatar_labeled/avatar_labeled';
-@import '../components/base/avatar_link/avatar_link';
-@import '../components/base/avatars_inline/avatars_inline';
-@import '../components/base/animated_icon/animated_icon';
-@import '../components/base/badge/badge';
-@import '../components/base/breadcrumb/breadcrumb';
-@import '../components/base/banner/banner';
-@import '../components/base/broadcast_message/broadcast_message';
-@import '../components/base/datepicker/datepicker';
-@import '../components/base/daterange_picker/daterange_picker';
-@import '../components/base/drawer/drawer';
-@import '../components/base/dropdown/dropdown';
-@import '../components/base/dropdown/dropdown_divider';
-@import '../components/base/dropdown/dropdown_section_header';
-@import '../components/base/dropdown/dropdown_item';
-@import '../components/base/dropdown/dropdown_text';
-@import '../components/base/filtered_search/filtered_search';
-@import '../components/base/filtered_search/filtered_search_suggestion';
-@import '../components/base/filtered_search/filtered_search_suggestion_list';
-@import '../components/base/filtered_search/filtered_search_term';
-@import '../components/base/filtered_search/filtered_search_token';
-@import '../components/base/filtered_search/filtered_search_token_segment';
-@import '../components/base/form/form_date/form_date';
-@import '../components/base/form/form_input/form_input';
-@import '../components/base/form/form_input_group/form_input_group';
-@import '../components/base/form/form_checkbox/form_checkbox';
-@import '../components/base/form/form_group/form_group';
-@import '../components/base/form/form_radio/form_radio';
-@import '../components/base/form/form_radio_group/form_radio_group';
-@import '../components/base/form/form_select/form_select';
-@import '../components/base/form/form_combobox/form_combobox';
-@import '../components/base/form/input_group_text/input_group_text';
-@import '../components/base/icon/icon';
-@import '../components/base/infinite_scroll/infinite_scroll';
-@import '../components/base/label/label';
-@import '../components/base/link/link';
-@import '../components/base/loading_icon/loading_icon';
-@import '../components/base/markdown/markdown';
-@import '../components/base/modal/modal';
-@import '../components/base/button/button';
-@import '../components/base/button_group/button_group';
-@import '../components/base/pagination/pagination';
-@import '../components/base/path/path';
-@import '../components/base/popover/popover';
-@import '../components/base/progress_bar/progress_bar';
-@import '../components/base/search_box_by_type/search_box_by_type';
-@import '../components/base/search_box_by_click/search_box_by_click';
-@import '../components/base/skeleton_loader/skeleton_loader';
-@import '../components/base/tabs/tabs/tabs';
-@import '../components/base/toast/toast';
-@import '../components/base/table/table';
-@import '../components/base/toggle/toggle';
-@import '../components/base/token/token';
-@import '../components/base/tooltip/tooltip';
-@import '../components/charts/heatmap/heatmap';
-@import '../components/charts/legend/legend';
-@import '../components/charts/series_label/series_label';
-@import '../components/charts/single_stat/single_stat';
-@import '../components/charts/shared/tooltip/tooltip';
-@import '../components/charts/shared/tooltip/tooltip_default_format/tooltip_default_format';
-@import '../components/dashboards/dashboard_layout/grid_layout/grid_layout';
-@import '../components/utilities/truncate/truncate';
-@import '../components/utilities/truncate_text/truncate_text';
-@import '../components/base/new_dropdowns/dropdown';
-@import '../components/base/new_dropdowns/dropdown_item';
-@import '../components/base/new_dropdowns/listbox/listbox';
-@import '../components/regions/empty_state/empty_state';
+@import "../components/base/new_dropdowns/disclosure/disclosure_dropdown";
+@import "../components/base/keyset_pagination/keyset_pagination";
+@import "../components/charts/gauge/gauge";
+@import "../components/base/token_selector/token_selector";
+@import "../components/base/card/card";
+@import "../components/shared_components/clear_icon_button/clear_icon_button";
+@import "../components/base/accordion/accordion_item";
+@import "../components/base/alert/alert";
+@import "../components/base/attribute_list/attribute_list";
+@import "../components/base/avatar/avatar";
+@import "../components/base/avatar_labeled/avatar_labeled";
+@import "../components/base/avatar_link/avatar_link";
+@import "../components/base/avatars_inline/avatars_inline";
+@import "../components/base/animated_icon/animated_icon";
+@import "../components/base/badge/badge";
+@import "../components/base/breadcrumb/breadcrumb";
+@import "../components/base/banner/banner";
+@import "../components/base/broadcast_message/broadcast_message";
+@import "../components/base/datepicker/datepicker";
+@import "../components/base/daterange_picker/daterange_picker";
+@import "../components/base/drawer/drawer";
+@import "../components/base/dropdown/dropdown";
+@import "../components/base/dropdown/dropdown_divider";
+@import "../components/base/dropdown/dropdown_section_header";
+@import "../components/base/dropdown/dropdown_item";
+@import "../components/base/dropdown/dropdown_text";
+@import "../components/base/filtered_search/filtered_search";
+@import "../components/base/filtered_search/filtered_search_suggestion";
+@import "../components/base/filtered_search/filtered_search_suggestion_list";
+@import "../components/base/filtered_search/filtered_search_term";
+@import "../components/base/filtered_search/filtered_search_token";
+@import "../components/base/filtered_search/filtered_search_token_segment";
+@import "../components/base/form/form_date/form_date";
+@import "../components/base/form/form_input/form_input";
+@import "../components/base/form/form_input_group/form_input_group";
+@import "../components/base/form/form_checkbox/form_checkbox";
+@import "../components/base/form/form_group/form_group";
+@import "../components/base/form/form_radio/form_radio";
+@import "../components/base/form/form_radio_group/form_radio_group";
+@import "../components/base/form/form_select/form_select";
+@import "../components/base/form/form_combobox/form_combobox";
+@import "../components/base/form/input_group_text/input_group_text";
+@import "../components/base/icon/icon";
+@import "../components/base/infinite_scroll/infinite_scroll";
+@import "../components/base/label/label";
+@import "../components/base/link/link";
+@import "../components/base/loading_icon/loading_icon";
+@import "../components/base/markdown/markdown";
+@import "../components/base/modal/modal";
+@import "../components/base/button/button";
+@import "../components/base/button_group/button_group";
+@import "../components/base/pagination/pagination";
+@import "../components/base/path/path";
+@import "../components/base/popover/popover";
+@import "../components/base/progress_bar/progress_bar";
+@import "../components/base/search_box_by_type/search_box_by_type";
+@import "../components/base/search_box_by_click/search_box_by_click";
+@import "../components/base/skeleton_loader/skeleton_loader";
+@import "../components/base/tabs/tabs/tabs";
+@import "../components/base/toast/toast";
+@import "../components/base/table/table";
+@import "../components/base/toggle/toggle";
+@import "../components/base/token/token";
+@import "../components/base/tooltip/tooltip";
+@import "../components/charts/heatmap/heatmap";
+@import "../components/charts/legend/legend";
+@import "../components/charts/series_label/series_label";
+@import "../components/charts/single_stat/single_stat";
+@import "../components/charts/shared/tooltip/tooltip";
+@import "../components/charts/shared/tooltip/tooltip_default_format/tooltip_default_format";
+@import "../components/dashboards/dashboard_layout/grid_layout/grid_layout";
+@import "../components/utilities/truncate/truncate";
+@import "../components/utilities/truncate_text/truncate_text";
+@import "../components/base/new_dropdowns/dropdown";
+@import "../components/base/new_dropdowns/dropdown_item";
+@import "../components/base/new_dropdowns/listbox/listbox";
+@import "../components/regions/empty_state/empty_state";

package/src/scss/fonts.scss

@@ -5,7 +5,7 @@ Usage:
   html { font-family: 'GitLab Sans', sans-serif; }
 */
 @font-face {
-  font-family: 'GitLab Sans';
+  font-family: "GitLab Sans";
   font-weight: 100 900;
   /**
    * Applications should use a less aggressive font-display value than this.
@@ -14,12 +14,12 @@ Usage:
   font-display: block;
   font-style: normal;
   /* stylelint-disable-next-line property-no-unknown */
-  font-named-instance: 'Regular';
-  src: url('../../static/fonts/GitLabSans.woff2') format('woff2');
+  font-named-instance: "Regular";
+  src: url("../../static/fonts/GitLabSans.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'GitLab Sans';
+  font-family: "GitLab Sans";
   font-weight: 100 900;
   /**
    * Applications should use a less aggressive font-display value than this.
@@ -28,8 +28,8 @@ Usage:
   font-display: block;
   font-style: italic;
   /* stylelint-disable-next-line property-no-unknown */
-  font-named-instance: 'Regular';
-  src: url('../../static/fonts/GitLabSans-Italic.woff2') format('woff2');
+  font-named-instance: "Regular";
+  src: url("../../static/fonts/GitLabSans-Italic.woff2") format("woff2");
 }
 
 /* -------------------------------------------------------
@@ -39,7 +39,7 @@ Usage:
   html { font-family: 'GitLab Mono', monospace; }
 */
 @font-face {
-  font-family: 'GitLab Mono';
+  font-family: "GitLab Mono";
   font-weight: 100 900;
   /**
    * Applications should use a less aggressive font-display value than this.
@@ -47,11 +47,11 @@ Usage:
    */
   font-display: block;
   font-style: normal;
-  src: url('../../static/fonts/GitLabMono.woff2') format('woff2');
+  src: url("../../static/fonts/GitLabMono.woff2") format("woff2");
 }
 
 @font-face {
-  font-family: 'GitLab Mono';
+  font-family: "GitLab Mono";
   font-weight: 100 900;
   /**
    * Applications should use a less aggressive font-display value than this.
@@ -59,7 +59,7 @@ Usage:
    */
   font-display: block;
   font-style: italic;
-  src: url('../../static/fonts/GitLabMono-Italic.woff2') format('woff2');
+  src: url("../../static/fonts/GitLabMono-Italic.woff2") format("woff2");
 }
 
 * {

package/src/scss/functions.scss

@@ -1,5 +1,5 @@
-@use 'sass:math';
-@use 'sass:meta';
+@use "sass:math";
+@use "sass:meta";
 
 /*
 * SASS preserves units in arithmetic operations. For example:
@@ -12,7 +12,7 @@
 }
 
 @function strip-unit($number) {
-  @if meta.type-of($number) == 'number' and not math.is-unitless($number) {
+  @if meta.type-of($number) == "number" and not math.is-unitless($number) {
     @return math.div($number, extract-unit($number));
   }
 
@@ -40,9 +40,9 @@
 }
 
 @function px-to-rem($px, $font-size-base: 16px) {
-  @if meta.type-of($px) == 'number' {
+  @if meta.type-of($px) == "number" {
     @return single-unit-rem($px, $font-size-base);
-  } @else if meta.type-of($px) == 'list' {
+  } @else if meta.type-of($px) == "list" {
     @return multiple-units-rem($px, $font-size-base);
   } @else {
     @return $px;
@@ -50,7 +50,7 @@
 }
 
 @function if-important($important) {
-  @return #{if($important, '!important', '')};
+  @return #{if($important, "!important", "")};
 }
 
 @function clamp-between($min, $max, $min-width: $breakpoint-md, $max-width: $breakpoint-xl) {

package/src/scss/gitlab_ui.scss

@@ -1,21 +1,21 @@
-@import 'mixins';
+@import "mixins";
 
-@import 'bootstrap';
-@import 'bootstrap_vue';
+@import "bootstrap";
+@import "bootstrap_vue";
 
 // Design Tokens
-@import 'tokens';
+@import "tokens";
 
 // Settings
-@import 'functions';
-@import 'variables';
-@import 'typescale/index';
+@import "functions";
+@import "variables";
+@import "typescale/index";
 
 // Body
-@import 'body';
+@import "body";
 
 // Typography
-@import 'typography';
+@import "typography";
 
 // Components
-@import 'components';
+@import "components";

package/src/scss/mixins.scss

@@ -1,4 +1,4 @@
-@use 'sass:map';
+@use "sass:map";
 
 @mixin str-truncated($max-width: 82%) {
   display: inline-block;
@@ -10,18 +10,18 @@
 }
 
 @mixin mask-chevron-down {
-  mask-image: url('#{$gl-icon-chevron-down}');
+  mask-image: url("#{$gl-icon-chevron-down}");
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: cover;
 }
 
 @mixin gl-fluid-font-size($min, $max) {
-  @include gl-responsive-property('font-size', $min, $max);
+  @include gl-responsive-property("font-size", $min, $max);
 }
 
 @mixin gl-fluid-line-height($min, $max) {
-  @include gl-responsive-property('line-height', $min, $max);
+  @include gl-responsive-property("line-height", $min, $max);
 }
 
 /**
@@ -56,7 +56,8 @@
 ) {
   @if $inset == true {
     @if $color {
-      box-shadow: inset 0 0 0 $outline-width var(--gl-focus-ring-outer-color),
+      box-shadow:
+        inset 0 0 0 $outline-width var(--gl-focus-ring-outer-color),
         inset 0 0 0 #{$outline-width + $outline-offset} var(--gl-focus-ring-inner-color),
         inset 0 0 0 #{$outline-width + $outline-offset + 1px} $color,
         $focus-ring-inset if-important($important);
@@ -68,7 +69,8 @@
       outline: $focus-ring-outline if-important($important);
       outline-offset: $outline-offset;
     } @else {
-      box-shadow: inset 0 0 0 $outline-width var(--gl-focus-ring-outer-color),
+      box-shadow:
+        inset 0 0 0 $outline-width var(--gl-focus-ring-outer-color),
         $focus-ring-inset if-important($important);
       outline: none if-important($important);
       @media (forced-colors: active) {
@@ -76,7 +78,9 @@
       }
     }
   } @else if $color {
-    box-shadow: inset 0 0 0 $gl-border-size-1 $color, $focus-ring if-important($important);
+    box-shadow:
+      inset 0 0 0 $gl-border-size-1 $color,
+      $focus-ring if-important($important);
     outline: none if-important($important);
     @media (forced-colors: active) {
       outline: 2px solid LinkText if-important($important);
@@ -145,7 +149,7 @@
   }
 }
 
-@mixin gl-container-width-up($name, $containerName: '', $includeMQFallback: true) {
+@mixin gl-container-width-up($name, $containerName: "", $includeMQFallback: true) {
   $min: map.get($breakpoints, $name);
   @if $min == null {
     @error "#{$name} is not a valid breakpoint for this @container query.";
@@ -154,12 +158,11 @@
     @container #{$containerName} (width >= #{$min}) {
       @if & {
         :where(html.with-gl-container-queries) & {
-          @content
+          @content;
         }
-      }
-      @else {
+      } @else {
         :where(html.with-gl-container-queries) {
-          @content
+          @content;
         }
       }
     }
@@ -169,10 +172,9 @@
           :where(html:not(.with-gl-container-queries)) & {
             @content;
           }
-        }
-        @else {
-          :where(html:not(.with-gl-container-queries))  {
-            @content
+        } @else {
+          :where(html:not(.with-gl-container-queries)) {
+            @content;
           }
         }
       }
@@ -182,7 +184,7 @@
   }
 }
 
-@mixin gl-container-width-down($name, $containerName: '', $includeMQFallback: true) {
+@mixin gl-container-width-down($name, $containerName: "", $includeMQFallback: true) {
   $max: map.get($breakpoints, $name);
   @if ($max == null or $max == 0) {
     @error "#{$name} is not a valid breakpoint for this @container query.";
@@ -193,8 +195,7 @@
       :where(html.with-gl-container-queries) & {
         @content;
       }
-    }
-    @else {
+    } @else {
       :where(html.with-gl-container-queries) {
         @content;
       }
@@ -206,8 +207,7 @@
         :where(html:not(.with-gl-container-queries)) & {
           @content;
         }
-      }
-      @else {
+      } @else {
         :where(html:not(.with-gl-container-queries)) {
           @content;
         }
@@ -243,14 +243,14 @@
 
 @mixin gl-prefers-reduced-motion-transition {
   @media (prefers-reduced-motion) {
-    transition-duration: .01ms !important;
+    transition-duration: 0.01ms !important;
     transition-delay: 0ms !important;
   }
 }
 
 @mixin gl-prefers-reduced-motion-animation {
   @media (prefers-reduced-motion) {
-    animation-duration: .01ms !important;
+    animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     animation-delay: 0ms !important;
   }

package/src/scss/storybook.scss

@@ -1,23 +1,22 @@
-@import 'tokens';
+@import "tokens";
 
-@import 'functions';
-@import 'variables';
+@import "functions";
+@import "variables";
 
-@import '../vendor/bootstrap/scss/functions';
-@import '../vendor/bootstrap/scss/variables';
-@import '../vendor/bootstrap/scss/mixins';
+@import "../vendor/bootstrap/scss/functions";
+@import "../vendor/bootstrap/scss/variables";
+@import "../vendor/bootstrap/scss/mixins";
 
-@import 'mixins';
+@import "mixins";
 
-@import 'bootstrap';
-@import 'bootstrap_vue';
+@import "bootstrap";
+@import "bootstrap_vue";
 
+@import "fonts";
 
-@import 'fonts';
-
-@import 'body';
-@import 'typography';
-@import 'components';
+@import "body";
+@import "typography";
+@import "components";
 
 /**
  * Custom padding for docs pages. This improves the integration in Pajamas pages.
@@ -36,4 +35,4 @@
 // Note that adding `.css` here would break the inline import.
 // These utilities are imported last, because that's
 // what we do in GitLab as well.
-@import 'tailwind';
+@import "tailwind";

package/src/scss/tokens.scss

@@ -1,2 +1,2 @@
-@import '../tokens/build/css/tokens';
-@import '../tokens/build/css/tokens.dark';
+@import "../tokens/build/css/tokens";
+@import "../tokens/build/css/tokens.dark";

package/src/scss/typescale/_index.scss

@@ -1,4 +1,4 @@
-@mixin gl-typescale-ui($selector: 'body') {
+@mixin gl-typescale-ui($selector: "body") {
   #{$selector} {
     @apply gl-text-base;
     @apply gl-text-default;

package/src/scss/typescale/typescale_demo.scss

@@ -1,7 +1,7 @@
-@import '../variables';
-@import '../mixins';
-@import './index';
+@import "../variables";
+@import "../mixins";
+@import "./index";
 
 @include gl-typescale-ui;
 
-@import '../tailwind';
+@import "../tailwind";

package/src/scss/typography.scss

@@ -1,5 +1,15 @@
-h1, h2, h3, h4, h5, h6,
-.h1, .h2, .h3, .h4, .h5, .h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
   @apply gl-text-heading;
 }
 
@@ -25,7 +35,7 @@ pre {
 }
 
 kbd {
-  @apply gl-inline-block gl-text-default gl-bg-subtle gl-border gl-border-b-strong gl-leading-1;
+  @apply gl-border gl-inline-block gl-border-b-strong gl-bg-subtle gl-leading-1 gl-text-default;
   font-size: 87.5%;
   padding: 3px 5px;
   vertical-align: unset;
@@ -35,15 +45,15 @@ kbd {
 }
 
 .table {
-  @apply gl-w-full gl-mb-3 gl-text-default gl-bg-transparent;
+  @apply gl-mb-3 gl-w-full gl-bg-transparent gl-text-default;
 
   th,
   td {
-    @apply gl-p-4 gl-align-top gl-border-t;
+    @apply gl-border-t gl-p-4 gl-align-top;
   }
 
   thead th {
-    @apply gl-align-bottom gl-border-b gl-border-b-2;
+    @apply gl-border-b gl-border-b-2 gl-align-bottom;
   }
 
   tbody + tbody {

package/src/scss/variables.scss

@@ -1,6 +1,6 @@
-@use 'sass:map';
-@import 'functions';
-@import '../tokens/build/scss/tokens';
+@use "sass:map";
+@import "functions";
+@import "../tokens/build/scss/tokens";
 
 // Layout
 $grid-size: px-to-rem(8px);
@@ -45,20 +45,33 @@ $gl-font-weight-semibold: 500;
 $gl-font-weight-bold: 600;
 
 $gl-font-weights: (
-  'normal': $gl-font-weight-normal,
-  'bold': $gl-font-weight-bold,
+  "normal": $gl-font-weight-normal,
+  "bold": $gl-font-weight-bold,
 );
 
 // Fonts
-$gl-monospace-font: 'GitLab Mono', 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono',
-  'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace !default;
-$gl-regular-font: 'GitLab Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans',
-  Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-  'Segoe UI Symbol', 'Noto Color Emoji' !default;
+$gl-monospace-font:
+  "GitLab Mono", "JetBrains Mono", "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
+  "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace !default;
+$gl-regular-font:
+  "GitLab Sans",
+  -apple-system,
+  BlinkMacSystemFont,
+  "Segoe UI",
+  Roboto,
+  "Noto Sans",
+  Ubuntu,
+  Cantarell,
+  "Helvetica Neue",
+  sans-serif,
+  "Apple Color Emoji",
+  "Segoe UI Emoji",
+  "Segoe UI Symbol",
+  "Noto Color Emoji" !default;
 
 $gl-fonts: (
-  'monospace': $gl-monospace-font,
-  'regular': $gl-regular-font,
+  "monospace": $gl-monospace-font,
+  "regular": $gl-regular-font,
 );
 
 // New UI type scale
@@ -195,9 +208,11 @@ $gl-easing-out-cubic: cubic-bezier(0.22, 0.61, 0.36, 1);
 $outline-offset: 1px;
 $outline-width: 2px;
 $outline: #{$outline-offset + $outline-width};
-$focus-ring: 0 0 0 $outline-offset var(--gl-focus-ring-inner-color),
+$focus-ring:
+  0 0 0 $outline-offset var(--gl-focus-ring-inner-color),
   0 0 0 #{$outline-offset + $outline-width} var(--gl-focus-ring-outer-color);
-$focus-ring-inset: inset 0 0 0 #{$outline-width + $outline-offset} var(--gl-focus-ring-inner-color),
+$focus-ring-inset:
+  inset 0 0 0 #{$outline-width + $outline-offset} var(--gl-focus-ring-inner-color),
   inset 0 0 0 $outline-offset var(--gl-focus-ring-inner-color);
 $focus-ring-outline: $outline-width solid var(--gl-focus-ring-outer-color);