@gitlab/ui 41.9.0 → 42.0.0

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "41.9.0",
+  "version": "42.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -82,20 +82,19 @@
     "@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.18.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",
-    "@storybook/addon-a11y": "6.5.8",
-    "@storybook/addon-docs": "6.5.8",
-    "@storybook/addon-essentials": "6.5.8",
-    "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.5.8",
-    "@storybook/addon-storyshots-puppeteer": "6.5.8",
-    "@storybook/addon-viewport": "6.5.8",
-    "@storybook/theming": "6.5.8",
-    "@storybook/vue": "6.5.8",
+    "@storybook/addon-a11y": "6.5.9",
+    "@storybook/addon-docs": "6.5.9",
+    "@storybook/addon-essentials": "6.5.9",
+    "@storybook/addon-storyshots": "6.5.9",
+    "@storybook/addon-storyshots-puppeteer": "6.5.9",
+    "@storybook/addon-viewport": "6.5.9",
+    "@storybook/theming": "6.5.9",
+    "@storybook/vue": "6.5.9",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",
@@ -123,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",
@@ -141,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/accordion/accordion.stories.js

@@ -50,7 +50,6 @@ export default {
   parameters: {
     bootstrapComponent: 'b-collapse',
     storyshots: { disable: true },
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/base/accordion/accordion_item.stories.js

@@ -45,7 +45,6 @@ export default {
   bootstrapComponent: 'b-collapse',
   parameters: {
     storyshots: { disable: true },
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -108,7 +108,6 @@ export default {
   title: 'base/avatar',
   component: GlAvatar,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -113,7 +113,6 @@ export default {
   title: 'base/avatar/labeled',
   component: GlAvatarLabeled,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -65,7 +65,6 @@ export default {
   title: 'base/avatar/avatar-link',
   component: GlAvatarLink,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -65,7 +65,6 @@ export default {
   title: 'base/avatar/avatars-inline',
   component: GlAvatarsInline,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -89,7 +89,6 @@ export default {
   title: 'base/banner',
   component: GlBanner,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -53,7 +53,6 @@ export default {
   component: GlBreadcrumb,
   parameters: {
     bootstrapComponent: 'b-breadcrumb',
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -69,7 +69,6 @@ export default {
   title: 'base/broadcast message',
   component: GlBroadcastMessage,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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/button/button.stories.js

@@ -505,9 +505,6 @@ export default {
         component: readme,
       },
     },
-    knobs: {
-      disable: true,
-    },
   },
   argTypes: {
     category: {

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

@@ -33,8 +33,5 @@ export default {
         component: readme,
       },
     },
-    knobs: {
-      disable: true,
-    },
   },
 };

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

@@ -29,7 +29,6 @@ export default {
   title: 'base/card',
   component: GlCard,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -41,7 +41,6 @@ export default {
   component: GlCarousel,
   parameters: {
     bootstrapComponent: 'b-carousel',
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -36,8 +36,5 @@ export default {
         component: readme,
       },
     },
-    knobs: {
-      disabled: true,
-    },
   },
 };

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

@@ -116,7 +116,6 @@ export default {
   component: GlDaterangePicker,
   decorators: [makeContainer({ height: '300px' })],
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -156,7 +156,6 @@ export default {
     },
   },
   parameters: {
-    knobs: { disabled: true },
     docs: {
       description: {
         component: readme,

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/form/form.stories.js

@@ -94,7 +94,6 @@ export default {
   component: GlForm,
   parameters: {
     bootstrapComponent: 'b-form',
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -31,7 +31,6 @@ export default {
   title: 'base/form/form checkbox',
   component: GlFormCheckbox,
   parameters: {
-    knobs: { disable: true },
     bootstrapComponent: 'b-form-checkbox',
     docs: {
       description: {

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

@@ -31,7 +31,6 @@ export default {
   title: 'base/form/form-combobox',
   component: GlFormCombobox,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -81,7 +81,6 @@ export default {
   component: GlFormInput,
   parameters: {
     bootstrapComponent: 'b-form-input',
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -59,7 +59,6 @@ PredefinedOptions.args = generateProps({
 export default {
   title: 'base/form/form-input-group',
   component: GlFormInputGroup,
-  knobs: { disabled: true },
   parameters: {
     bootstrapComponent: 'b-form-input',
     docs: {
@@ -67,7 +66,6 @@ export default {
         component: readme,
       },
     },
-    knobs: { disabled: true },
   },
   argTypes: {
     ...disableControls(['value']),

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

@@ -42,7 +42,6 @@ export default {
   component: GlFormRadio,
   parameters: {
     bootstrapComponent: 'b-form-radio',
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -47,7 +47,6 @@ export default {
   title: 'base/form/form-radio-group',
   component: GlFormRadioGroup,
   parameters: {
-    knobs: { disable: true },
     bootstrapComponent: 'b-form-radio-group',
     docs: {
       description: {

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

@@ -82,7 +82,6 @@ export default {
   component: GlFormSelect,
   parameters: {
     bootstrapComponent: 'b-form-select',
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -18,7 +18,6 @@ export default {
   title: 'base/form/form-text',
   component: GlFormText,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -34,7 +34,6 @@ export default {
   component: GlFormTextarea,
   parameters: {
     bootstrapComponent: 'b-form-textarea',
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -21,7 +21,6 @@ export default {
   component: GlInputGroupText,
   parameters: {
     controls: { disable: true },
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -33,7 +33,6 @@ export default {
   title: 'base/icon',
   component: GlIcon,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -84,7 +84,6 @@ export default {
   title: 'base/infinite-scroll',
   component: GlInfiniteScroll,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -57,7 +57,6 @@ export default {
   component: GlKeysetPagination,
   parameters: {
     bootstrapComponent: false,
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -58,7 +58,6 @@ export default {
   title: 'base/label',
   component: GlLabel,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -40,9 +40,6 @@ export default {
         component: readme,
       },
     },
-    knobs: {
-      disabled: true,
-    },
   },
   argTypes: {
     color: {

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

@@ -29,6 +29,5 @@ export default {
         component: readme,
       },
     },
-    knobs: { disabled: true },
   },
 };

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

@@ -106,7 +106,6 @@ export default {
   directives: { GlModalDirective },
   bootstrapComponent: 'b-modal',
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -50,7 +50,6 @@ export default {
   },
   parameters: {
     bootstrapComponent: 'b-nav',
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -254,7 +254,6 @@ export default {
   title: 'base/new-dropdowns/listbox',
   component: GlListbox,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -197,7 +197,6 @@ export default {
   title: 'base/paginated-list',
   component: GlPaginatedList,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -117,7 +117,6 @@ export default {
   title: 'base/pagination',
   component: GlPagination,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -65,7 +65,6 @@ export default {
   title: 'base/path',
   component: GlPath,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -81,7 +81,6 @@ export default {
   title: 'base/popover',
   component: GlPopover,
   parameters: {
-    knobs: { disable: true },
     bootstrapComponent: 'b-popover',
   },
   argTypes: {

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

@@ -23,7 +23,6 @@ export default {
   title: 'base/progress-bar',
   component: GlProgressBar,
   parameters: {
-    knobs: { disable: true },
     bootstrapComponent: 'b-progress',
   },
   argTypes: {

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

@@ -82,7 +82,6 @@ export default {
   title: 'base/search-box-by-click',
   component: GlSearchBoxByClick,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -41,7 +41,6 @@ export default {
   title: 'base/search-box-by-type',
   component: GlSearchBoxByType,
   parameters: {
-    knobs: { disable: true },
     bootstrapComponent: 'b-form-input',
     docs: {
       description: {

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

@@ -39,7 +39,6 @@ export default {
   component: GlSegmentedControl,
   parameters: {
     bootstrapComponent: 'b-form-radio-group',
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -77,7 +77,6 @@ export default {
   title: 'base/skeleton-loader',
   component: GlSkeletonLoader,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -31,7 +31,6 @@ export default {
         component: readme,
       },
     },
-    knobs: { disable: true },
   },
   argTypes: {
     lines: {

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

@@ -56,7 +56,6 @@ export default {
   component: GlSorting,
   decorators: [makeContainer({ height: '100px', paddingLeft: '100px' })],
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/base/sorting/sorting_item.stories.js

@@ -40,7 +40,6 @@ export default {
   component: GlSortingItem,
   decorators: [makeContainer({ height: '50px', paddingLeft: '100px' })],
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -98,7 +98,6 @@ export default {
   component: GlTable,
   parameters: {
     bootstrapComponent: 'b-table',
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -53,7 +53,6 @@ export default {
   title: 'base/table/table_lite',
   component: GlTableLite,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,