@gitlab/ui 41.9.1 → 42.0.1

package/dist/utils/constants.js

@@ -80,7 +80,6 @@ const buttonVariantOptions = {
   confirm: 'confirm',
   info: 'info (deprecated)',
   success: 'success (deprecated)',
-  warning: 'warning (deprecated)',
   danger: 'danger',
   dashed: 'dashed',
   link: 'link',
@@ -103,7 +102,6 @@ const dropdownVariantOptions = {
   confirm: 'confirm',
   info: 'info (deprecated)',
   success: 'success (deprecated)',
-  warning: 'warning (deprecated)',
   danger: 'danger',
   link: 'link'
 };
@@ -224,7 +222,8 @@ const keyboard = {
   right: 'Right',
   arrowRight: 'ArrowRight',
   home: 'Home',
-  end: 'End'
+  end: 'End',
+  tab: 'Tab'
 };
 const truncateOptions = POSITION;
 const formInputSizes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "41.9.1",
+  "version": "42.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -82,8 +82,8 @@
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "12.3.0",
-    "@gitlab/stylelint-config": "4.0.0",
-    "@gitlab/svgs": "2.19.0",
+    "@gitlab/stylelint-config": "4.1.0",
+    "@gitlab/svgs": "2.20.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -122,7 +122,7 @@
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
     "plop": "^2.5.4",
-    "postcss": "8.4.12",
+    "postcss": "8.4.14",
     "postcss-loader": "^3.0.0",
     "postcss-scss": "4.0.4",
     "prettier": "2.6.2",
@@ -140,7 +140,7 @@
     "sass-true": "^5.0.0",
     "start-server-and-test": "^1.10.6",
     "storybook-dark-mode": "^1.0.8",
-    "stylelint": "14.3.0",
+    "stylelint": "14.9.1",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-prettier": "2.0.0",
     "vue": "2.6.11",

package/src/components/base/button/button.scss

@@ -135,8 +135,7 @@
   &.btn-confirm,
   &.btn-info,
   &.btn-success,
-  &.btn-danger,
-  &.btn-warning {
+  &.btn-danger {
     @include gl-text-contrast-light;
   }
 
@@ -251,60 +250,6 @@
     }
   }
 
