@gitlab/ui 32.24.1 → 32.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.24.1",
+  "version": "32.28.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -83,7 +83,7 @@
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "9.4.0",
-    "@gitlab/stylelint-config": "2.3.0",
+    "@gitlab/stylelint-config": "2.6.0",
     "@gitlab/svgs": "1.218.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -142,8 +142,8 @@
     "sass-true": "^5.0.0",
     "start-server-and-test": "^1.10.6",
     "storybook-readme": "5.0.9",
-    "stylelint-config-prettier": "8.0.2",
-    "stylelint-prettier": "1.1.2",
+    "stylelint-config-prettier": "9.0.3",
+    "stylelint-prettier": "1.2.0",
     "vue": "^2.6.11",
     "vue-jest": "4.0.0-rc.0",
     "vue-loader": "^15.8.3",

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/breadcrumb/breadcrumb.scss

@@ -2,6 +2,7 @@
 $breadcrumb-max-width: $grid-size * 16;
 
 .gl-breadcrumbs {
+  @include gl-display-flex;
   @include gl-border-0;
   @include gl-inset-border-b-1-gray-200;
   @include gl-py-5;
@@ -20,10 +21,12 @@ $breadcrumb-max-width: $grid-size * 16;
 
 .gl-breadcrumb-separator {
   @include gl-display-inline-flex;
+  @include gl-absolute;
+  right: 0;
 
   > svg {
     @include gl-my-auto;
-    @include gl-mx-3;
+    @include gl-mx-2;
     @include gl-w-3;
     @include gl-text-gray-500;
     @include gl-fill-current-color;
@@ -31,7 +34,7 @@ $breadcrumb-max-width: $grid-size * 16;
 }
 
 .gl-breadcrumb-avatar-tile {
-  @include gl-mr-2;
+  @include gl-mr-3;
   @include gl-border-1;
   @include gl-border-solid;
   @include gl-border-gray-200;
@@ -42,8 +45,21 @@ $breadcrumb-max-width: $grid-size * 16;
 .gl-breadcrumb-item {
   @include gl-font-sm;
   @include gl-line-height-normal;
+  @include gl-relative;
+  @include gl-pr-6;
+
+  + .gl-breadcrumb-item {
+    @include gl-pl-0;
+
+    &::before {
+      content: '';
+      @include gl-display-none;
+    }
+  }
 
   > a {
+    @include gl-display-flex;
+    @include gl-align-items-center;
     @include gl-text-gray-500;
     @include media-breakpoint-down(xs) {
       @include str-truncated($breadcrumb-max-width);

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

@@ -6,10 +6,7 @@ const template = `
         :items="items"
     >
       <template #avatar>
-        <img class="gl-breadcrumb-avatar-tile" src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=15" width="15" height="15" />
-      </template>
-      <template #separator>
-        <gl-icon name="angle-right" />
+        <img class="gl-breadcrumb-avatar-tile" src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=16" width="16" height="16" />
       </template>
     </gl-breadcrumb>
   `;

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -1,10 +1,12 @@
 <script>
 import { BBreadcrumb, BBreadcrumbItem } from 'bootstrap-vue';
+import GlIcon from '../icon/icon.vue';
 
 export default {
   components: {
     BBreadcrumb,
     BBreadcrumbItem,
+    GlIcon,
   },
   inheritAttrs: false,
   props: {
@@ -23,13 +25,18 @@ export default {
       },
     },
   },
+  methods: {
+    isLastItem(items, index) {
+      return index === items.length - 1;
+    },
+  },
 };
 </script>
 <template>
   <div class="gl-breadcrumbs">
+    <!-- @slot The avatar to display. -->
+    <slot name="avatar"></slot>
     <b-breadcrumb class="gl-breadcrumb-list" v-bind="$attrs" v-on="$listeners">
-      <!-- @slot The avatar to display. -->
-      <slot name="avatar"></slot>
       <template v-for="(item, index) in items">
         <b-breadcrumb-item
           :key="index"
@@ -37,16 +44,20 @@ export default {
           :text="item.text"
           :href="item.href"
           :to="item.to"
-        />
-        <span
-          v-if="index != items.length - 1"
-          :key="`index ${item.text}`"
-          class="gl-breadcrumb-separator"
-          data-testid="separator"
         >
-          <!-- @slot The separator to display. -->
-          <slot name="separator"></slot>
-        </span>
+          <span>{{ item.text }}</span>
+          <span
+            v-if="!isLastItem(items, index)"
+            :key="`${index} ${item.text}`"
+            class="gl-breadcrumb-separator"
+            data-testid="separator"
+          >
+            <!-- @slot The separator to display. -->
+            <slot name="separator">
+              <gl-icon name="chevron-right" />
+            </slot>
+          </span>
+        </b-breadcrumb-item>
       </template>
     </b-breadcrumb>
   </div>

package/src/components/base/dropdown/dropdown.scss

@@ -177,8 +177,10 @@
   .split-content-button {
     @include gl-px-4;
   }
+
   .icon-split-content-button {
     @include gl-pl-3;
+
     .dropdown-icon {
       @include gl-mr-0;
     }

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

@@ -46,6 +46,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
     &:focus {
       @include gl-focus($gl-border-size-1, $red-500, true);
     }
+
     &:hover {
       @include gl-inset-border-1-red-500;
     }

package/src/components/base/label/label.scss

@@ -33,6 +33,7 @@ $label-close-button: '.gl-label-close.gl-button';
     &:hover {
       @include gl-reset-color;
       @include gl-shadow-none;
+
       .gl-label-text-scoped {
         @include gl-text-decoration-underline;
       }
@@ -62,6 +63,7 @@ $label-close-button: '.gl-label-close.gl-button';
       @include gl-opacity-5;
       @include gl-reset-bg;
       @include gl-shadow-none;
+
       .gl-icon {
         @include gl-fill-current-color;
       }
@@ -92,6 +94,7 @@ $label-close-button: '.gl-label-close.gl-button';
     &:focus,
     &:hover {
       @include gl-bg-black;
+
       .gl-icon {
         color: var(--label-background-color);
       }
@@ -113,6 +116,7 @@ $label-close-button: '.gl-label-close.gl-button';
     &:focus,
     &:hover {
       @include gl-bg-white;
+
       .gl-icon {
         color: var(--label-background-color);
       }

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/search_box_by_click/search_box_by_click.scss

@@ -34,6 +34,7 @@
     .gl-search-box-by-click-history-no-searches {
       @include gl-text-center;
       @include gl-text-gray-500;
+
       .gl-dropdown-text {
         @include gl-font-weight-normal;
       }

package/src/components/base/segmented_control/segmented_control.scss

@@ -43,6 +43,7 @@
     &:first-child {
       @include gl-btn-gl-segmented-button-first;
     }
+
     &:last-child {
       @include gl-btn-gl-segmented-button-last;
     }

package/src/components/base/table/table.scss

@@ -55,6 +55,7 @@ table.gl-table {
           @include gl-border-t-1;
         }
       }
+
       div {
         @include gl-text-right;
         @include gl-overflow-wrap-break;

package/src/components/base/toast/toast.scss

@@ -35,6 +35,7 @@
     @include gl-pr-3;
     order: 1;
   }
+
   .toast-header {
     @include gl-display-flex;
     order: 2;

package/src/components/base/tooltip/tooltip.scss

@@ -13,6 +13,7 @@
   .arrow {
     @include gl-h-3;
     @include gl-w-2;
+
     &::before {
       @include gl-border-4;
     }

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;
+  }
+  @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;
+  }
+  // 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;
+        }
+      }
+    }
+  }
+}