@gitlab/ui 32.26.0 → 32.29.1

package/package.json

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

package/scss_to_js/scss_variables.js

@@ -15,10 +15,11 @@ export const glSpacingScale12 = '5rem'
 export const glSpacingScale13 = '6rem'
 export const glSpacingScale15 = '7.5rem'
 export const glSpacingScale20 = '10rem'
-export const breakpointSm = '36rem'
-export const breakpointMd = '48rem'
-export const breakpointLg = '62rem'
-export const breakpointXl = '75rem'
+export const breakpointSm = '576px'
+export const breakpointMd = '768px'
+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 black = '#000'
 export const blackNormal = '#333'

package/scss_to_js/scss_variables.json

@@ -87,23 +87,55 @@
     },
     {
       "name": "$breakpoint-sm",
-      "value": "px-to-rem(576px)",
-      "compiledValue": "36rem"
+      "value": "576px",
+      "compiledValue": "576px"
     },
     {
       "name": "$breakpoint-md",
-      "value": "px-to-rem(768px)",
-      "compiledValue": "48rem"
+      "value": "768px",
+      "compiledValue": "768px"
     },
     {
       "name": "$breakpoint-lg",
-      "value": "px-to-rem(992px)",
-      "compiledValue": "62rem"
+      "value": "992px",
+      "compiledValue": "992px"
     },
     {
       "name": "$breakpoint-xl",
-      "value": "px-to-rem(1200px)",
-      "compiledValue": "75rem"
+      "value": "1200px",
+      "compiledValue": "1200px"
+    },
+    {
+      "name": "$breakpoints",
+      "value": "( xs: 0, sm: $breakpoint-sm, md: $breakpoint-md, lg: $breakpoint-lg, xl: $breakpoint-xl, )",
+      "mapValue": [
+        {
+          "name": "xs",
+          "value": "0",
+          "compiledValue": "0"
+        },
+        {
+          "name": "sm",
+          "value": "$breakpoint-sm",
+          "compiledValue": "576px"
+        },
+        {
+          "name": "md",
+          "value": "$breakpoint-md",
+          "compiledValue": "768px"
+        },
+        {
+          "name": "lg",
+          "value": "$breakpoint-lg",
+          "compiledValue": "992px"
+        },
+        {
+          "name": "xl",
+          "value": "$breakpoint-xl",
+          "compiledValue": "1200px"
+        }
+      ],
+      "compiledValue": "(xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)"
     },
     {
       "name": "$limited-layout-width",

package/src/components/base/banner/banner.stories.js

@@ -11,6 +11,7 @@ const template = `
       :button-link="buttonLink"
       :svg-path="svgPath"
       :variant="variant"
+      :embedded="embedded"
     >
       <p>GitLab Service Desk is a simple way to allow people to create issues in your GitLab instance without needing their own user account. It provides a unique email address for end users to create issues in a project, and replies can be sent either though the GitLab interface or by email. End users will only see the thread though email.</p>
     </gl-banner>
@@ -22,12 +23,14 @@ const generateProps = ({
   buttonLink = 'https://gitlab.com',
   svgPath = serviceDeskCalloutSvg,
   variant = GlBanner.props.variant.default,
+  embedded = false,
 } = {}) => ({
   title,
   buttonText,
   buttonLink,
   svgPath,
   variant,
+  embedded,
 });
 
 const Template = (args, { argTypes }) => ({
@@ -51,6 +54,11 @@ Introduction.args = generateProps({
   variant: bannerVariants[1],
 });
 
+export const Embedded = Template.bind({});
+Embedded.args = generateProps({
+  embedded: true,
+});
+
 export const WithActions = (args, { argTypes }) => ({
   components: {
     GlBanner,

package/src/components/base/banner/banner.vue

@@ -51,6 +51,14 @@ export default {
         return bannerVariants.includes(value);
       },
     },
+    /**
+     * Removes the border for banners embedded in content.
+     */
+    embedded: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     isIntroducing() {
@@ -83,7 +91,7 @@ export default {
 <template>
   <gl-card
     class="gl-px-8 gl-py-6 gl-line-height-20"
-    :class="{ 'gl-banner-introduction': isIntroducing }"
+    :class="{ 'gl-banner-introduction': isIntroducing, 'gl-border-none!': embedded }"
     body-class="gl-display-flex gl-p-0!"
   >
     <div v-if="svgPath" class="gl-banner-illustration">

package/src/components/base/pagination/pagination.scss

@@ -62,7 +62,7 @@
   }
 }
 
-@media (max-width: $breakpoint-sm) {
+@include gl-media-breakpoint-down(sm) {
   .gl-pagination {
     .prev-page-item,
     .next-page-item {

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

@@ -8,12 +8,14 @@ describe('toggle', () => {
   let wrapper;
 
   const label = 'toggle label';
+  const labelId = 'toggle-label-id';
   const helpText = 'help text';
 
   const createWrapper = (props = {}) => {
     wrapper = shallowMount(Toggle, {
       propsData: {
         label,
+        labelId,
         ...props,
       },
     });
@@ -24,7 +26,6 @@ describe('toggle', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   it('has role=switch', () => {
@@ -112,21 +113,25 @@ describe('toggle', () => {
 
   describe('label position', () => {
     describe.each`
-      state       | labelPosition                 | labelVisibility
-      ${'top'}    | ${toggleLabelPosition.top}    | ${true}
-      ${'left'}   | ${toggleLabelPosition.left}   | ${true}
-      ${'hidden'} | ${toggleLabelPosition.hidden} | ${false}
-    `('when $state', ({ labelPosition, labelVisibility }) => {
+      state       | labelPosition                 | hasGlSrOnlyClass
+      ${'top'}    | ${toggleLabelPosition.top}    | ${false}
+      ${'left'}   | ${toggleLabelPosition.left}   | ${false}
+      ${'hidden'} | ${toggleLabelPosition.hidden} | ${true}
+    `('when $state', ({ labelPosition, hasGlSrOnlyClass }) => {
       beforeEach(() => {
         createWrapper({ labelPosition });
       });
 
-      it(`${labelVisibility ? 'shows' : 'hides'} label`, () => {
-        expect(wrapper.find('[data-testid="toggle-label"]').exists()).toBe(labelVisibility);
+      it(`${hasGlSrOnlyClass ? 'adds' : 'does not add'} 'gl-sr-only' class to the label`, () => {
+        const cssClasses = wrapper.find('[data-testid="toggle-label"]').classes();
+
+        return hasGlSrOnlyClass
+          ? expect(cssClasses).toContain('gl-sr-only')
+          : expect(cssClasses).not.toContain('gl-sr-only');
       });
 
       it('has accessible name for the button', () => {
-        expect(findButton().attributes('aria-label')).toBe(label);
+        expect(findButton().attributes('aria-labelledby')).toBe(labelId);
       });
     });
   });

package/src/components/base/toggle/toggle.stories.js

@@ -9,6 +9,7 @@ const generateProps = ({
   disabled = defaultValue('disabled'),
   isLoading = defaultValue('isLoading'),
   label = 'Dark mode',
+  labelId = 'dark-mode-toggle',
   help = 'Toggle dark mode for the website',
   labelPosition = defaultValue('labelPosition'),
 } = {}) => ({
@@ -16,6 +17,7 @@ const generateProps = ({
   disabled,
   isLoading,
   label,
+  labelId,
   help,
   labelPosition,
 });
@@ -29,6 +31,7 @@ const Template = (args, { argTypes }) => ({
       v-model="value"
       :disabled="disabled"
       :help="help"
+      :label-id="labelId"
       :is-loading="isLoading"
       :label="label"
       :label-position="labelPosition"

package/src/components/base/toggle/toggle.vue

@@ -61,7 +61,14 @@ export default {
       default: undefined,
     },
     /**
-     * The label's position relative to the toggle.
+     * The id for the label. This id is used by the aria-labelledby attribute on the toggle button.
+     */
+    labelId: {
+      type: String,
+      required: true,
+    },
+    /**
+     * The label's position relative to the toggle. If 'hidden', the toggle will add the .gl-sr-only class so the label is still accessible to screen readers.
      */
     labelPosition: {
       type: String,
@@ -77,9 +84,6 @@ export default {
     icon() {
       return this.value ? 'mobile-issue-close' : 'close';
     },
-    shouldShowLabel() {
-      return this.label && this.labelPosition !== 'hidden';
-    },
     helpId() {
       return this.help ? `toggle-help-${this.uuid}` : undefined;
     },
@@ -110,38 +114,41 @@ export default {
 </script>
 
 <template>
-  <label class="gl-display-flex gl-flex-direction-column gl-mb-0 gl-w-max-content">
+  <div
+    class="gl-toggle-wrapper gl-display-flex gl-flex-direction-column gl-mb-0 gl-w-max-content"
+    :class="{ 'gl-toggle-label-inline': labelPosition === 'left', 'is-disabled': disabled }"
+  >
     <span
-      class="gl-toggle-wrapper"
-      :class="{ 'gl-toggle-label-inline': labelPosition === 'left', 'is-disabled': disabled }"
+      :id="labelId"
+      :class="{ 'gl-sr-only': labelPosition === 'hidden' }"
+      class="gl-toggle-label"
+      data-testid="toggle-label"
     >
-      <span v-if="shouldShowLabel" class="gl-toggle-label" data-testid="toggle-label">
-        <!-- @slot The toggle's label. -->
-        <slot name="label">{{ label }}</slot>
-      </span>
-      <input v-if="name" :name="name" :value="value" type="hidden" />
-      <button
-        role="switch"
-        :aria-checked="isChecked"
-        :aria-label="label"
-        :aria-describedby="helpId"
-        :class="{
-          'gl-toggle': true,
-          'is-checked': value,
-          'is-disabled': disabled,
-        }"
-        type="button"
-        @click.prevent="toggleFeature"
-      >
-        <gl-loading-icon v-if="isLoading" color="light" class="toggle-loading" />
-        <span v-else :class="{ 'toggle-icon': true, disabled: disabled }">
-          <gl-icon :name="icon" :size="16" />
-        </span>
-      </button>
+      <!-- @slot The toggle's label. -->
+      <slot name="label">{{ label }}</slot>
     </span>
+    <input v-if="name" :name="name" :value="value" type="hidden" />
+    <button
+      role="switch"
+      :aria-checked="isChecked"
+      :aria-labelledby="labelId"
+      :aria-describedby="helpId"
+      :class="{
+        'gl-toggle': true,
+        'is-checked': value,
+        'is-disabled': disabled,
+      }"
+      type="button"
+      @click.prevent="toggleFeature"
+    >
+      <gl-loading-icon v-if="isLoading" color="light" class="toggle-loading" />
+      <span v-else :class="{ 'toggle-icon': true, disabled: disabled }">
+        <gl-icon :name="icon" :size="16" />
+      </span>
+    </button>
     <span v-if="help" :id="helpId" class="gl-help-label" data-testid="toggle-help">
       <!-- @slot A help text to be shown below the toggle. -->
       <slot name="help">{{ help }}</slot>
     </span>
-  </label>
+  </div>
 </template>

package/src/scss/mixins.scss

@@ -33,8 +33,8 @@
   $breakpoint-min: $breakpoint-md,
   $breakpoint-max: $breakpoint-xl
 ) {
-  $breakpoint-range: ($breakpoint-max - $breakpoint-min) / 1rem;
   $property-range: ($property-max - $property-min) / 1rem;
+  $breakpoint-range: px-to-rem($breakpoint-max - $breakpoint-min) / 1rem;
 
   @media (min-width: $breakpoint-min) {
     #{$property}: calc(
@@ -68,3 +68,51 @@
 @mixin gl-bg-gradient-blur($direction, $color) {
   background-image: linear-gradient(to $direction, $transparent-rgba, $color 33%);
 }
+
+/**
+* Helper function for @media of at least the minimum
+* breakpoint width.
+*
+* @param $name Breakpoint name, such as `sm` or `md`.
+*/
+@mixin gl-media-breakpoint-up($name) {
+  $min: map-get($breakpoints, $name);
+  @if $min == null {
+    @error "#{$name} is not a valid breakpoint for this @media query.";
+  }
+  @if $min != 0 {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+/**
+* Helper function for @media of at most the maximum
+* breakpoint width.
+*
+* Note: Before using, consider using a mobile-first
+* approach, and define @media for larger breakpoints
+* using `gl-media-breakpoint-up` while using this rule as
+* the starting point instead.
+*
+* @param $name Breakpoint, such as `sm` or `md`. `xs` is not valid
+*/
+@mixin gl-media-breakpoint-down($name) {
+  $max: map-get($breakpoints, $name);
+  @if ($max == null or $max == 0) {
+    @error "#{$name} is not a valid breakpoint for this @media query.";
+  }
+  // The maximum value is reduced by 0.02px to work around the limitations of
+  // `min-` and `max-` prefixes and with fractional viewport sizes.
+  // See: https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+  // Use 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+  // See https://bugs.webkit.org/show_bug.cgi?id=178261
+  $breakpoint-max-range-precision: 0.02px;
+
+  @media (max-width: $max - $breakpoint-max-range-precision) {
+    @content;
+  }
+}

package/src/scss/mixins.spec.scss

@@ -0,0 +1,103 @@
+@import './mixins';
+@import './variables';
+@import 'true';
+
+@include describe('gl-fluid-font-size') {
+  @include it('returns fluid font-size') {
+    @include assert {
+      @include output {
+        @include gl-fluid-font-size(2rem, 3.5rem);
+      }
+      @include expect {
+        @media (min-width: 768px) {
+          // prettier-ignore
+          font-size: calc( 2rem + 1.5 * ((100vw - 768px) / 27));
+        }
+
+        @media (min-width: 1200px) {
+          font-size: 3.5rem;
+        }
+      }
+    }
+  }
+}
+
+@include describe('gl-fluid-line-height') {
+  @include it('returns fluid line-height') {
+    @include assert {
+      @include output {
+        @include gl-fluid-line-height(2rem, 3.5rem);
+      }
+      @include expect {
+        @media (min-width: 768px) {
+          // prettier-ignore
+          line-height: calc( 2rem + 1.5 * ((100vw - 768px) / 27));
+        }
+
+        @media (min-width: 1200px) {
+          line-height: 3.5rem;
+        }
+      }
+    }
+  }
+}
+
+@include describe('gl-media-breakpoint-up') {
+  @include it('returns no media query for xs') {
+    @include assert {
+      @include output {
+        @include gl-media-breakpoint-up(xs) {
+          color: $green-100;
+        }
+      }
+      @include expect {
+        color: $green-100;
+      }
+    }
+  }
+  @include it('returns min-width media query for sm') {
+    @include assert {
+      @include output {
+        @include gl-media-breakpoint-up(sm) {
+          color: $blue-100;
+        }
+      }
+      @include expect {
+        @media (min-width: '576px') {
+          color: $blue-100;
+        }
+      }
+    }
+  }
+}
+
+@include describe('gl-media-breakpoint-down') {
+  @include it('returns max-width media query for lg') {
+    @include assert {
+      @include output {
+        @include gl-media-breakpoint-down(lg) {
+          color: $red-100;
+        }
+      }
+      @include expect {
+        @media (max-width: '991.98px') {
+          color: $red-100;
+        }
+      }
+    }
+  }
+  @include it('returns max-width media query for md') {
+    @include assert {
+      @include output {
+        @include gl-media-breakpoint-down(md) {
+          color: $orange-100;
+        }
+      }
+      @include expect {
+        @media (max-width: '767.98px') {
+          color: $orange-100;
+        }
+      }
+    }
+  }
+}