@gitlab/ui 32.18.0 → 32.20.1

package/dist/utils/charts/mock_data.js

@@ -205,7 +205,5 @@ const mockSecondaryTrendlineData = [{
   name: 'Median line',
   data: [['Joe', 220], ['Sarah', 392], ['Tom', 291], ['Mary', 594], ['Mike', 320], ['Ben', 230], ['Jane', 120], ['Anne', 290]]
 }];
-var mock_data = {};
 
-export default mock_data;
 export { mockAnnotationsConfigs, mockAnnotationsSeries, mockDefaultBarChartConfig, mockDefaultBarData, mockDefaultChartOptions, mockDefaultDataZoomConfig, mockDefaultLineChartConfig, mockDefaultLineData, mockDefaultStackedBarData, mockDefaultStackedLineData, mockRawBarData, mockSecondaryBarData, mockSecondaryData, mockSecondaryTrendlineData };

package/dist/utils/constants.js

@@ -69,12 +69,12 @@ const formStateOptions = {
   valid: true,
   invalid: false
 };
-const newButtonCategoryOptions = {
+const buttonCategoryOptions = {
   primary: 'primary',
   secondary: 'secondary',
   tertiary: 'tertiary'
 };
-const newButtonVariantOptions = {
+const buttonVariantOptions = {
   default: 'default',
   confirm: 'confirm',
   info: 'info (deprecated)',
@@ -93,9 +93,9 @@ const newButtonVariantOptions = {
   reset: 'gl-reset'
 };
 const badgeForButtonOptions = {
-  [newButtonVariantOptions.default]: badgeVariantOptions.neutral,
-  [newButtonVariantOptions.confirm]: badgeVariantOptions.info,
-  [newButtonVariantOptions.danger]: badgeVariantOptions.danger
+  [buttonVariantOptions.default]: badgeVariantOptions.neutral,
+  [buttonVariantOptions.confirm]: badgeVariantOptions.info,
+  [buttonVariantOptions.danger]: badgeVariantOptions.danger
 };
 const newDropdownVariantOptions = {
   default: 'default',
@@ -106,11 +106,11 @@ const newDropdownVariantOptions = {
   danger: 'danger',
   link: 'link'
 };
-const newButtonSizeOptions = {
+const buttonSizeOptions = {
   small: 'small',
   medium: 'medium'
 };
-const newButtonSizeOptionsMap = {
+const buttonSizeOptionsMap = {
   small: 'sm',
   medium: 'md'
 }; // size options all have corresponding styles (e.g. .s12 defined in icon.scss)
@@ -251,4 +251,4 @@ const loadingIconSizes = {
   'xl (64x64)': 'xl'
 };
 
-export { COMMA, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, colorThemes, columnOptions, defaultDateFormat, drawerVariants, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, newButtonCategoryOptions, newButtonSizeOptions, newButtonSizeOptionsMap, newButtonVariantOptions, newDropdownVariantOptions, popoverPlacements, resizeDebounceTime, sizeOptions, sizeOptionsWithNoDefault, tabsButtonDefaults, targetOptions, 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, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, newDropdownVariantOptions, popoverPlacements, resizeDebounceTime, sizeOptions, sizeOptionsWithNoDefault, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/dist/utils/use_fake_date.js

@@ -6,14 +6,14 @@ import MockDate from 'mockdate';
  *
  * Usage:
  *
- * import useFakeDate from '../../../../tests/utils/use_fake_date';
+ * import { useFakeDate } from '../../../../tests/utils/use_fake_date';
  * documentedStoriesOf('some|story')
  * .add('default', () => ({
  *   mixins: [useFakeDate()],
  * })
  */
 
-var use_fake_date = (() => {
+const useFakeDate = () => {
   if (process.env.IS_VISUAL_TEST) {
     return {
       created() {
@@ -28,6 +28,6 @@ var use_fake_date = (() => {
   }
 
   return {};
-});
+};
 
-export default use_fake_date;
+export { useFakeDate };

package/dist/utils/validation_utils.js

@@ -8,7 +8,5 @@ const getValidationInfoText = (validation = {}) => {
       return '';
   }
 };
-var validation_utils = {};
 
-export default validation_utils;
 export { getValidationInfoText };

package/documentation/components_documentation.js

@@ -73,7 +73,6 @@ export { default as GlLabelDocumentation } from '../src/components/base/label/la
 export { default as GlDatepickerDocumentation } from '../src/components/base/datepicker/datepicker.documentation';
 export { default as GlTokenDocumentation } from '../src/components/base/token/token.documentation';
 export { default as GlToggleDocumentation } from '../src/components/base/toggle/toggle.documentation';
-export { default as GlDaterangePickerDocumentation } from '../src/components/base/daterange_picker/daterange_picker.documentation';
 export { default as GlSortingDocumentation } from '../src/components/base/sorting/sorting.documentation';
 export { default as GlSortingItemDocumentation } from '../src/components/base/sorting/sorting_item.documentation';
 export { default as GlInfiniteScrollDocumentation } from '../src/components/base/infinite_scroll/infinite_scroll.documentation';
@@ -93,8 +92,6 @@ export { default as GlFilteredSearchTokenSegmentDocumentation } from '../src/com
 export { default as GlFilteredSearchDocumentation } from '../src/components/base/filtered_search/filtered_search.documentation';
 export { default as GlBroadcastMessageDocumentation } from '../src/components/base/broadcast_message/broadcast_message.documentation';
 export { default as GlCollapseDocumentation } from '../src/components/base/collapse/collapse.documentation';
-export { default as GlAccordionDocumentation } from '../src/components/base/accordion/accordion.documentation';
-export { default as GlAccordionItemDocumentation } from '../src/components/base/accordion/accordion_item.documentation';
 export { default as GlCarouselDocumentation } from '../src/components/base/carousel/carousel.documentation';
 export { default as GlSafeLinkDirectiveDocumentation } from '../src/directives/safe_link/safe_link.documentation';
 export { default as GlSafeHtmlDirectiveDocumentation } from '../src/directives/safe_html/safe_html.documentation';

package/documentation/documented_stories.js

@@ -84,6 +84,11 @@ export const setupStorybookReadme = () =>
         'GlFriendlyWrap',
         'GlLoadingIcon',
         'GlDeprecatedSkeletonLoading',
+        'GlCard',
+        'GlFormCheckbox',
+        'GlAccordion',
+        'GlAccordionItem',
+        'GlDaterangePicker',
       ],
       components: {
         GlComponentDocumentation,

package/index.js

@@ -106,6 +106,6 @@ export { default as GlTooltipDirective } from './src/directives/tooltip';
 export { default as GlResizeObserverDirective } from './src/directives/resize_observer/resize_observer';
 export { default as GlCollapseToggleDirective } from './src/directives/collapse_toggle';
 export { SafeLinkDirective as GlSafeLinkDirective } from './src/directives/safe_link/safe_link';
-export { default as GlSafeHtmlDirective } from './src/directives/safe_html/safe_html';
+export { SafeHtmlDirective as GlSafeHtmlDirective } from './src/directives/safe_html/safe_html';
 export { OutsideDirective as GlOutsideDirective } from './src/directives/outside/outside';
 export { HoverLoadDirective as GlHoverLoadDirective } from './src/directives/hover_load/hover_load';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.18.0",
+  "version": "32.20.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "@babel/standalone": "^7.0.0",
-    "bootstrap-vue": "2.19.0",
+    "bootstrap-vue": "2.20.1",
     "copy-to-clipboard": "^3.0.8",
     "dompurify": "^2.3.3",
     "echarts": "^4.9.0",
@@ -84,19 +84,19 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "9.4.0",
     "@gitlab/stylelint-config": "2.3.0",
-    "@gitlab/svgs": "1.213.0",
+    "@gitlab/svgs": "1.218.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.3.9",
-    "@storybook/addon-docs": "6.3.9",
-    "@storybook/addon-essentials": "6.3.9",
+    "@storybook/addon-a11y": "6.3.12",
+    "@storybook/addon-docs": "6.3.12",
+    "@storybook/addon-essentials": "6.3.12",
     "@storybook/addon-knobs": "6.3.1",
-    "@storybook/addon-storyshots": "6.3.9",
-    "@storybook/addon-storyshots-puppeteer": "6.3.9",
-    "@storybook/addon-viewport": "6.3.9",
-    "@storybook/theming": "6.3.9",
-    "@storybook/vue": "6.3.9",
+    "@storybook/addon-storyshots": "6.3.12",
+    "@storybook/addon-storyshots-puppeteer": "6.3.12",
+    "@storybook/addon-viewport": "6.3.12",
+    "@storybook/theming": "6.3.12",
+    "@storybook/vue": "6.3.12",
     "@vue/test-utils": "1.1.3",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",

package/src/components/base/accordion/accordion.md

@@ -1,7 +1,3 @@
-# GlAccordion
-
-<!-- STORY -->
-
 Accordions are used to group similar content and hide or show it depending on user needs or
 preferences. Accordions give users more granular control over the interface and help digest content
 in stages, rather than all at once.

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

@@ -1,30 +1,68 @@
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import readme from './accordion.md';
 import GlAccordion from './accordion.vue';
 import GlAccordionItem from './accordion_item.vue';
 
-const components = {
-  GlAccordion,
-  GlAccordionItem,
-};
-
-documentedStoriesOf('base/accordion', readme).add('default', () => ({
-  components,
-  template: `
-    <gl-accordion :header-level="3">
-      <gl-accordion-item title="Item 1">
+const template = `
+    <gl-accordion :auto-collapse="autoCollapse" :header-level="headerLevel">
+      <gl-accordion-item title="Item 1" :header-level="headerLevel">
         Each accordion can be expanded or collapsed independently of others.
       </gl-accordion-item>
 
-      <gl-accordion-item title="Item 2">
-        If you want the other accordion items to collapse when one is open, please see
-        <code>Collapse Other</code> example.
-      </gl-accordion-item>
-
-      <gl-accordion-item title="Item 3">
+      <gl-accordion-item title="Item 2" :header-level="headerLevel">
         If you want to have an accordion item to be initially visible, please see
-        <code>Initial Visible</code> example.
+        <code>Initially Expanded</code> example for the <code>GLAccordionItem</code>.
+      </gl-accordion-item>
+      
+      <gl-accordion-item title="Item 3" :header-level="headerLevel" :visible="autoCollapse">
+        If you want the other accordion items to collapse when one is open, please see
+        <code>Auto Collapse</code> example.
       </gl-accordion-item>
     </gl-accordion>
-    `,
-}));
+    `;
+
+const defaultValue = (prop) => GlAccordion.props[prop].default;
+
+const generateProps = ({ autoCollapse = defaultValue('autoCollapse'), headerLevel = 3 } = {}) => ({
+  autoCollapse,
+  headerLevel,
+});
+
+const Template = (args) => ({
+  components: {
+    GlAccordion,
+    GlAccordionItem,
+  },
+  props: Object.keys(args),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const AutoCollapse = Template.bind({});
+AutoCollapse.args = generateProps({ autoCollapse: true });
+
+export default {
+  followsDesignSystem: true,
+  title: 'base/accordion',
+  component: GlAccordion,
+  parameters: {
+    bootstrapComponent: 'b-collapse',
+    storyshots: { disable: true },
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    headerLevel: {
+      control: {
+        type: 'select',
+        options: [1, 2, 3, 4, 5, 6],
+      },
+    },
+    autoCollapse: { control: { disable: true } },
+  },
+};

package/src/components/base/accordion/accordion.vue

@@ -10,11 +10,17 @@ export default {
     };
   },
   props: {
+    /*
+    When true, will have the effect of closing other accordion items when one accordion item is visible.
+     */
     autoCollapse: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /*
+    The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.
+     */
     headerLevel: {
       type: Number,
       required: true,
@@ -28,6 +34,7 @@ export default {
 
 <template>
   <div>
+    <!-- @slot `GLAccordionItem`s list -->
     <slot></slot>
   </div>
 </template>

package/src/components/base/accordion/accordion_item.md

@@ -1,7 +1,3 @@
-# GlAccordionItem
-
-<!-- STORY -->
-
 ## Usage
 
 Use `GlAccordionItem` to place the accordion item within your accordion.

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

@@ -1,16 +1,61 @@
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import readme from './accordion_item.md';
 import GlAccordionItem from './accordion_item.vue';
 
-const components = {
-  GlAccordionItem,
-};
-
-documentedStoriesOf('base/accordion/accordion-item', readme).add('default', () => ({
-  components,
-  template: `
-      <gl-accordion-item title="Item 1" visible>
+const template = `
+    <gl-accordion-item :title="title" :visible="visible" :header-level="headerLevel">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, maiores.
       </gl-accordion-item>
-    `,
-}));
+    `;
+
+const defaultValue = (prop) => GlAccordionItem.props[prop].default;
+
+const generateProps = ({
+  visible = defaultValue('visible'),
+  headerLevel = 3,
+  title = 'Accordion Item Title',
+} = {}) => ({
+  visible,
+  headerLevel,
+  title,
+});
+
+const Template = (args) => ({
+  components: {
+    GlAccordionItem,
+  },
+  props: Object.keys(args),
+  template,
+  provide: {
+    defaultHeaderLevel: defaultValue('headerLevel'),
+    accordionSetId: '1',
+  },
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const InitiallyExpanded = Template.bind({});
+InitiallyExpanded.args = generateProps({ visible: true, title: 'Item Content Initially Expanded' });
+
+export default {
+  title: 'base/accordion/accordion-item',
+  component: GlAccordionItem,
+  bootstrapComponent: 'b-collapse',
+  parameters: {
+    storyshots: { disable: true },
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    headerLevel: {
+      control: {
+        type: 'select',
+        options: [1, 2, 3, 4, 5, 6],
+      },
+    },
+  },
+};

package/src/components/base/accordion/accordion_item.vue

@@ -16,15 +16,24 @@ export default {
   inject: ['accordionSetId', 'defaultHeaderLevel'],
   inheritAttrs: false,
   props: {
+    /*
+    Used to set the title of accordion link
+    */
     title: {
       type: String,
       required: true,
     },
+    /*
+When set, it will ensure the accordion item is initially visible
+ */
     visible: {
       type: Boolean,
       default: false,
       required: false,
     },
+    /*
+        The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.,
+*/
     headerLevel: {
       type: Number,
       required: false,
@@ -75,6 +84,7 @@ export default {
       class="gl-mt-3 gl-font-base"
       :data-testid="`accordion-item-collapse-${accordionItemId}`"
     >
+      <!-- @slot Item content -->
       <slot></slot>
     </b-collapse>
   </div>

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { newButtonCategoryOptions } from '../../../utils/constants';
+import { buttonCategoryOptions } from '../../../utils/constants';
 import GlAlert from './alert.vue';
 
 const DummyComponent = {
@@ -89,7 +89,7 @@ describe('Alert component', () => {
 
       const props = button.props();
       expect('href' in props).toBe(false);
-      expect(props.category).toEqual(newButtonCategoryOptions.primary);
+      expect(props.category).toEqual(buttonCategoryOptions.primary);
     });
 
     it('emits a primaryAction event when primary button is clicked', () => {
@@ -126,7 +126,7 @@ describe('Alert component', () => {
 
       const attrs = button.attributes();
       expect('href' in attrs).toBe(false);
-      expect(attrs.category).toEqual(newButtonCategoryOptions.secondary);
+      expect(attrs.category).toEqual(buttonCategoryOptions.secondary);
     });
 
     it('emits a secondaryAction event when secondary button is clicked', () => {

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

@@ -2,7 +2,7 @@
 import {
   alertVariantOptions,
   alertVariantIconMap,
-  newButtonCategoryOptions,
+  buttonCategoryOptions,
 } from '../../../utils/constants';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 import GlButton from '../button/button.vue';
@@ -102,7 +102,7 @@ export default {
           attrs: {
             href: this.primaryButtonLink,
             variant: 'confirm',
-            category: newButtonCategoryOptions.primary,
+            category: buttonCategoryOptions.primary,
           },
           listeners: {
             click: this.primaryButtonClicked,
@@ -113,7 +113,7 @@ export default {
           attrs: {
             href: this.secondaryButtonLink,
             variant: 'default',
-            category: newButtonCategoryOptions.secondary,
+            category: buttonCategoryOptions.secondary,
           },
           listeners: {
             click: this.secondaryButtonClicked,

package/src/components/base/badge/badge.scss

@@ -18,6 +18,7 @@
       // Needed to override bootstrap's badge variant background
       background-color: $bg;
       box-shadow: inset 0 0 0 $gl-border-size-1 $border-color;
+      @include gl-text-decoration-none;
     }
 
     &:focus {

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

@@ -3,4 +3,22 @@ import description from './button.md';
 export default {
   description,
   followsDesignSystem: true,
+  bootstrapComponent: 'b-button',
+  bootstrapPropsInfo: {
+    category: {
+      enum: 'buttonCategoryOptions',
+    },
+    variant: {
+      enum: 'buttonVariantOptions',
+    },
+    size: {
+      enum: 'buttonSizeOptions',
+    },
+  },
+  events: [
+    {
+      event: 'click',
+      description: 'Emitted when clicked on button',
+    },
+  ],
 };

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

@@ -1,9 +1,9 @@
 import { GlButton } from '../../../../index';
 import {
-  newButtonCategoryOptions,
-  newButtonVariantOptions,
-  newButtonSizeOptions,
+  buttonCategoryOptions,
+  buttonVariantOptions,
   badgeForButtonOptions,
+  buttonSizeOptions,
   targetOptions,
 } from '../../../utils/constants';
 import readme from './button.md';
@@ -105,8 +105,8 @@ export const IconButton = (args, { argTypes }) => ({
     `,
 });
 IconButton.args = generateProps({
-  category: newButtonCategoryOptions.primary,
-  variant: newButtonVariantOptions.danger,
+  category: buttonCategoryOptions.primary,
+  variant: buttonVariantOptions.danger,
 });
 
 export const DropdownButton = (args, { argTypes }) => ({
@@ -186,7 +186,7 @@ export const DropdownIconOnlyButton = (args, { argTypes }) => ({
     `),
 });
 DropdownIconOnlyButton.args = generateProps({
-  category: newButtonCategoryOptions.tertiary,
+  category: buttonCategoryOptions.tertiary,
 });
 
 export const DropdownSplitButton = (args, { argTypes }) => ({
@@ -356,10 +356,10 @@ LabelButton.parameters = { controls: { disable: true } };
 export const AllVariantsAndCategories = (args, { argTypes = {} }) => ({
   props: Object.keys(argTypes),
   components,
-  variants: Object.keys(newButtonVariantOptions).filter(
-    (variant) => !newButtonVariantOptions[variant].includes('deprecated')
+  variants: Object.keys(buttonVariantOptions).filter(
+    (variant) => !buttonVariantOptions[variant].includes('deprecated')
   ),
-  categories: newButtonCategoryOptions,
+  categories: buttonCategoryOptions,
   style: {
     display: 'grid',
     gridTemplateColumns: 'repeat(3, 150px)',
@@ -453,7 +453,7 @@ export const Badges = (args, { argTypes = {} }) => ({
   props: Object.keys(argTypes),
   components,
   variants: Object.keys(badgeForButtonOptions),
-  categories: newButtonCategoryOptions,
+  categories: buttonCategoryOptions,
   style: {
     display: 'grid',
     gridTemplateColumns: 'repeat(3, 200px)',
@@ -513,19 +513,19 @@ export default {
     category: {
       control: {
         type: 'select',
-        options: newButtonCategoryOptions,
+        options: buttonCategoryOptions,
       },
     },
     variant: {
       control: {
         type: 'select',
-        options: newButtonVariantOptions,
+        options: buttonVariantOptions,
       },
     },
     size: {
       control: {
         type: 'select',
-        options: newButtonSizeOptions,
+        options: buttonSizeOptions,
       },
     },
     target: {

package/src/components/base/button/button.vue

@@ -1,10 +1,10 @@
 <script>
 import { BButton } from 'bootstrap-vue';
 import {
-  newButtonCategoryOptions,
-  newButtonVariantOptions,
-  newButtonSizeOptions,
-  newButtonSizeOptionsMap,
+  buttonCategoryOptions,
+  buttonVariantOptions,
+  buttonSizeOptions,
+  buttonSizeOptionsMap,
 } from '../../../utils/constants';
 import { logWarning } from '../../../utils/utils';
 import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
@@ -22,20 +22,20 @@ export default {
     category: {
       type: String,
       required: false,
-      default: newButtonCategoryOptions.primary,
-      validator: (value) => Object.keys(newButtonCategoryOptions).includes(value),
+      default: buttonCategoryOptions.primary,
+      validator: (value) => Object.keys(buttonCategoryOptions).includes(value),
     },
     variant: {
       type: String,
       required: false,
-      default: newButtonVariantOptions.default,
-      validator: (value) => Object.keys(newButtonVariantOptions).includes(value),
+      default: buttonVariantOptions.default,
+      validator: (value) => Object.keys(buttonVariantOptions).includes(value),
     },
     size: {
       type: String,
       required: false,
-      default: newButtonSizeOptions.medium,
-      validator: (value) => Object.keys(newButtonSizeOptions).includes(value),
+      default: buttonSizeOptions.medium,
+      validator: (value) => Object.keys(buttonSizeOptions).includes(value),
     },
     selected: {
       type: Boolean,
@@ -81,14 +81,14 @@ export default {
     buttonClasses() {
       const classes = ['gl-button'];
       const nonCategoryVariants = [
-        newButtonVariantOptions.dashed,
-        newButtonVariantOptions.link,
-        newButtonVariantOptions.reset,
+        buttonVariantOptions.dashed,
+        buttonVariantOptions.link,
+        buttonVariantOptions.reset,
       ];
 
       if (
         !nonCategoryVariants.includes(this.variant) &&
-        this.category !== newButtonCategoryOptions.primary
+        this.category !== buttonCategoryOptions.primary
       ) {
         classes.push(`btn-${this.variant}-${this.category}`);
       }
@@ -106,7 +106,7 @@ export default {
       return classes;
     },
     buttonSize() {
-      return newButtonSizeOptionsMap[this.size];
+      return buttonSizeOptionsMap[this.size];
     },
   },
   mounted() {