@gitlab/ui 59.0.0 → 59.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "59.0.0",
+  "version": "59.1.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/badge/badge.md

@@ -4,7 +4,9 @@ indicate an issue’s status, a member’s role, or if a branch is protected.
 
 ## Usage
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <gl-badge>Hello, world!</gl-badge>
 ```
 

package/src/components/base/button/button.md

@@ -19,7 +19,9 @@ with the necessary classes added to make it look like a button, it shares the sa
 Icon-only buttons must have an accessible name.
 You can provide one with the `aria-label` attribute, which is read out by screen readers.
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <gl-button icon="close" aria-label="Close" />
 ```
 

package/src/components/base/filtered_search/filtered_search.md

@@ -59,6 +59,8 @@ const availableTokens = [
 Pass the list of tokens to the search component. Optionally, you can use `v-model` to receive
 realtime updates:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <gl-filtered-search :available-tokens="tokens" v-model="value" />
 ```

package/src/components/base/form/form_checkbox/form_checkbox.scss

@@ -56,6 +56,7 @@
     .custom-control-input ~ .custom-control-label {
       @include gl-cursor-pointer;
       @include gl-pl-3;
+      @include gl-mb-3;
 
       &::before,
       &::after {
@@ -153,7 +154,7 @@
   .help-text {
     @include gl-mt-2;
     @include gl-text-gray-500;
-    @include gl-mb-3;
+    @include gl-mb-0;
     @include gl-font-base;
     @include gl-line-height-normal;
   }

package/src/components/base/keyset_pagination/keyset_pagination.md

@@ -10,7 +10,9 @@ is to `v-bind` to the
 [`PageInfo`](https://docs.gitlab.com/ee/api/graphql/reference/#pageinfo) type
 returned by the endpoint:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <gl-keyset-pagination v-bind="pageInfo" />
 ```
 
@@ -25,7 +27,9 @@ can't be translated.
 
 Example:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <gl-keyset-pagination v-bind="pageInfo" :prev-text="__('Prev')" :next-text="__('Next')" />
 ```
 

package/src/components/base/markdown/markdown.md

@@ -40,7 +40,9 @@ selector to the root element that contains the markdown-generated HTML.
 
 Set the `compact` property to true in `GlMarkdown` to apply the compact markdown styles.
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <gl-markdown compact></gl-compact>
 ```
 

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md

@@ -4,7 +4,9 @@ to make sure this is the right dropdown component for you.
 
 ### Basic usage
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <gl-disclosure-dropdown-dropdown toggle-text="Actions" :items="items" />
 ```
 

package/src/components/utilities/friendly_wrap/friendly_wrap.md

@@ -21,13 +21,17 @@ wbr {
 By default, `GlFriendlyWrap` wraps text with slashes (`/`) as the break-symbol, which is especially
 useful when displaying paths or URLs:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <gl-friendly-wrap text="/some/file/path" />
 ```
 
 The code above renders to the following HTML:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <span class="text-break">/<wbr>some/<wbr>file/<wbr>path</span>
 ```
 
@@ -44,7 +48,9 @@ Multiple custom break-symbols can be defined via the `GlFriendlyWrap` prop:
 
 Which renders to:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <span class="text-break">some;<wbr>text-<wbr>that.<wbr>needs;<wbr>to-<wbr>be.<wbr>wrapped</span>
 ```
 
@@ -61,6 +67,8 @@ Symbols can be words too:
 
 Which renders to:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <span class="text-break">it goes on and<wbr> on and<wbr> on and<wbr> on</span>
 ```

package/src/components/utilities/intersperse/intersperse.md

@@ -34,7 +34,9 @@ consistent formatting.
 
 This renders to the following HTML:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <span><span>Item 1</span>, <span>Item 2</span>, <span>Item 3</span></span>
 ```
 
@@ -52,7 +54,9 @@ A custom separator can be defined via the `separator` prop:
 
 This renders to the following HTML:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <span><span>Item 1</span>/<span>Item 2</span>/<span>Item 3</span></span>
 ```
 
@@ -70,7 +74,9 @@ A custom last separator can be defined via the `lastSeparator` prop:
 
 This renders to the following HTML:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <span><span>Item 1</span>, <span>Item 2</span>, and <span>Item 3</span></span>
 ```
 
@@ -85,6 +91,8 @@ A custom last separator used on two items will only place `lastSeparator` betwee
 
 This renders to the following HTML:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <span><span>Item 1</span> and <span>Item 2</span></span>
 ```

package/src/components/utilities/sprintf/sprintf.md

@@ -130,7 +130,9 @@ export default {
 
 The example above renders to this HTML:
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <div>Written by <span>Some author</span></div>
 ```
 

package/src/components/utilities/truncate/truncate.md

@@ -4,7 +4,9 @@ The `GlTruncate` component lets you truncate the long texts with ellipsis.
 
 ## Usage
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <gl-truncate :text="text" :position="position" />
 ```
 

package/src/directives/safe_html/safe_html.md

@@ -46,7 +46,9 @@ const config = { ALLOWED_TAGS: ['b'] };
 const config = { ALLOWED_TAGS: [] };
 ```
 
+<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
+
 <div v-safe-html:[config]="rawHtml"></div>
 ```
 

package/src/scss/utilities.scss

@@ -482,6 +482,10 @@
   background-color: $t-gray-a-08
 }
 
+.gl-focus-bg-t-gray-a-08:focus {
+  background-color: $t-gray-a-08
+}
+
 .gl-bg-t-gray-a-08\! {
   background-color: $t-gray-a-08 !important
 }
@@ -490,6 +494,10 @@
   background-color: $t-gray-a-08 !important
 }
 
+.gl-focus-bg-t-gray-a-08\!:focus {
+  background-color: $t-gray-a-08 !important
+}
+
 .gl-bg-theme-indigo-50 {
   background-color: $theme-indigo-50
 }

package/src/scss/utility-mixins/background.scss

@@ -174,7 +174,7 @@
   background-color: $red-700;
 }
 
-@mixin gl-bg-t-gray-a-08($hover: true) {
+@mixin gl-bg-t-gray-a-08($hover: true, $focus: true) {
   background-color: $t-gray-a-08;
 }