@gitlab/ui 39.7.1 → 40.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "39.7.1",
+  "version": "40.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -83,7 +83,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "12.0.1",
     "@gitlab/stylelint-config": "4.0.0",
-    "@gitlab/svgs": "2.11.0",
+    "@gitlab/svgs": "2.13.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/scss_to_js/scss_variables.js

@@ -294,6 +294,7 @@ export const glTransitionDurationSlow = '0.4s'
 export const glTransitionDurationMedium = '0.2s'
 export const outlineOffset = '1px'
 export const outlineWidth = '2px'
+export const outline = '3px'
 export const focusRing = '0 0 0 1px #fff, 0 0 0 3px #428fdc'
 export const focusRingInset = 'inset 0 0 0 3px #fff, inset 0 0 0 1px #fff'
 export const focusRingDark = '0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 3px #63a6e9'

package/scss_to_js/scss_variables.json

@@ -1531,6 +1531,11 @@
       "value": "2px",
       "compiledValue": "2px"
     },
+    {
+      "name": "$outline",
+      "value": "#{$outline-offset + $outline-width}",
+      "compiledValue": "3px"
+    },
     {
       "name": "$focus-ring",
       "value": "0 0 0 $outline-offset $white, 0 0 0 #{$outline-offset + $outline-width} $blue-400",

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

@@ -47,10 +47,18 @@
   }
 }
 
-.gl-form-input {
-  @each $name, $size in $gl-form-input-sizes {
-    &-#{$name} {
-      max-width: $size;
+@each $name, $size in $gl-form-input-sizes {
+  .gl-form-input-#{$name} {
+    max-width: $size;
+  }
+
+  @each $breakpointName, $breakpointSize in $gl-form-input-sizes {
+    @if $breakpointName != xs {
+      .gl-#{$breakpointName}-form-input-#{$name} {
+        @include gl-media-breakpoint-up($breakpointName) {
+          max-width: $size;
+        }
+      }
     }
   }
 }

package/src/components/base/form/form_input/form_input.spec.js

