@gitlab/ui 38.12.0 → 39.2.0

package/dist/utils/constants.js

@@ -251,9 +251,5 @@ const loadingIconSizes = {
   'lg (32x32)': 'lg',
   'xl (64x64)': 'xl'
 };
-const textareaCountOptions = {
-  max: 'max',
-  recommended: 'recommended'
-};
 
-export { COMMA, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonSizeOptionsMap, buttonVariantOptions, colorThemes, columnOptions, defaultDateFormat, drawerVariants, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, sizeOptions, sizeOptionsWithNoDefault, tabsButtonDefaults, targetOptions, textareaCountOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonSizeOptionsMap, buttonVariantOptions, colorThemes, columnOptions, defaultDateFormat, drawerVariants, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, sizeOptions, sizeOptionsWithNoDefault, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "38.12.0",
+  "version": "39.2.0",
   "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/form/form_textarea/form_textarea.spec.js

@@ -1,5 +1,4 @@
 import { mount } from '@vue/test-utils';
-import { textareaCountOptions } from '../../../../utils/constants';
 import GlFormTextarea from './form_textarea.vue';
 
 const modelEvent = GlFormTextarea.model.event;
@@ -7,13 +6,11 @@ const newValue = 'foo';
 
 describe('GlFormTextArea', () => {
   let wrapper;
-  let textarea;
 
   const createComponent = (propsData = {}) => {
     wrapper = mount(GlFormTextarea, {
       propsData,
     });
-    textarea = wrapper.find('textarea');
   };
 
   describe('v-model', () => {
@@ -23,7 +20,7 @@ describe('GlFormTextArea', () => {
       });
 
       it(`sets the textarea's value`, () => {
-        expect(textarea.element.value).toBe('initial');
+        expect(wrapper.element.value).toBe('initial');
       });
 
       describe('when the value prop changes', () => {
@@ -33,7 +30,7 @@ describe('GlFormTextArea', () => {
         });
 
         it(`updates the textarea's value`, () => {
-          expect(textarea.element.value).toBe(newValue);
+          expect(wrapper.element.value).toBe(newValue);
         });
       });
     });
@@ -42,7 +39,7 @@ describe('GlFormTextArea', () => {
       beforeEach(() => {
         createComponent();
 
-        textarea.setValue(newValue);
+        wrapper.setValue(newValue);
       });
 
       it('synchronously emits update event', () => {
@@ -62,7 +59,7 @@ describe('GlFormTextArea', () => {
 
         createComponent({ debounce });
 
-        textarea.setValue(newValue);
+        wrapper.setValue(newValue);
       });
 
       it('synchronously emits an update event', () => {
@@ -85,7 +82,7 @@ describe('GlFormTextArea', () => {
     beforeEach(() => {
       createComponent({ lazy: true });
 
-      textarea.setValue(newValue);
+      wrapper.setValue(newValue);
     });
 
     it('synchronously emits an update event', () => {
@@ -95,7 +92,7 @@ describe('GlFormTextArea', () => {
     it.each(['change', 'blur'])('updates model after %s event', (event) => {
       expect(wrapper.emitted(modelEvent)).toBe(undefined);
 
-      textarea.trigger(event);
+      wrapper.trigger(event);
 
       expect(wrapper.emitted(modelEvent)).toEqual([[newValue]]);
     });
@@ -105,7 +102,7 @@ describe('GlFormTextArea', () => {
     it('should be false by default', () => {
       createComponent({});
 
-      textarea.trigger('keyup.enter', {
+      wrapper.trigger('keyup.enter', {
         metaKey: true,
       });
 
@@ -115,115 +112,11 @@ describe('GlFormTextArea', () => {
     it('should emit submit when cmd+enter is pressed', async () => {
       createComponent({ submitOnEnter: true });
 
-      textarea.trigger('keyup.enter', {
+      wrapper.trigger('keyup.enter', {
         metaKey: true,
       });
 
       expect(wrapper.emitted().submit).toEqual([[]]);
     });
   });
-
-  describe('count', () => {
-    it('should be 0 by default', () => {
-      createComponent({
-        characterCountText: '%{count} characters left',
-        characterCountOverLimitText: '%{count} characters over limit',
-      });
-
-      expect(wrapper.text()).not.toContain('characters left');
-      expect(wrapper.text()).not.toContain('characters over limit');
-    });
-
-    it('should display the remaining characters when a count is provided', () => {
-      createComponent({
-        count: 400,
-        characterCountText: '%{count} characters left',
-        characterCountOverLimitText: '%{count} characters over limit',
-      });
-
-      expect(wrapper.text()).toContain('400 characters left');
-    });
-
-    it('should display the difference between the limit and the length of the value', () => {
-      const value = 'hello';
-
-      createComponent({
-        value,
-        count: 400,
-        characterCountText: '%{count} characters left',
-        characterCountOverLimitText: '%{count} characters over limit',
-      });
-
-      const { length } = value;
-
-      expect(wrapper.text()).toContain(`${400 - length} characters left`);
-    });
-
-    it('should display the over limit text once over the limit', () => {
-      const value = 'hello';
-      const count = 4;
-
-      createComponent({
-        value,
-        count,
-        characterCountText: '%{count} characters left',
-        characterCountOverLimitText: '%{count} characters over limit',
-      });
-
-      const diff = Math.abs(count - value.length);
-
-      expect(wrapper.text()).toContain(`${diff} characters over limit`);
-    });
-
-    describe('max', () => {
-      it('should display the text as grey when up to the limit', () => {
-        const value = 'hello';
-        const count = 5;
-
-        createComponent({
-          value,
-          count,
-          characterCountText: '%{count} characters left',
-          characterCountOverLimitText: '%{count} characters over limit',
-        });
-
-        const small = wrapper.find('small');
-
-        expect(small.classes()).toContain('gl-text-gray-500');
-      });
-      it('should display the text as danger when over the limit', () => {
-        const value = 'hello';
-        const count = 4;
-
-        createComponent({
-          value,
-          count,
-          characterCountText: '%{count} characters left',
-          characterCountOverLimitText: '%{count} characters over limit',
-        });
-
-        const small = wrapper.find('small');
-
-        expect(small.classes()).toContain('gl-text-red-500');
-      });
-    });
-    describe('recommended', () => {
-      it('should display the text as gray when over the limit', () => {
-        const value = 'hello';
-        const count = 4;
-
-        createComponent({
-          value,
-          count,
-          countType: textareaCountOptions.recommended,
-          characterCountText: '%{count} characters left',
-          characterCountOverLimitText: '%{count} characters over limit',
-        });
-
-        const small = wrapper.find('small');
-
-        expect(small.classes()).toContain('gl-text-gray-500');
-      });
-    });
-  });
 });

package/src/components/base/form/form_textarea/form_textarea.stories.js

@@ -1,5 +1,4 @@
 import { GlFormTextarea } from '../../../../index';
-import { textareaCountOptions } from '../../../../utils/constants';
 import readme from './form_textarea.md';
 
 const template = `
@@ -8,10 +7,6 @@ const template = `
     :placeholder="placeholder"
     :rows="5"
     :no-resize="noResize"
-    :count="count"
-    :countType="countType"
-    :character-count-text="characterCountText"
-    :character-count-over-limit-text="characterCountOverLimitText"
   />
 `;
 
@@ -19,18 +14,10 @@ const generateProps = ({
   model = 'We take inspiration from other companies, and we always go for the boring solutions. Just like the rest of our work, we continually adjust our values and strive always to make them better. We used to have more values, but it was difficult to remember them all, so we condensed them and gave sub-values and created an acronym. Everyone is welcome to suggest improvements.',
   placeholder = 'hello',
   noResize = GlFormTextarea.props.noResize.default,
-  count = 400,
-  countType = textareaCountOptions.max,
-  characterCountText = '%{count} characters left',
-  characterCountOverLimitText = '%{count} characters over limit',
 } = {}) => ({
   model,
   placeholder,
   noResize,
-  count,
-  countType,
-  characterCountText,
-  characterCountOverLimitText,
 });
 
 const Template = (args) => ({
@@ -54,12 +41,4 @@ export default {
       },
     },
   },
-  argTypes: {
-    countType: {
-      control: {
-        type: 'select',
-        options: textareaCountOptions,
-      },
-    },
-  },
 };

package/src/components/base/form/form_textarea/form_textarea.vue

@@ -1,7 +1,5 @@
 <script>
 import { BFormTextarea } from 'bootstrap-vue';
-import GlSprintf from '../../../utilities/sprintf/sprintf.vue';
-import { textareaCountOptions } from '../../../../utils/constants';
 
 const model = {
   prop: 'value',
@@ -11,7 +9,6 @@ const model = {
 export default {
   components: {
     BFormTextarea,
-    GlSprintf,
   },
   inheritAttrs: false,
   model,
@@ -33,27 +30,6 @@ export default {
       required: false,
       default: false,
     },
-    count: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    countType: {
-      required: false,
-      type: String,
-      default: textareaCountOptions.max,
-      validator: (value) => Object.keys(textareaCountOptions).includes(value),
-    },
-    characterCountText: {
-      required: false,
-      type: String,
-      default: '',
-    },
-    characterCountOverLimitText: {
-      required: false,
-      type: String,
-      default: '',
-    },
   },
   computed: {
     listeners() {
@@ -80,37 +56,6 @@ export default {
     keypressEvent() {
       return this.submitOnEnter ? 'keyup' : null;
     },
-    characters() {
-      return this.value.length;
-    },
-    remainingCharacters() {
-      if (this.count) {
-        return Math.abs(this.count - this.characters);
-      }
-
-      return null;
-    },
-    characterCountClasses() {
-      switch (this.countType) {
-        case textareaCountOptions.max:
-          return {
-            'gl-text-red-500': this.value.length > this.count,
-            'gl-text-gray-500': this.value.length <= this.count,
-          };
-        case textareaCountOptions.recommended:
-          return 'gl-text-gray-500';
-        default:
-          return {};
-      }
-    },
-    hasCount() {
-      return this.remainingCharacters != null;
-    },
-    characterCountMessage() {
-      return this.characters > this.count
-        ? this.characterCountOverLimitText
-        : this.characterCountText;
-    },
   },
   methods: {
     handleKeyPress(e) {
@@ -123,22 +68,12 @@ export default {
 </script>
 
 <template>
-  <div>
-    <b-form-textarea
-      ref="textarea"
-      class="gl-form-input gl-form-textarea"
-      :no-resize="noResize"
-      v-bind="$attrs"
-      :value="value"
-      v-on="listeners"
-      @[keypressEvent].native="handleKeyPress"
-    />
-    <div v-if="hasCount">
-      <small :class="characterCountClasses" aria-live="polite">
-        <gl-sprintf :message="characterCountMessage">
-          <template #count>{{ remainingCharacters }}</template>
-        </gl-sprintf>
-      </small>
-    </div>
-  </div>
+  <b-form-textarea
+    class="gl-form-input gl-form-textarea"
+    :no-resize="noResize"
+    v-bind="$attrs"
+    :value="value"
+    v-on="listeners"
+    @[keypressEvent].native="handleKeyPress"
+  />
 </template>

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"

package/src/utils/constants.js

@@ -298,8 +298,3 @@ export const loadingIconSizes = {
   'lg (32x32)': 'lg',
   'xl (64x64)': 'xl',
 };
-
-export const textareaCountOptions = {
-  max: 'max',
-  recommended: 'recommended',
-};