@gitlab/ui 39.0.0 → 39.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "39.0.0",
+  "version": "39.2.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -88,7 +88,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "12.0.1",
     "@gitlab/stylelint-config": "4.0.0",
-    "@gitlab/svgs": "2.8.0",
+    "@gitlab/svgs": "2.10.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -114,7 +114,7 @@
     "eslint": "7.32.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-storybook": "^0.5.7",
+    "eslint-plugin-storybook": "0.5.7",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",

package/src/components/base/alert/alert.scss

@@ -8,6 +8,10 @@
     @include gl-pr-5;
   }
 
+  &-no-icon {
+    @include gl-pl-5;
+  }
+
   .gl-link:not(.gl-label-link) {
     @include gl-text-blue-600;
     @include gl-text-decoration-underline;

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

@@ -20,6 +20,7 @@ describe('Alert component', () => {
     });
   };
 
+  const findIcon = () => wrapper.find('.gl-alert-icon');
   const findDismissButton = () => wrapper.findComponent({ ref: 'dismiss' });
   const findTitle = () => wrapper.find('.gl-alert-title');
   const findBodyContainer = () => wrapper.find('.gl-alert-body');
@@ -31,6 +32,10 @@ describe('Alert component', () => {
       createComponent({ slots: { default: DummyComponent } });
     });
 
+    it('renders a variant icon', () => {
+      expect(findIcon().exists()).toBe(true);
+    });
+
     it('renders a dismiss button', () => {
       expect(findDismissButton().exists()).toBe(true);
     });
@@ -54,6 +59,12 @@ describe('Alert component', () => {
     });
   });
 
+  it('does not render a variant icon when showIcon = false', () => {
+    createComponent({ propsData: { showIcon: false } });
+
+    expect(findIcon().exists()).toBe(false);
+  });
+
   it('does not render a dismiss button when dismissible = false', () => {
     createComponent({ propsData: { dismissible: false } });
 

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

@@ -6,6 +6,7 @@ const template = `
   <gl-alert
     :title="title"
     :dismissible="dismissible"
+    :show-icon="showIcon"
     :dismiss-label="dismissLabel"
     :variant="variant"
     :primary-button-text="primaryButtonText"
@@ -21,6 +22,7 @@ const generateProps = ({
   title = defaultValue('title'),
   variant = defaultValue('variant'),
   dismissible = defaultValue('dismissible'),
+  showIcon = defaultValue('showIcon'),
   dismissLabel = defaultValue('dismissLabel'),
   primaryButtonText = defaultValue('primaryButtonText'),
   primaryButtonLink = defaultValue('primaryButtonLink'),
@@ -32,6 +34,7 @@ const generateProps = ({
   message: 'Lorem ipsum dolor sit amet',
   variant,
   dismissible,
+  showIcon,
   dismissLabel,
   primaryButtonText,
   primaryButtonLink,
@@ -92,6 +95,17 @@ TextLinks.parameters = {
   storyshots: { disable: true },
 };
 
+export const NoIcon = () => ({
+  components: { GlAlert },
+  template: `
+    <gl-alert :show-icon="false">
+      Lorem ipsum dolor sit amet
+    </gl-alert>`,
+});
+NoIcon.parameters = {
+  storyshots: { disable: true },
+};
+
 export const Variants = () => ({
   components: { GlAlert },
   variants: alertVariantOptions,

package/src/components/base/alert/alert.vue

@@ -28,6 +28,14 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Shows icon based on variant.
+     */
+    showIcon: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     /**
      * Dismiss button's aria-label.
      */
@@ -165,10 +173,12 @@ export default {
       'gl-alert',
       { 'gl-alert-sticky': sticky },
       { 'gl-alert-not-dismissible': !dismissible },
+      { 'gl-alert-no-icon': !showIcon },
       variantClass,
     ]"
   >
     <gl-icon
+      v-if="showIcon"
       :name="iconName"
       :class="{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !title }"
     />

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

@@ -121,6 +121,10 @@
 
     &.gl-button {
       @include gl-px-3;
+
+      &.btn-sm {
+        @include gl-px-2;
+      }
     }
   }
 
@@ -172,6 +176,10 @@
     .dropdown-icon {
       @include gl-mr-0;
     }
+
+    &.btn-sm .dropdown-chevron {
+      @include gl-mx-0;
+    }
   }
 
   .split-content-button {

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

@@ -1,26 +1,26 @@
 table.gl-table {
-  @include gl-text-gray-500;
   @include gl-bg-transparent;
 
   tr {
     th,
     td {
-      @include gl-border-t-none;
       @include gl-border-b-solid;
       @include gl-border-b-1;
+      @include gl-border-gray-100;
       @include gl-p-5;
       @include gl-bg-transparent;
       @include gl-line-height-normal;
       @include gl-font-base;
+      @include gl-vertical-align-top;
     }
 
     th {
       @include gl-font-weight-bold;
-      @include gl-border-gray-200;
+      @include gl-text-gray-900;
     }
 
     td {
-      @include gl-border-gray-100;
+      @include gl-text-gray-700;
     }
   }
 

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

@@ -72,9 +72,9 @@ export const WithFilter = (args, { argTypes }) => ({
   template: `<div class="gl-line-height-normal">
       <gl-form-input v-model="filter" placeholder="Type to search" />
       <br />
-      <gl-table 
-              :items="$options.items" 
-              :fields="$options.fields" 
+      <gl-table
+              :items="$options.items"
+              :fields="$options.fields"
               :filter=filter
               :fixed="fixed"
               :stacked="stacked"