@gitlab/ui 49.3.0 → 49.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "49.3.0",
+  "version": "49.4.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -22,12 +22,13 @@
   "scripts": {
     "build": "NODE_ENV=production rollup -c",
     "prebuild": "run-s build-scss-variables generate-utilities",
+    "prepare": "run-s build-scss-variables generate-utilities",
     "generate-utilities": "make src/scss/utilities.scss",
     "build-scss-variables": "make scss_to_js/scss_variables.js",
     "clean": "rm -r dist storybook scss_to_js/scss_variables.* src/scss/utilities.scss",
     "cy:run": "cypress run --browser firefox",
     "start": "yarn storybook",
-    "storybook": "yarn storybook-prep && start-storybook --ci -p 9001 -c .storybook -s ./static",
+    "storybook": "yarn storybook-prep && start-storybook --ci --host localhost --port 9001 -c .storybook -s ./static",
     "storybook-prep": "run-s generate-utilities build-scss-variables",
     "storybook-static": "yarn storybook-prep && build-storybook -c .storybook -o storybook  -s ./static",
     "pretest:unit": "yarn build-scss-variables",
@@ -56,7 +57,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.2",
-    "bootstrap-vue": "2.20.1",
+    "bootstrap-vue": "2.23.1",
     "dompurify": "^2.4.0",
     "echarts": "^5.3.2",
     "iframe-resizer": "^4.3.2",
@@ -101,13 +102,13 @@
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "^2.0.2",
-    "bootstrap": "4.5.3",
+    "bootstrap": "4.6.2",
     "cypress": "^10.11.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.26.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-storybook": "0.6.6",
+    "eslint-plugin-storybook": "0.6.7",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
@@ -115,7 +116,6 @@
     "jest": "^29.2.2",
     "jest-circus": "29.2.2",
     "jest-environment-jsdom": "29.2.2",
-    "jest-serializer-vue": "^2.0.2",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
     "npm-run-all": "^4.1.5",

package/src/components/base/badge/badge.scss

@@ -97,14 +97,14 @@
 
 @include gl-badge-variant(
   $variant: muted,
-  $color: $gray-500,
-  $icon-color: $gray-400,
+  $color: $gray-600,
+  $icon-color: $gray-500,
   $bg: $gray-50,
-  $hover-color: $gray-600,
-  $hover-icon-color: $gray-500,
+  $hover-color: $gray-700,
+  $hover-icon-color: $gray-600,
   $border-color: $gray-200,
-  $active-color: $gray-700,
-  $active-icon-color: $gray-600,
+  $active-color: $gray-800,
+  $active-icon-color: $gray-700,
   $active-bg: $gray-100
 );
 

package/src/components/base/filtered_search/__snapshots__/filtered_search_term.spec.js.snap

@@ -1,13 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Filtered search term renders input with value in active mode 1`] = `
-<div data-testid="filtered-search-term" class="gl-h-auto gl-filtered-search-term">
-  <div active="true" cursor-position="end" value="test-value" class="gl-filtered-search-term-token">test-value</div>
+<div
+  class="gl-h-auto gl-filtered-search-term"
+  data-testid="filtered-search-term"
+>
+  <div
+    active="true"
+    class="gl-filtered-search-term-token"
+    cursor-position="end"
+    value="test-value"
+  >
+    test-value
+  </div>
 </div>
 `;
 
 exports[`Filtered search term renders value in inactive mode 1`] = `
-<div data-testid="filtered-search-term" class="gl-h-auto gl-filtered-search-term">
-  <div cursor-position="end" value="test-value" class="gl-filtered-search-term-token">test-value</div>
+<div
+  class="gl-h-auto gl-filtered-search-term"
+  data-testid="filtered-search-term"
+>
+  <div
+    class="gl-filtered-search-term-token"
+    cursor-position="end"
+    value="test-value"
+  >
+    test-value
+  </div>
 </div>
 `;

package/src/components/base/form/form_checkbox/form_checkbox_group.vue

@@ -1,6 +1,6 @@
 <script>
 import { BFormCheckboxGroup } from 'bootstrap-vue';
-import formOptionsMixin from 'bootstrap-vue/src/mixins/form-options';
+import { formOptionsMixin } from 'bootstrap-vue/src/mixins/form-options';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
 import GlFormCheckbox from './form_checkbox.vue';
 

package/src/components/base/form/form_radio_group/form_radio_group.vue

@@ -1,6 +1,6 @@
 <script>
 import { BFormRadioGroup } from 'bootstrap-vue';
-import formOptionsMixin from 'bootstrap-vue/src/mixins/form-options';
+import { formOptionsMixin } from 'bootstrap-vue/src/mixins/form-options';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
 import GlFormRadio from '../form_radio/form_radio.vue';
 

package/src/components/base/icon/__snapshots__/icon.spec.js.snap

@@ -1,7 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Icon component when created shows svg class "s8" and path "/path/to/icons.svg#check-circle" 1`] = `
-<svg data-testid="check-circle-icon" role="img" aria-hidden="true" class="gl-icon s8">
-  <use href="/path/to/icons.svg#check-circle"></use>
+<svg
+  aria-hidden="true"
+  class="gl-icon s8"
+  data-testid="check-circle-icon"
+  role="img"
+>
+  <use
+    href="/path/to/icons.svg#check-circle"
+  />
 </svg>
 `;

