@gitlab/ui 43.16.0 → 43.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "43.16.0",
+  "version": "43.17.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -112,9 +112,9 @@
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^29.0.2",
-    "jest-circus": "29.0.2",
-    "jest-environment-jsdom": "29.0.2",
+    "jest": "^29.0.3",
+    "jest-circus": "29.0.3",
+    "jest-environment-jsdom": "29.0.3",
     "jest-serializer-vue": "^2.0.2",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",

package/src/components/base/button/button.spec.js

@@ -174,7 +174,7 @@ describe('button component', () => {
 
       // GlSafeLinkDirective is actually responsible to handle the unsafe URLs
       // and GlButton uses this directive to make all the links secure by default
-      it('should set href to blank ', () => {
+      it('should set href to blank', () => {
         buildWrapper({
           propsData: {
             href: unsafeUrl,

package/src/components/base/datepicker/datepicker.spec.js

@@ -35,7 +35,7 @@ describe('datepicker component', () => {
     jest.setSystemTime(currentDate.getTime());
   });
 
-  it("does not set default date when 'value' and 'defaultDate' props aren't set ", () => {
+  it("does not set default date when 'value' and 'defaultDate' props aren't set", () => {
     mountWithOptions();
 
     expect(Pikaday).toHaveBeenCalled();

package/src/components/base/dropdown/dropdown.spec.js

@@ -311,7 +311,7 @@ describe('new dropdown', () => {
         });
       });
 
-      describe('with showClearAll=true ', () => {
+      describe('with showClearAll=true', () => {
         beforeEach(() => {
           buildWrapper({ showClearAll: true });
         });

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

@@ -134,7 +134,7 @@
     }
 
     .custom-control-input:checked:disabled ~ .custom-control-label,
-    .custom-control-input:indeterminate:disabled ~ .custom-control-label {
+    .custom-control-input[type='checkbox']:indeterminate:disabled ~ .custom-control-label {
       &::before {
         @include gl-bg-gray-100;
         @include gl-border-gray-100;

package/src/components/base/form/form_checkbox/form_checkbox.stories.js

@@ -6,22 +6,34 @@ const components = {
   GlFormCheckboxGroup,
 };
 
+const data = () => ({
+  selected: ['checked-option', 'checked-disabled-option'],
+  indeterminate: true,
+});
+
 const template = `
-  <gl-form-checkbox-group>
+<div>
+  <gl-form-checkbox-group v-model="selected">
+    <gl-form-checkbox value="option">Option</gl-form-checkbox>
+    <gl-form-checkbox value="slot-option">
+      Slot option
+      <template #help> With help text </template>
+    </gl-form-checkbox>
+    <gl-form-checkbox value="checked-option">Checked option</gl-form-checkbox>
+    <gl-form-checkbox value="checked-disabled-option" :disabled="true">Checked disabled option</gl-form-checkbox>
+    <gl-form-checkbox value="disabled-option" :disabled="true">Disabled option</gl-form-checkbox>
     <template #first>
-      <gl-form-checkbox value="Slot option">
-        Slot option with help text
-        <template #help>
-          Help text
-        </template>
-      </gl-form-checkbox>
+      <gl-form-checkbox value="first">First</gl-form-checkbox>
     </template>
-    <gl-form-checkbox value="Last option">Last option</gl-form-checkbox>
   </gl-form-checkbox-group>
+  <gl-form-checkbox value="indeterminate-option" :indeterminate="indeterminate">Indeterminate option</gl-form-checkbox>
+  <gl-form-checkbox value="indeterminate-disabled-option" :indeterminate="indeterminate" :disabled="true">Indeterminate disabled option</gl-form-checkbox>
+</div>
 `;
 
 const Template = () => ({
   components,
+  data,
   template,
 });
 

package/src/components/base/form/form_radio/form_radio.stories.js

@@ -2,31 +2,44 @@ import { GlFormRadio } from '../../../../index';
 import readme from './form_radio.md';
 
 const defaultOptions = [
-  { value: 'Pizza', text: 'Pizza' },
-  { value: 'Tacos', text: 'Tacos' },
-  { value: 'Burger', text: 'Burger', disabled: true },
+  { value: 'Option', name: 'radio-group' },
+  { value: 'Slot option', name: 'radio-group', slot: 'With help text' },
+  { value: 'Checked option', name: 'radio-group' },
+  {
+    value: 'Checked disabled option',
+    disabled: true,
+    name: 'last-radio-group',
+    checked: 'Checked disabled option',
+  },
+  { value: 'Disabled option', disabled: true, name: 'radio-group' },
+  { value: 'Indeterminate option', name: 'indeterminate-radio-group' },
+  { value: 'Indeterminate disabled option', disabled: true, name: 'indeterminate-radio-group' },
 ];
 
-const generateProps = ({ name = 'radio-group-name', checked = defaultOptions[0].value } = {}) => ({
-  name,
+const template = `
+<div>
+  <gl-form-radio
+    v-for="option in options"
+    :key="option.value"
+    :checked="option.checked || checked"
+    :disabled="option.disabled"
+    :name="option.name || name"
+    :value="option.value"
+  >
+    {{ option.value }}
+    <template v-if="option.slot" #help>{{ option.slot }}</template>
+  </gl-form-radio>
+</div>
+`;
+
+const generateProps = ({ checked = 'Checked option' } = {}) => ({
   checked,
 });
 
 const Template = (args) => ({
   components: { GlFormRadio },
   props: Object.keys(args),
-  template: `
-      <div>
-        <gl-form-radio
-          v-for="option in options"
-          :key="option.value"
-          :checked="checked"
-          :value="option.value"
-          :disabled="option.disabled"
-          :name="name"
-        >{{ option.text }}</gl-form-radio>
-      </div>
-    `,
+  template,
   data() {
     return {
       options: defaultOptions,

package/src/components/base/link/link.spec.js

@@ -64,7 +64,7 @@ describe('link component', () => {
 
     // GlSafeLinkDirective is actually responsible to handle the unsafe URLs
     // and GlLink uses this directive to make all the links secure by default
-    it('should set href to blank ', () => {
+    it('should set href to blank', () => {
       createWrapper({
         propsData: {
           href: unsafeUrl,

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -135,7 +135,7 @@ describe('base dropdown', () => {
       buildWrapper();
     });
 
-    it('should toggle menu visibility on toggle button click ', async () => {
+    it('should toggle menu visibility on toggle button click', async () => {
       const toggle = findDropdownToggle();
       const menu = findDropdownMenu();
 

package/src/components/base/new_dropdowns/listbox/listbox.spec.js

@@ -52,7 +52,7 @@ describe('GlListbox', () => {
   });
 
   describe('ARIA attributes', () => {
-    it('should provide `toggleId` to the base dropdown and reference it in`aria-labelledby` attribute of the list container` ', async () => {
+    it('should provide `toggleId` to the base dropdown and reference it in`aria-labelledby` attribute of the list container`', async () => {
       await buildWrapper();
       expect(findBaseDropdown().props('toggleId')).toBe(
         findListContainer().attributes('aria-labelledby')
@@ -70,7 +70,7 @@ describe('GlListbox', () => {
         });
       });
 
-      it('should render items as selected when `selected` provided ', () => {
+      it('should render items as selected when `selected` provided', () => {
         expect(findListboxItems().at(1).props('isSelected')).toBe(true);
         expect(findListboxItems().at(2).props('isSelected')).toBe(true);
       });
@@ -106,7 +106,7 @@ describe('GlListbox', () => {
         expect(wrapper).toHaveLoggedVueErrors();
       });
 
-      it('should render item as selected when `selected` provided ', () => {
+      it('should render item as selected when `selected` provided', () => {
         expect(findListboxItems().at(1).props('isSelected')).toBe(true);
       });
 
@@ -124,7 +124,7 @@ describe('GlListbox', () => {
         buildWrapper({ selected, items: mockGroups });
       });
 
-      it('should render item as selected when `selected` provided ', () => {
+      it('should render item as selected when `selected` provided', () => {
         expect(findListboxItems().at(3).props('isSelected')).toBe(true);
       });
 

package/src/components/base/new_dropdowns/listbox/listbox_item.spec.js

@@ -17,7 +17,7 @@ describe('GlListboxItem', () => {
   const findCheckIcon = () => findItem().findComponent(GLIcon);
 
   describe('toggleSelection', () => {
-    describe('when selected ', () => {
+    describe('when selected', () => {
       beforeEach(() => {
         buildWrapper({ isSelected: true });
       });
@@ -48,7 +48,7 @@ describe('GlListboxItem', () => {
       });
     });
 
-    describe('when not selected ', () => {
+    describe('when not selected', () => {
       beforeEach(() => {
         buildWrapper({ isSelected: false });
       });

package/src/components/charts/area/area.spec.js

@@ -46,7 +46,7 @@ describe('area component', () => {
   });
 
   describe('Annotations tooltips', () => {
-    it('are hidden by default ', async () => {
+    it('are hidden by default', async () => {
       createShallowWrapper();
 
       await wrapper.vm.$nextTick();
@@ -54,7 +54,7 @@ describe('area component', () => {
       expect(findAnnotationsTooltip().exists()).toBe(false);
     });
 
-    it('are displayed if passed via annotations props ', async () => {
+    it('are displayed if passed via annotations props', async () => {
       createShallowWrapper({
         annotations: [
           {
@@ -69,7 +69,7 @@ describe('area component', () => {
       expect(findAnnotationsTooltip().exists()).toBe(true);
     });
 
-    it('are displayed if passed via option props ', async () => {
+    it('are displayed if passed via option props', async () => {
       createShallowWrapper({
         option: {
           series: [

package/src/components/charts/line/line.spec.js

@@ -45,7 +45,7 @@ describe('line component', () => {
   });
 
   describe('Annotations tooltips', () => {
-    it('are hidden by default ', async () => {
+    it('are hidden by default', async () => {
       createShallowWrapper();
 
       await wrapper.vm.$nextTick();
@@ -53,7 +53,7 @@ describe('line component', () => {
       expect(findAnnotationsTooltip().exists()).toBe(false);
     });
 
-    it('are displayed if passed via annotations props ', async () => {
+    it('are displayed if passed via annotations props', async () => {
       createShallowWrapper({
         annotations: [
           {
@@ -68,7 +68,7 @@ describe('line component', () => {
       expect(findAnnotationsTooltip().exists()).toBe(true);
     });
 
-    it('are displayed if passed via option props ', async () => {
+    it('are displayed if passed via option props', async () => {
       createShallowWrapper({
         option: {
           series: [

package/src/directives/outside/outside.spec.js

@@ -252,7 +252,7 @@ describe('outside directive', () => {
     });
   });
 
-  describe('click event fired before directive binding ', () => {
+  describe('click event fired before directive binding', () => {
     // This *attempts* to simulate something like the following situation:
     //
     //     <button @click="show = true">Show</button>

package/src/scss/utilities.scss

@@ -6308,6 +6308,16 @@
     margin-left: #{$gl-spacing-scale-5} !important;
   }
 }
+.gl-gap-y-3 {
+  > * + * {
+    margin-top: #{$gl-spacing-scale-3};
+  }
+}
+.gl-gap-y-3\! {
+  > * + * {
+    margin-top: #{$gl-spacing-scale-3} !important;
+  }
+}
 .gl-gap-3 {
   gap: $gl-spacing-scale-3;
 }

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

@@ -813,6 +813,12 @@
   }
 }
 
+@mixin gl-gap-y-3 {
+  > * + * {
+    margin-top: #{$gl-spacing-scale-3};
+  }
+}
+
 @mixin gl-gap-3 {
   gap: $gl-spacing-scale-3;
 }