@gitlab/ui 39.5.1 → 39.7.0

package/package.json

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

package/scss_to_js/scss_variables.js

@@ -318,7 +318,7 @@ export const glModalLargeWidth = '61.875rem'
 export const modalHeaderBorderColor = '#bfbfbf'
 export const modalFooterBorderColor = '#bfbfbf'
 export const modalTitleLineHeight = '1.25rem'
-export const modalBackdrop = '#000'
+export const modalBackdropBg = '#000'
 export const modalBackdropOpacity = '0.64'
 export const bodyColor = '#303030'
 export const secondary = '#f0f0f0'

package/scss_to_js/scss_variables.json

@@ -1673,7 +1673,7 @@
       "compiledValue": "1.25rem"
     },
     {
-      "name": "$modal-backdrop",
+      "name": "$modal-backdrop-bg",
       "value": "#000",
       "compiledValue": "#000"
     },

package/src/components/base/markdown/markdown.scss

@@ -131,14 +131,12 @@
   }
 
   blockquote {
-    @include gl-text-gray-500;
+    @include gl-text-gray-700;
     @include gl-py-3;
-    @include gl-px-6;
-    @include gl-my-5;
+    @include gl-pl-6;
+    @include gl-my-3;
     @include gl-mx-0;
-    @include gl-border-l-solid;
-    @include gl-border-l-4;
-    @include gl-border-l-gray-100;
+    @include gl-inset-border-l-4-gray-100;
   }
 
   .idiff {

package/src/components/base/markdown/markdown_typescale_demo.html

@@ -34,6 +34,33 @@
     requests, milestones, snippets and more.
   </p>
 </blockquote>
+<blockquote>
+  <ul>
+    <li>Blockquote list item 1</li>
+    <li>Blockquote list item 2</li>
+  </ul>
+</blockquote>
+<blockquote>
+  <table>
+    <thead>
+      <tr>
+        <th>header</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>cell</td>
+      </tr>
+    </tbody>
+  </table>
+</blockquote>
+<blockquote>
+  <blockquote>
+    <p>
+      Nested blockquote
+    </p>
+  </blockquote>
+</blockquote>
 <p>
   This is a paragraph with two types inline diff <span class="idiff addition">addition</span> and
   <span class="idiff deletion">deletion</span>
@@ -51,4 +78,4 @@
     <a href="file.mp3" target="_blank" rel="noopener noreferrer" title="Download file.mp3" data-canonical-src="file.mp3"
       data-link="true" class="gfm">file.mp3</a>
   </span>
-</p>
+</p>

package/src/components/base/tabs/tabs/tabs.scss

@@ -37,7 +37,6 @@
 
   > .gl-tab-counter-badge {
     font-weight: inherit;
-    color: inherit;
     @include gl-ml-2;
   }
 }

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

@@ -1,5 +1,6 @@
 import { range } from 'lodash';
 import { GlTabs, GlTab, GlScrollableTabs, GlBadge } from '../../../../index';
+import { badgeVariantOptions } from '../../../../utils/constants';
 import readme from './tabs.md';
 
 const components = {
@@ -152,28 +153,18 @@ export const WithCounterBadges = (_args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { ...components, GlBadge },
   template: wrap(`
-    <gl-tab>
+    <gl-tab 
+      v-for="variant in $options.badgeVariantOptions"
+      :key="variant"
+    >
       <template #title>
         <span>Tab</span>
-        <gl-badge size="sm" class="gl-tab-counter-badge">500</gl-badge>
+        <gl-badge size="sm" class="gl-tab-counter-badge" :variant="variant">500</gl-badge>
         <span class="sr-only">items</span>
       </template>
-      Tab panel 1
-    </gl-tab>
-    <gl-tab>
-      <template #title>
-        <span>Tab</span>
-        <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
-        <span class="sr-only">items</span>
-      </template>
-      Tab panel 2
-    </gl-tab>
-    <gl-tab>
-      <template #title>
-        <span>Tab</span>
-      </template>
-      Tab panel 3
+      Tab panel {{ variant }}
     </gl-tab>`),
+  badgeVariantOptions,
 });
 
 export const WithActions = (_args, { argTypes }) => ({

package/src/scss/typescale/_index.scss

@@ -108,4 +108,13 @@
       @include gl-line-height-24;
     }
   }
+
+  blockquote {
+    @include gl-text-gray-700;
+    @include gl-py-3;
+    @include gl-pl-6;
+    @include gl-my-3;
+    @include gl-mx-0;
+    @include gl-inset-border-l-4-gray-100;
+  }
 }

package/src/scss/typescale/typescale_demo.html

@@ -42,3 +42,37 @@
 <p>UI Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few significant
   ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge requests,
   milestones, snippets and more.</p>
+<blockquote>
+  <p>
+    MD Doc Blockquote • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
+    significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
+    requests, milestones, snippets and more.
+  </p>
+</blockquote>
+<blockquote>
+  <ul>
+    <li>Blockquote list item 1</li>
+    <li>Blockquote list item 2</li>
+  </ul>
+</blockquote>
+<blockquote>
+  <table>
+    <thead>
+      <tr>
+        <th>header</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>cell</td>
+      </tr>
+    </tbody>
+  </table>
+</blockquote>
+<blockquote>
+  <blockquote>
+    <p>
+      Nested blockquote
+    </p>
+  </blockquote>
+</blockquote>

package/src/scss/utilities.scss

@@ -1768,6 +1768,14 @@
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-100 !important
 }
 
+.gl-inset-border-l-4-gray-100 {
+  box-shadow: inset #{$gl-border-size-4} 0 0 0 $gray-100
+}
+
+.gl-inset-border-l-4-gray-100\! {
+  box-shadow: inset #{$gl-border-size-4} 0 0 0 $gray-100 !important
+}
+
 .gl-inset-border-b-1-gray-200 {
   box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-200
 }

package/src/scss/utility-mixins/box-shadow.scss

@@ -40,6 +40,10 @@
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-100;
 }
 
+@mixin gl-inset-border-l-4-gray-100 {
+  box-shadow: inset #{$gl-border-size-4} 0 0 0 $gray-100;
+}
+
 @mixin gl-inset-border-b-1-gray-200 {
   box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-200;
 }

package/src/scss/variables.scss

@@ -461,7 +461,7 @@ $gl-modal-large-width: px-to-rem(990px);
 $modal-header-border-color: $gray-200;
 $modal-footer-border-color: $gray-200;
 $modal-title-line-height: $gl-line-height-20;
-$modal-backdrop: #000;
+$modal-backdrop-bg: #000;
 $modal-backdrop-opacity: 0.64;
 
 // Bootstrap overrides