package/src/components/base/paginated_list/__snapshots__/paginated_list.spec.js.snap

@@ -5,13 +5,11 @@ exports[`Paginated List Pagination renders 1 item on page 7 with page size of 2
   <div
     class="row-content-block second-block d-sm-flex justify-content-between flex-row-reverse"
   >
-     
     <gl-search-box-by-type-stub
       clearbuttontitle="Clear"
       value=""
     />
   </div>
-    
   <ul
     class="list-group list-group-flush list-unstyled"
   >
@@ -29,7 +27,6 @@ exports[`Paginated List Pagination renders 1 item on page 7 with page size of 2
       </div>
     </li>
   </ul>
-   
   <gl-pagination-stub
     align="left"
     class="d-flex justify-content-center prepend-top-default"
@@ -46,8 +43,6 @@ exports[`Paginated List Pagination renders 1 item on page 7 with page size of 2
     totalitems="13"
     value="7"
   />
-   
-  <!---->
 </div>
 `;
 
@@ -56,13 +51,11 @@ exports[`Paginated List Pagination renders 3 items on page 2 with default page s
   <div
     class="row-content-block second-block d-sm-flex justify-content-between flex-row-reverse"
   >
-     
     <gl-search-box-by-type-stub
       clearbuttontitle="Clear"
       value=""
     />
   </div>
-    
   <ul
     class="list-group list-group-flush list-unstyled"
   >
@@ -106,7 +99,6 @@ exports[`Paginated List Pagination renders 3 items on page 2 with default page s
       </div>
     </li>
   </ul>
-   
   <gl-pagination-stub
     align="left"
     class="d-flex justify-content-center prepend-top-default"
@@ -123,8 +115,6 @@ exports[`Paginated List Pagination renders 3 items on page 2 with default page s
     totalitems="13"
     value="2"
   />
-   
-  <!---->
 </div>
 `;
 
@@ -133,13 +123,11 @@ exports[`Paginated List Pagination renders 5 items on page 1 for a page size of
   <div
     class="row-content-block second-block d-sm-flex justify-content-between flex-row-reverse"
   >
-     
     <gl-search-box-by-type-stub
       clearbuttontitle="Clear"
       value=""
     />
   </div>
-    
   <ul
     class="list-group list-group-flush list-unstyled"
   >
@@ -209,7 +197,6 @@ exports[`Paginated List Pagination renders 5 items on page 1 for a page size of
       </div>
     </li>
   </ul>
-   
   <gl-pagination-stub
     align="left"
     class="d-flex justify-content-center prepend-top-default"
@@ -226,8 +213,6 @@ exports[`Paginated List Pagination renders 5 items on page 1 for a page size of
     totalitems="13"
     value="1"
   />
-   
-  <!---->
 </div>
 `;
 
@@ -236,13 +221,11 @@ exports[`Paginated List Pagination renders 10 items for a default page size of 1
   <div
     class="row-content-block second-block d-sm-flex justify-content-between flex-row-reverse"
   >
-     
     <gl-search-box-by-type-stub
       clearbuttontitle="Clear"
       value=""
     />
   </div>
-    
   <ul
     class="list-group list-group-flush list-unstyled"
   >
@@ -377,7 +360,6 @@ exports[`Paginated List Pagination renders 10 items for a default page size of 1
       </div>
     </li>
   </ul>
-   
   <gl-pagination-stub
     align="left"
     class="d-flex justify-content-center prepend-top-default"
@@ -394,8 +376,6 @@ exports[`Paginated List Pagination renders 10 items for a default page size of 1
     totalitems="13"
     value="1"
   />
-   
-  <!---->
 </div>
 `;
 
@@ -404,13 +384,11 @@ exports[`Paginated List Pagination renders 13 items for a default page size of 2
   <div
     class="row-content-block second-block d-sm-flex justify-content-between flex-row-reverse"
   >
-     
     <gl-search-box-by-type-stub
       clearbuttontitle="Clear"
       value=""
     />
   </div>
-    
   <ul
     class="list-group list-group-flush list-unstyled"
   >
@@ -584,7 +562,6 @@ exports[`Paginated List Pagination renders 13 items for a default page size of 2
       </div>
     </li>
   </ul>
-   
   <gl-pagination-stub
     align="left"
     class="d-flex justify-content-center prepend-top-default"
@@ -601,8 +578,6 @@ exports[`Paginated List Pagination renders 13 items for a default page size of 2
     totalitems="13"
     value="1"
   />
-   
-  <!---->
 </div>
 `;
 
@@ -611,19 +586,14 @@ exports[`Paginated List Search states renders the custom empty search message wh
   <div
     class="row-content-block second-block d-sm-flex justify-content-between flex-row-reverse"
   >
-     
     <gl-search-box-by-type-stub
       clearbuttontitle="Clear"
       value=""
     />
   </div>
-    
   <ul
     class="list-group list-group-flush list-unstyled"
   />
-   
-  <!---->
-   
   <div
     class="bs-callout bs-callout-warning mt-3 empty-message empty-search"
   >
@@ -639,19 +609,14 @@ exports[`Paginated List Search states renders the default empty search message w
   <div
     class="row-content-block second-block d-sm-flex justify-content-between flex-row-reverse"
   >
-     
     <gl-search-box-by-type-stub
       clearbuttontitle="Clear"
       value=""
     />
   </div>
-    
   <ul
     class="list-group list-group-flush list-unstyled"
   />
-   
-  <!---->
-   
   <div
     class="bs-callout bs-callout-warning mt-3 empty-message empty-search"
   >
@@ -667,13 +632,11 @@ exports[`Paginated List Search states renders the list filtered by search result
   <div
     class="row-content-block second-block d-sm-flex justify-content-between flex-row-reverse"
   >
-     
     <gl-search-box-by-type-stub
       clearbuttontitle="Clear"
       value=""
     />
   </div>
-    
   <ul
     class="list-group list-group-flush list-unstyled"
   >
@@ -704,7 +667,6 @@ exports[`Paginated List Search states renders the list filtered by search result
       </div>
     </li>
   </ul>
-   
   <gl-pagination-stub
     align="left"
     class="d-flex justify-content-center prepend-top-default"
@@ -721,8 +683,6 @@ exports[`Paginated List Search states renders the list filtered by search result
     totalitems="2"
     value="1"
   />
-   
-  <!---->
 </div>
 `;
 
@@ -731,19 +691,14 @@ exports[`Paginated List Searchless states renders the list in an empty state wit
   <div
     class="row-content-block second-block d-sm-flex justify-content-between flex-row-reverse"
   >
-     
     <gl-search-box-by-type-stub
       clearbuttontitle="Clear"
       value=""
     />
   </div>
-    
   <ul
     class="list-group list-group-flush list-unstyled"
   />
-   
-  <!---->
-   
   <div
     class="bs-callout bs-callout-warning mt-3 empty-message empty-message"
   >
@@ -759,19 +714,14 @@ exports[`Paginated List Searchless states renders the list in an empty state, wh
   <div
     class="row-content-block second-block d-sm-flex justify-content-between flex-row-reverse"
   >
-     
     <gl-search-box-by-type-stub
       clearbuttontitle="Clear"
       value=""
     />
   </div>
-    
   <ul
     class="list-group list-group-flush list-unstyled"
   />
-   
-  <!---->
-   
   <div
     class="bs-callout bs-callout-warning mt-3 empty-message empty-message"
   >
@@ -787,13 +737,11 @@ exports[`Paginated List Searchless states renders the list with nested items, wh
   <div
     class="row-content-block second-block d-sm-flex justify-content-between flex-row-reverse"
   >
-     
     <gl-search-box-by-type-stub
       clearbuttontitle="Clear"
       value=""
     />
   </div>
-    
   <ul
     class="list-group list-group-flush list-unstyled"
   >
@@ -824,7 +772,6 @@ exports[`Paginated List Searchless states renders the list with nested items, wh
       </div>
     </li>
   </ul>
-   
   <gl-pagination-stub
     align="left"
     class="d-flex justify-content-center prepend-top-default"
@@ -841,8 +788,6 @@ exports[`Paginated List Searchless states renders the list with nested items, wh
     totalitems="2"
     value="1"
   />
-   
-  <!---->
 </div>
 `;
 
@@ -851,13 +796,11 @@ exports[`Paginated List props filter filters on default "id" key 1`] = `
   <div
     class="row-content-block second-block d-sm-flex justify-content-between flex-row-reverse"
   >
-     
     <gl-search-box-by-type-stub
       clearbuttontitle="Clear"
       value=""
     />
   </div>
-    
   <ul
     class="list-group list-group-flush list-unstyled"
   >
@@ -875,7 +818,6 @@ exports[`Paginated List props filter filters on default "id" key 1`] = `
       </div>
     </li>
   </ul>
-   
   <gl-pagination-stub
     align="left"
     class="d-flex justify-content-center prepend-top-default"
@@ -892,8 +834,6 @@ exports[`Paginated List props filter filters on default "id" key 1`] = `
     totalitems="1"
     value="1"
   />
-   
-  <!---->
 </div>
 `;
 
@@ -902,13 +842,11 @@ exports[`Paginated List props filter filters on provided "myKey" key 1`] = `
   <div
     class="row-content-block second-block d-sm-flex justify-content-between flex-row-reverse"
   >
-     
     <gl-search-box-by-type-stub
       clearbuttontitle="Clear"
       value=""
     />
   </div>
-    
   <ul
     class="list-group list-group-flush list-unstyled"
   >
@@ -926,7 +864,6 @@ exports[`Paginated List props filter filters on provided "myKey" key 1`] = `
       </div>
     </li>
   </ul>
-   
   <gl-pagination-stub
     align="left"
     class="d-flex justify-content-center prepend-top-default"
@@ -943,8 +880,6 @@ exports[`Paginated List props filter filters on provided "myKey" key 1`] = `
     totalitems="1"
     value="1"
   />
-   
-  <!---->
 </div>
 `;
 
@@ -953,13 +888,11 @@ exports[`Paginated List props filter filters with provided filter function 1`] =
   <div
     class="row-content-block second-block d-sm-flex justify-content-between flex-row-reverse"
   >
-     
     <gl-search-box-by-type-stub
       clearbuttontitle="Clear"
       value=""
     />
   </div>
-    
   <ul
     class="list-group list-group-flush list-unstyled"
   >
@@ -977,7 +910,6 @@ exports[`Paginated List props filter filters with provided filter function 1`] =
       </div>
     </li>
   </ul>
-   
   <gl-pagination-stub
     align="left"
     class="d-flex justify-content-center prepend-top-default"
@@ -994,7 +926,5 @@ exports[`Paginated List props filter filters with provided filter function 1`] =
     totalitems="1"
     value="1"
   />
-   
-  <!---->
 </div>
 `;