@gitlab/ui 40.2.2 → 40.3.0

package/package.json

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

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

@@ -181,6 +181,31 @@
       }
     }
   }
+
+  table {
+    @include gl-my-7;
+
+    th,
+    td {
+      @include gl-px-3;
+      @include gl-py-4;
+      @include gl-inset-border-b-1-gray-100;
+      @include gl-vertical-align-top;
+    }
+
+    th {
+      @include gl-inset-border-y-1-gray-100;
+      @include gl-font-weight-bold;
+    }
+
+    thead {
+      @include gl-bg-gray-50;
+    }
+
+    tr:nth-child(even) {
+      @include gl-bg-gray-10;
+    }
+  }
 }
 
 .gl-compact-markdown {
@@ -262,4 +287,11 @@
       @include gl-font-size-monospace-sm;
     }
   }
+
+  table {
+    th,
+    td {
+      @include gl-py-3;
+    }
+  }
 }

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

@@ -3,7 +3,7 @@ import GlMarkdown from './markdown.vue';
 import markdownTypescaleDemoContent from './markdown_typescale_demo.html';
 
 const template = `
-  <gl-markdown :compact="compact">${markdownTypescaleDemoContent}</gl-markdown> 
+  <gl-markdown :compact="compact">${markdownTypescaleDemoContent}</gl-markdown>
   `;
 
 const generateProps = ({ compact = false } = {}) => ({ compact });
@@ -14,8 +14,11 @@ const Template = (args, { argTypes }) => ({
   template,
 });
 
-export const Typescale = Template.bind({});
-Typescale.args = generateProps();
+export const Documentation = Template.bind({});
+Documentation.args = generateProps();
+
+export const Compact = Template.bind({});
+Compact.args = generateProps({ compact: true });
 
 export default {
   title: 'base/markdown',

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

@@ -27,6 +27,52 @@
 <p>MD Doc 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>
+
+<table>
+  <thead>
+    <tr>
+      <th>Widget</th>
+      <th>Wording</th>
+      <th>Proposed</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        Test summary
+      </td>
+      <td>
+        Test summary contained 3 failed, 1 fixed test result out of 15 total tests
+      </td>
+      <td>
+        This is the only one that doesn't include the breakdown in the Level 1 subtext. Does it need to be updated?
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Browser performance
+      </td>
+      <td>
+        Browser performance test metrics: 7 changes
+      </td>
+      <td>
+        Browser performance test metrics detected 7 changes
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Load performance
+      </td>
+      <td>
+        Load performance test metrics detected 4 changes
+      </td>
+      <td>
+        ✅
+      </td>
+    </tr>
+  </tbody>
+</table>
+
 <blockquote>
   <p>
     MD Doc Blockquote • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few

package/src/scss/utilities.scss

@@ -1760,6 +1760,24 @@
     inset 0 -#{$gl-border-size-1} 0 0 $gray-200 !important
 }
 
+.gl-inset-border-y-1-gray-100 {
+  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-100,
+    inset 0 -#{$gl-border-size-1} 0 0 $gray-100
+}
+
+.gl-inset-border-y-1-gray-100\! {
+  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-100,
+    inset 0 -#{$gl-border-size-1} 0 0 $gray-100 !important
+}
+
+.gl-inset-border-b-1-gray-100 {
+  box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-100
+}
+
+.gl-inset-border-b-1-gray-100\! {
+  box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-100 !important
+}
+
 .gl-inset-border-b-2-gray-100 {
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-100
 }

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

@@ -36,6 +36,15 @@
     inset 0 -#{$gl-border-size-1} 0 0 $gray-200;
 }
 
+@mixin gl-inset-border-y-1-gray-100 {
+  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-100,
+    inset 0 -#{$gl-border-size-1} 0 0 $gray-100;
+}
+
+@mixin gl-inset-border-b-1-gray-100 {
+  box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-100;
+}
+
 @mixin gl-inset-border-b-2-gray-100 {
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-100;
 }