@gitlab/ui 38.11.0 → 39.1.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.11.0",
+  "version": "39.1.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.vue

@@ -173,14 +173,6 @@ export default {
       :class="{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !title }"
     />
 
-    <close-button
-      v-if="dismissible"
-      ref="dismiss"
-      class="gl-dismiss-btn"
-      :label="dismissLabel"
-      @click="onDismiss"
-    />
-
     <div class="gl-alert-content" role="alert">
       <h4 v-if="title" class="gl-alert-title">{{ title }}</h4>
 
@@ -204,5 +196,13 @@ export default {
         </slot>
       </div>
     </div>
+
+    <close-button
+      v-if="dismissible"
+      ref="dismiss"
+      class="gl-dismiss-btn"
+      :label="dismissLabel"
+      @click="onDismiss"
+    />
   </div>
 </template>

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

@@ -43,9 +43,11 @@
   }
 
   .form-check-input:disabled,
-  .form-check-input:disabled ~ .form-check-label {
+  .form-check-input:disabled ~ .form-check-label,
+  .custom-control-input:disabled,
+  .custom-control-input:disabled ~ .custom-control-label {
     @include gl-cursor-not-allowed;
-    @include gl-text-gray-500;
+    @include gl-text-gray-400;
   }
 
   &.custom-control {

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',
-};