-  &.btn-warning {
-    @include gl-bg-orange-500;
-    @include gl-inset-border-1-orange-600;
-
-    &:hover {
-      @include gl-tmp-button-hover($orange-800, $orange-600);
-    }
-
-    &:focus {
-      @include gl-focus($color: $orange-800);
-      @include gl-bg-orange-600;
-    }
-
-    &:active,
-    &.active {
-      @include gl-focus($color: $orange-900);
-      @include gl-bg-orange-700;
-
-      &:focus {
-        @include gl-focus($color: $orange-900);
-      }
-    }
-  }
-
-  &.btn-warning-secondary,
-  &.btn-warning-tertiary {
-    @include gl-bg-transparent;
-    @include gl-text-orange-500;
-    @include gl-font-weight-normal;
-    @include gl-inset-border-1-orange-500;
-
-    &:hover {
-      @include gl-text-orange-700;
-      @include gl-tmp-button-hover($orange-700, $orange-50);
-    }
-
-    &:focus {
-      @include gl-text-orange-700;
-      @include gl-focus($color: $orange-700);
-      @include gl-bg-orange-50;
-    }
-
-    &:active,
-    &.active {
-      @include gl-text-orange-900;
-      @include gl-focus($color: $orange-900);
-      @include gl-bg-orange-100;
-
-      &:focus {
-        @include gl-focus($color: $orange-900);
-      }
-    }
-  }
-
   &.btn-danger {
     @include gl-bg-red-500;
     @include gl-inset-border-1-red-600;
@@ -364,8 +309,7 @@
   &.btn-confirm,
   &.btn-info,
   &.btn-success,
-  &.btn-danger,
-  &.btn-warning {
+  &.btn-danger {
     &-secondary {
       @include gl-bg-white;
     }
@@ -376,8 +320,7 @@
   &.btn-confirm,
   &.btn-info,
   &.btn-success,
-  &.btn-danger,
-  &.btn-warning {
+  &.btn-danger {
     &-tertiary {
       @include gl-shadow-none;
       mix-blend-mode: multiply;

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

@@ -99,9 +99,6 @@ describe('button component', () => {
     ${'success'} | ${'primary'}   | ${'btn-success'}
     ${'success'} | ${'secondary'} | ${'btn-success-secondary'}
     ${'success'} | ${'tertiary'}  | ${'btn-success-tertiary'}
-    ${'warning'} | ${'primary'}   | ${'btn-warning'}
-    ${'warning'} | ${'secondary'} | ${'btn-warning-secondary'}
-    ${'warning'} | ${'tertiary'}  | ${'btn-warning-tertiary'}
     ${'danger'}  | ${'primary'}   | ${'btn-danger'}
     ${'danger'}  | ${'secondary'} | ${'btn-danger-secondary'}
     ${'danger'}  | ${'tertiary'}  | ${'btn-danger-tertiary'}

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

@@ -108,8 +108,7 @@
     &.btn-confirm,
     &.btn-info,
     &.btn-success,
-    &.btn-danger,
-    &.btn-warning {
+    &.btn-danger {
       margin-left: 1px;
     }
 

package/src/components/base/token_selector/token_container.spec.js

@@ -62,6 +62,15 @@ describe('GlTokenContainer', () => {
       });
     });
 
+    describe('viewOnly', () => {
+      it('passes viewOnly prop to tokens correctly', () => {
+        createComponent({ propsData: { viewOnly: true } });
+        const tokenWrappers = wrapper.findAllComponents(GlToken);
+
+        expect(tokenWrappers.wrappers.every((token) => token.props('viewOnly'))).toBe(true);
+      });
+    });
+
     describe('state', () => {
       describe('when `state` is `false`', () => {
         it('adds `aria-invalid="true"` attribute`', () => {
@@ -247,6 +256,17 @@ describe('GlTokenContainer', () => {
         const expectedFocusedToken = findTokenByName(tokens[2].name);
         expect(expectedFocusedToken.element).toHaveFocus();
       });
+
+      it('emits the `cancel-focus` event when tab key is pressed', async () => {
+        createComponent({});
+
+        const focusedToken = findTokenByName(tokens[0].name);
+
+        await focusedToken.trigger('focus');
+        await focusedToken.trigger('keydown', { key: keyboard.tab });
+
+        expect(wrapper.emitted('cancel-focus')).toEqual([[]]);
+      });
     });
   });
 });

package/src/components/base/token_selector/token_container.vue

@@ -21,6 +21,11 @@ export default {
       type: Function,
       required: true,
     },
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -90,6 +95,9 @@ export default {
       this.focusedTokenIndex = null;
       this.$emit('cancel-focus');
     },
+    handleTab() {
+      this.$emit('cancel-focus');
+    },
     // Only called when a token is focused by a click/tap
     handleTokenFocus(index) {
       this.focusedTokenIndex = index;
@@ -127,7 +135,7 @@ export default {
     @keydown.end="handleEnd"
     @keydown.delete="handleDelete"
     @keydown.esc="handleEscape"
-    @keydown.prevent
+    @keydown.tab.prevent="handleTab"
   >
     <div
       v-for="(token, index) in tokens"
@@ -143,6 +151,7 @@ export default {
         class="gl-cursor-default"
         :class="token.class"
         :style="token.style"
+        :view-only="viewOnly"
         @close="handleClose(token)"
       >
         <slot name="token-content" :token="token">

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

@@ -46,6 +46,8 @@ describe('GlTokenSelector', () => {
     },
   ];
 
+  const placeholderText = 'Test placeholder';
+
   let wrapper;
 
   const defaultProps = { selectedTokens: [] };
@@ -141,6 +143,22 @@ describe('GlTokenSelector', () => {
       });
     });
 
+    describe('viewOnly', () => {
+      beforeEach(() => {
+        createComponent({ propsData: { viewOnly: true } });
+      });
+
+      it('passes `viewOnly` prop to GlTokenContainer', () => {
+        expect(wrapper.findComponent(GlTokenContainer).props('viewOnly')).toBe(true);
+      });
+
+      it('disables input field if viewOnly is true', () => {
+        findTextInput().trigger('focus');
+
+        expect(findTextInput().attributes('disabled')).toBe('disabled');
+      });
+    });
+
     describe('containerClass', () => {
       it('renders passed CSS classes', () => {
         createComponent({
@@ -302,6 +320,48 @@ describe('GlTokenSelector', () => {
 
       expect(wrapper.findComponent(component).vm.$scopedSlots).toHaveProperty(slot);
     });
+
+    it('renders empty-placeholder slot if tokens list is empty and input is not focused', () => {
+      createComponent({
+        propsData: {
+          selectedTokens: [],
+        },
+        slots: {
+          'empty-placeholder': placeholderText,
+        },
+      });
+
+      expect(wrapper.text()).toContain(placeholderText);
+    });
+
+    it('does not render empty-placeholder slot if token list is not empty', () => {
+      createComponent({
+        propsData: {
+          selectedTokens: tokens,
+        },
+        slots: {
+          'empty-placeholder': placeholderText,
+        },
+      });
+
+      expect(wrapper.text()).not.toContain(placeholderText);
+    });
+
+    it('hides empty-placeholder slot if input is focused', async () => {
+      createComponent({
+        propsData: {
+          selectedTokens: [],
+        },
+        slots: {
+          'empty-placeholder': placeholderText,
+        },
+      });
+
+      expect(wrapper.text()).toContain(placeholderText);
+
+      await findTextInput().trigger('focus');
+      expect(wrapper.text()).not.toContain(placeholderText);
+    });
   });
 
   describe('text input events', () => {

package/src/components/base/token_selector/token_selector.vue

@@ -113,6 +113,14 @@ export default {
       validator: tokensValidator,
       required: true,
     },
+    /**
+     * Controls the `view-only` mode for the tokens
+     */
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -165,6 +173,9 @@ export default {
         ? 'is-valid gl-inset-border-1-gray-400!'
         : 'is-invalid gl-inset-border-1-red-500!';
     },
+    showEmptyPlaceholder() {
+      return this.selectedTokens.length === 0 && !this.inputFocused;
+    },
   },
   watch: {
     inputText(newValue, oldValue) {
@@ -354,14 +365,18 @@ export default {
   <div>
     <div
       ref="container"
-      class="gl-token-selector gl-form-input form-control form-control-plaintext gl-cursor-text! gl-py-2! gl-px-3!"
+      class="gl-token-selector gl-form-input gl-display-flex gl-align-items-center form-control form-control-plaintext gl-cursor-text! gl-py-2! gl-px-3!"
       :class="[inputFocused ? 'gl-token-selector-focus-glow' : '', containerClass, stateClass]"
       @click="handleContainerClick"
     >
+      <!-- @slot Optional content to display a placeholder when tokens list is empty
+        and user doesn't edit tokens -->
+      <slot v-if="showEmptyPlaceholder" name="empty-placeholder"></slot>
       <gl-token-container
         :tokens="selectedTokens"
         :state="state"
         :register-focus-on-token="registerFocusOnToken"
+        :view-only="viewOnly"
         @token-remove="removeToken"
         @cancel-focus="cancelTokenFocus"
       >
@@ -383,6 +398,7 @@ export default {
             :autocomplete="autocomplete"
             :aria-labelledby="ariaLabelledby"
             :placeholder="placeholder"
+            :disabled="viewOnly"
             v-bind="textInputAttrs"
             @input="inputText = $event.target.value"
             @focus="handleFocus"

package/src/utils/constants.js

@@ -97,7 +97,6 @@ export const buttonVariantOptions = {
   confirm: 'confirm',
   info: 'info (deprecated)',
   success: 'success (deprecated)',
-  warning: 'warning (deprecated)',
   danger: 'danger',
   dashed: 'dashed',
   link: 'link',
@@ -121,7 +120,6 @@ export const dropdownVariantOptions = {
   confirm: 'confirm',
   info: 'info (deprecated)',
   success: 'success (deprecated)',
-  warning: 'warning (deprecated)',
   danger: 'danger',
   link: 'link',
 };
@@ -266,6 +264,7 @@ export const keyboard = {
   arrowRight: 'ArrowRight',
   home: 'Home',
   end: 'End',
+  tab: 'Tab',
 };
 
 export const truncateOptions = POSITION;