@@ -15,25 +15,54 @@ describe('GlFormInput', () => {
   };
 
   describe('size prop', () => {
-    // Exclude the default null value
-    const sizes = Object.values(formInputSizes).filter(Boolean);
+    describe('when number is passed', () => {
+      // Exclude the default null value
+      const sizes = Object.values(formInputSizes).filter(Boolean);
 
-    it.each(sizes)('adds correct class for size %s', (size) => {
-      createComponent({ size });
+      it.each(sizes)('adds correct class for size %s', (size) => {
+        createComponent({ size });
 
-      expect(wrapper.classes()).toEqual(['gl-form-input', `gl-form-input-${size}`]);
-    });
+        expect(wrapper.classes()).toEqual(['gl-form-input', `gl-form-input-${size}`]);
+      });
+
+      it('does not add a size class if not given the size prop', () => {
+        createComponent();
+
+        expect(wrapper.classes()).toEqual(['gl-form-input']);
+      });
 
-    it('does not add a size class if not given the size prop', () => {
-      createComponent();
+      it('does not add a size class if passed null', () => {
+        createComponent({ size: null });
 
-      expect(wrapper.classes()).toEqual(['gl-form-input']);
+        expect(wrapper.classes()).toEqual(['gl-form-input']);
+      });
     });
 
-    it('does not add a size class if passed null', () => {
-      createComponent({ size: null });
+    describe('when object is passed', () => {
+      describe('when `default` key is provided', () => {
+        it('adds responsive CSS classes and base class', () => {
+          createComponent({ size: { default: 'md', md: 'lg', lg: 'xl' } });
+
+          expect(wrapper.classes()).toEqual([
+            'gl-form-input',
+            'gl-form-input-md',
+            'gl-md-form-input-lg',
+            'gl-lg-form-input-xl',
+          ]);
+        });
+      });
+
+      describe('when `default` key is not provided', () => {
+        it('adds responsive CSS classes', () => {
+          createComponent({ size: { md: 'lg', lg: 'xl' } });
 
-      expect(wrapper.classes()).toEqual(['gl-form-input']);
+          expect(wrapper.classes()).toEqual([
+            'gl-form-input',
+            'gl-md-form-input-lg',
+            'gl-lg-form-input-xl',
+          ]);
+        });
+      });
     });
   });
 

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

@@ -57,6 +57,25 @@ export const Sizes = (args, { argTypes }) => ({
 });
 Sizes.args = {};
 
+export const ResponsiveSizes = (args, { argTypes }) => ({
+  components: { GlFormInput },
+  props: Object.keys(argTypes),
+  template: `
+      <div>
+        <gl-form-input
+          :size="{ default: 'md', md: 'lg', lg: 'xl' }"
+          value="With \`default\` key"
+        />
+        <gl-form-input
+          class="gl-mt-4"
+          :size="{ md: 'lg', lg: 'xl' }"
+          value="Without \`default\` key"
+        />
+      </div>
+    `,
+});
+ResponsiveSizes.args = {};
+
 export default {
   title: 'base/form/form-input',
   component: GlFormInput,

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

@@ -1,5 +1,7 @@
 <script>
+import { isObject } from 'lodash';
 import { BFormInput } from 'bootstrap-vue';
+
 import { formInputSizes } from '../../../../utils/constants';
 
 const MODEL_PROP = 'value';
@@ -19,17 +21,34 @@ export default {
      * Maximum width of the input
      */
     size: {
-      type: String,
+      type: [String, Object],
       required: false,
       default: null,
-      validator: (value) => Object.values(formInputSizes).includes(value),
+      validator: (value) => {
+        const sizes = isObject(value) ? Object.values(value) : [value];
+
+        return sizes.every((size) => Object.values(formInputSizes).includes(size));
+      },
     },
   },
   computed: {
     cssClasses() {
-      return {
-        [`gl-form-input-${this.size}`]: this.size !== null,
-      };
+      if (this.size === null) {
+        return [];
+      }
+
+      if (isObject(this.size)) {
+        const { default: defaultSize, ...nonDefaultSizes } = this.size;
+
+        return [
+          ...(defaultSize ? [`gl-form-input-${defaultSize}`] : []),
+          ...Object.entries(nonDefaultSizes).map(
+            ([breakpoint, size]) => `gl-${breakpoint}-form-input-${size}`
+          ),
+        ];
+      }
+
+      return [`gl-form-input-${this.size}`];
     },
     listeners() {
       return {

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

@@ -67,5 +67,5 @@ If you want to use custom template for rendering the listbox item, use the `list
             </span>
           </span>
       </template>
-</gl-litsbox>
+</gl-listbox>
 ```

package/src/index.js

@@ -28,10 +28,7 @@ export { default as GlPaginatedList } from './components/base/paginated_list/pag
 export { default as GlPopover } from './components/base/popover/popover.vue';
 export { default as GlProgressBar } from './components/base/progress_bar/progress_bar.vue';
 export { default as GlToken } from './components/base/token/token.vue';
-export {
-  default as GlSkeletonLoading,
-  default as GlDeprecatedSkeletonLoading,
-} from './components/base/skeleton_loading/skeleton_loading.vue';
+export { default as GlDeprecatedSkeletonLoading } from './components/base/skeleton_loading/skeleton_loading.vue';
 export { default as GlBadge } from './components/base/badge/badge.vue';
 export { default as GlBanner } from './components/base/banner/banner.vue';
 export { default as GlButton } from './components/base/button/button.vue';

package/src/scss/utilities.scss

@@ -3676,6 +3676,14 @@
   overflow-wrap: break-word !important
 }
 
+.gl-overflow-wrap-anywhere {
+  overflow-wrap: anywhere
+}
+
+.gl-overflow-wrap-anywhere\! {
+  overflow-wrap: anywhere !important
+}
+
 .gl-overflow-scroll {
   overflow: scroll
 }
@@ -5564,12 +5572,24 @@
 .gl-mb-2\! {
   margin-bottom: $gl-spacing-scale-2 !important;
 }
+.gl-mb-n2 {
+  margin-bottom: -$gl-spacing-scale-2;
+}
+.gl-mb-n2\! {
+  margin-bottom: -$gl-spacing-scale-2 !important;
+}
 .gl-mb-3 {
   margin-bottom: $gl-spacing-scale-3;
 }
 .gl-mb-3\! {
   margin-bottom: $gl-spacing-scale-3 !important;
 }
+.gl-mb-n3 {
+  margin-bottom: -$gl-spacing-scale-3;
+}
+.gl-mb-n3\! {
+  margin-bottom: -$gl-spacing-scale-3 !important;
+}
 .gl-mb-4 {
   margin-bottom: $gl-spacing-scale-4;
 }
@@ -6002,6 +6022,16 @@
   margin-left: $gl-spacing-scale-3 !important;
   }
 }
+.gl-sm-ml-7 {
+  @include gl-media-breakpoint-up(sm) {
+  margin-left: $gl-spacing-scale-7;
+  }
+}
+.gl-sm-ml-7\! {
+  @include gl-media-breakpoint-up(sm) {
+  margin-left: $gl-spacing-scale-7 !important;
+  }
+}
 .gl-sm-mt-0 {
   @include gl-media-breakpoint-up(sm) {
   margin-top: 0;

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

@@ -24,6 +24,10 @@
   overflow-wrap: break-word;
 }
 
+@mixin gl-overflow-wrap-anywhere {
+  overflow-wrap: anywhere;
+}
+
 @mixin gl-overflow-scroll {
   overflow: scroll;
 }

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

@@ -486,10 +486,18 @@
   margin-bottom: $gl-spacing-scale-2;
 }
 
+@mixin gl-mb-n2 {
+  margin-bottom: -$gl-spacing-scale-2;
+}
+
 @mixin gl-mb-3 {
   margin-bottom: $gl-spacing-scale-3;
 }
 
+@mixin gl-mb-n3 {
+  margin-bottom: -$gl-spacing-scale-3;
+}
+
 @mixin gl-mb-4 {
   margin-bottom: $gl-spacing-scale-4;
 }
@@ -787,6 +795,12 @@
   }
 }
 
+@mixin gl-sm-ml-7 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-ml-7;
+  }
+}
+
 @mixin gl-sm-mt-0 {
   @include gl-media-breakpoint-up(sm) {
     @include gl-mt-0;

package/src/scss/variables.scss

@@ -420,6 +420,7 @@ $gl-transition-duration-medium: 0.2s;
 // Focus ring
 $outline-offset: 1px;
 $outline-width: 2px;
+$outline: #{$outline-offset + $outline-width};
 $focus-ring: 0 0 0 $outline-offset $white, 0 0 0 #{$outline-offset + $outline-width} $blue-400;
 $focus-ring-inset: inset 0 0 0 #{$outline-width + $outline-offset} $white,
   inset 0 0 0 $outline-offset $white;