@gitlab/ui 43.11.0 → 43.12.0

package/package.json

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

package/scss_to_js/scss_variables.js

@@ -26,6 +26,7 @@ export const breakpointLg = '992px'
 export const breakpointXl = '1200px'
 export const breakpoints = '(xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)'
 export const limitedLayoutWidth = '990px'
+export const containerXl = '1280px'
 export const black = '#000'
 export const blackNormal = '#333'
 export const white = '#fff'

package/scss_to_js/scss_variables.json

@@ -167,6 +167,11 @@
       "value": "990px",
       "compiledValue": "990px"
     },
+    {
+      "name": "$container-xl",
+      "value": "1280px",
+      "compiledValue": "1280px"
+    },
     {
       "name": "$black",
       "value": "#000",

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

@@ -79,6 +79,7 @@ const generateProps = ({
   textSrOnly = defaultValue('textSrOnly'),
   icon = '',
   multiple = defaultValue('multiple'),
+  isCheckCentered = defaultValue('isCheckCentered'),
   ariaLabelledby,
   startOpened = true,
 } = {}) => ({
@@ -94,6 +95,7 @@ const generateProps = ({
   textSrOnly,
   icon,
   multiple,
+  isCheckCentered,
   ariaLabelledby,
   startOpened,
 });
@@ -120,6 +122,7 @@ const template = (content, label = '') => `
       :text-sr-only="textSrOnly"
       :icon="icon"
       :multiple="multiple"
+      :is-check-centered="isCheckCentered"
       :aria-labelledby="ariaLabelledby"
     >
       ${content}
@@ -183,7 +186,10 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
                                 </div>
                               </template>`),
 });
-HeaderAndFooter.args = generateProps({ toggleText: 'Header and Footer', multiple: true });
+HeaderAndFooter.args = generateProps({
+  toggleText: 'Header and Footer',
+  multiple: true,
+});
 HeaderAndFooter.decorators = [makeContainer({ height: '370px' })];
 
 export const CustomListItem = (args, { argTypes }) => ({
@@ -225,6 +231,7 @@ export const CustomListItem = (args, { argTypes }) => ({
         :text-sr-only="textSrOnly"
         :icon="icon"
         :multiple="multiple"
+        :is-check-centered="isCheckCentered"
         :aria-labelledby="ariaLabelledby"
       >
         <template #list-item="{ item }">
@@ -247,6 +254,7 @@ CustomListItem.args = generateProps({
     { value: 'markian', text: 'Mark Florian', secondaryText: '@markian', icon: 'bin' },
   ],
   multiple: true,
+  isCheckCentered: true,
 });
 CustomListItem.decorators = [makeContainer({ height: '200px' })];
 

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -152,6 +152,14 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Center selected item checkmark
+     */
+    isCheckCentered: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     /**
      * The `aria-labelledby` attribute value for the toggle button
      */
@@ -335,6 +343,7 @@ export default {
         :key="item.value"
         :is-selected="isSelected(item)"
         :is-focused="nextFocusedItemIndex === index"
+        :is-check-centered="isCheckCentered"
         @select="onSelect(item, $event)"
       >
         <!-- @slot Custom template of the listbox item -->

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

@@ -80,6 +80,31 @@ describe('GlListboxItem', () => {
     });
   });
 
+  describe('checkbox', () => {
+    describe('is NOT centered', () => {
+      beforeEach(() => {
+        buildWrapper({ isSelected: true });
+      });
+
+      it('should not center check icon by default', () => {
+        expect(findCheckIcon().classes()).toEqual(
+          expect.arrayContaining(['gl-mt-3', 'gl-align-self-start'])
+        );
+      });
+    });
+
+    describe('is centered', () => {
+      beforeEach(() => {
+        buildWrapper({ isSelected: true, isCheckCentered: true });
+      });
+      it('should center the check icon', () => {
+        expect(findCheckIcon().classes()).not.toEqual(
+          expect.arrayContaining(['gl-mt-3', 'gl-align-self-start'])
+        );
+      });
+    });
+  });
+
   describe('tabindex', () => {
     it('should set tabindex to `-1` when item is not focused', () => {
       buildWrapper({ isFocused: false });

package/src/components/base/new_dropdowns/listbox/listbox_item.vue

@@ -18,6 +18,20 @@ export default {
       default: false,
       required: false,
     },
+    isCheckCentered: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    checkedClasses() {
+      if (this.isCheckCentered) {
+        return '';
+      }
+
+      return 'gl-mt-3 gl-align-self-start';
+    },
   },
   methods: {
     toggleSelection() {
@@ -48,8 +62,11 @@ export default {
       <gl-icon
         name="mobile-issue-close"
         data-testid="dropdown-item-checkbox"
-        class="gl-mt-3 gl-align-self-start"
-        :class="['gl-new-dropdown-item-check-icon', { 'gl-visibility-hidden': !isSelected }]"
+        :class="[
+          'gl-new-dropdown-item-check-icon',
+          { 'gl-visibility-hidden': !isSelected },
+          checkedClasses,
+        ]"
       />
       <span class="gl-new-dropdown-item-text-wrapper">
         <slot></slot>

package/src/scss/utilities.scss

@@ -4559,6 +4559,14 @@
   max-width: $limited-layout-width !important;
 }
 
+.gl-max-w-container-xl {
+  max-width: $container-xl;
+}
+
+.gl-max-w-container-xl\! {
+  max-width: $container-xl !important;
+}
+
 .gl-h-auto {
   height: auto;
 }

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

@@ -155,6 +155,10 @@
   max-width: $limited-layout-width;
 }
 
+@mixin gl-max-w-container-xl {
+  max-width: $container-xl;
+}
+
 @mixin gl-h-auto {
   height: auto;
 }

package/src/scss/variables.scss

@@ -41,6 +41,7 @@ $breakpoints: (
 
 // Max widths
 $limited-layout-width: 990px !default;
+$container-xl: 1280px !default;
 
 // Color schema
 $black: #000 !default;