@gitlab/ui 43.9.3 → 43.12.0

package/dist/utils/constants.js

@@ -43,11 +43,6 @@ const variantCssColorMap = {
   danger: 'gl-text-red-500'
 };
 const targetOptions = ['_self', '_blank', '_parent', '_top', null];
-const sizeOptions = {
-  default: null,
-  sm: 'sm',
-  lg: 'lg'
-};
 const labelSizeOptions = {
   default: null,
   sm: 'sm'
@@ -200,8 +195,7 @@ const tabsButtonDefaults = {
 };
 const tokenVariants = ['default', 'search-type', 'search-value'];
 const resizeDebounceTime = 200;
-const variantOptionsWithNoDefault = appendDefaultOption(variantOptions);
-const sizeOptionsWithNoDefault = appendDefaultOption(sizeOptions); // Datetime constants
+const variantOptionsWithNoDefault = appendDefaultOption(variantOptions); // Datetime constants
 
 const defaultDateFormat = 'YYYY-MM-DD';
 const bannerVariants = ['promotion', 'introduction'];
@@ -250,4 +244,4 @@ const loadingIconSizes = {
   'xl (64x64)': 'xl'
 };
 
-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 };
+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, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "43.9.3",
+  "version": "43.12.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -94,9 +94,9 @@
     "@storybook/theming": "6.5.10",
     "@storybook/vue": "6.5.10",
     "@vue/test-utils": "1.3.0",
-    "@vue/vue2-jest": "27.0.0",
+    "@vue/vue2-jest": "29.0.0",
     "autoprefixer": "^9.7.6",
-    "babel-jest": "^27.5.1",
+    "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-require-context-hook": "^1.0.0",
@@ -112,10 +112,9 @@
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^27.5.1",
-    "jest-circus": "27.5.1",
-    "jest-environment-jsdom": "27.5.1",
-    "jest-raw-loader": "^1.0.1",
+    "jest": "^29.0.1",
+    "jest-circus": "29.0.1",
+    "jest-environment-jsdom": "29.0.1",
     "jest-serializer-vue": "^2.0.2",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",

package/scss_to_js/scss_variables.js

@@ -26,6 +26,7 @@ export const breakpointLg = '992px'
 export const breakpointXl = '1200px'
 export const breakpoints = '(xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)'
 export const limitedLayoutWidth = '990px'
+export const containerXl = '1280px'
 export const black = '#000'
 export const blackNormal = '#333'
 export const white = '#fff'

package/scss_to_js/scss_variables.json

@@ -167,6 +167,11 @@
       "value": "990px",
       "compiledValue": "990px"
     },
+    {
+      "name": "$container-xl",
+      "value": "1280px",
+      "compiledValue": "1280px"
+    },
     {
       "name": "$black",
       "value": "#000",

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

@@ -54,4 +54,21 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
     }
   }
 }
+
+@each $name, $size in $gl-form-input-sizes {
+  .gl-form-select-#{$name} {
+    max-width: $size;
+  }
+
+  @each $breakpointName, $breakpointSize in $gl-form-input-sizes {
+    @if $breakpointName != xs {
+      .gl-#{$breakpointName}-form-select-#{$name} {
+        @include gl-media-breakpoint-up($breakpointName) {
+          max-width: $size;
+        }
+      }
+    }
+  }
+}
+
 /* stylelint-enable property-no-vendor-prefix */

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

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { sizeOptions, formStateOptions } from '../../../../utils/constants';
+import { formStateOptions, formInputSizes } from '../../../../utils/constants';
 import { formSelectOptions } from './constants';
 import GlFormSelect from './form_select.vue';
 
@@ -33,13 +33,13 @@ describe('GlFormSelect', () => {
 
   describe('size prop', () => {
     // Exclude the default null value
-    const nonNullSizes = excludeDefaultNull(sizeOptions);
+    const nonNullSizes = excludeDefaultNull(formInputSizes);
 
     it.each(nonNullSizes)('adds correct class for size %s', (size) => {
       createComponent({ size });
 
       expect(wrapper.classes().sort()).toEqual(
-        [...DEFAULT_SELECT_CLASSES, `custom-select-${size}`].sort()
+        [...DEFAULT_SELECT_CLASSES, `gl-form-select-${size}`].sort()
       );
     });
 

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

@@ -1,5 +1,5 @@
 import { GlFormSelect } from '../../../../index';
-import { sizeOptions, formStateOptions } from '../../../../utils/constants';
+import { formStateOptions, formInputSizes } from '../../../../utils/constants';
 import { formSelectOptions } from './constants';
 import readme from './form_select.md';
 
@@ -90,7 +90,7 @@ export default {
   },
   argTypes: {
     size: {
-      options: sizeOptions,
+      options: formInputSizes,
       control: 'select',
     },
     state: {

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

@@ -1,15 +1,52 @@
 <script>
 import { BFormSelect } from 'bootstrap-vue';
+import { isObject } from 'lodash';
+import { formInputSizes } from '../../../../utils/constants';
 
 export default {
   components: {
     BFormSelect,
   },
   inheritAttrs: false,
+  props: {
+    /**
+     * Maximum width of the Select
+     */
+    size: {
+      type: [String, Object],
+      required: false,
+      default: null,
+      validator: (value) => {
+        const sizes = isObject(value) ? Object.values(value) : [value];
+
+        return sizes.every((size) => Object.values(formInputSizes).includes(size));
+      },
+    },
+  },
+  computed: {
+    cssClasses() {
+      if (this.size === null) {
+        return [];
+      }
+
+      if (isObject(this.size)) {
+        const { default: defaultSize, ...nonDefaultSizes } = this.size;
+
+        return [
+          ...(defaultSize ? [`gl-form-select-${defaultSize}`] : []),
+          ...Object.entries(nonDefaultSizes).map(
+            ([breakpoint, size]) => `gl-${breakpoint}-form-select-${size}`
+          ),
+        ];
+      }
+
+      return [`gl-form-select-${this.size}`];
+    },
+  },
 };
 </script>
 <template>
-  <b-form-select class="gl-form-select" v-bind="$attrs" v-on="$listeners">
+  <b-form-select class="gl-form-select" v-bind="$attrs" :class="cssClasses" v-on="$listeners">
     <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>

package/src/components/base/markdown/markdown.scss

@@ -155,6 +155,22 @@
     @include gl-py-1;
   }
 
+  pre {
+    @include gl-py-3;
+    @include gl-px-4;
+    @include gl-rounded-base;
+    @include gl-inset-border-1-gray-100;
+    @include gl-my-7;
+    @include gl-overflow-auto;
+
+    code {
+      @include gl-bg-white;
+      @include gl-rounded-0;
+      @include gl-text-gray-900;
+      @include gl-p-0;
+    }
+  }
+
   .audio-container {
     @include gl-display-inline-flex;
     @include gl-flex-direction-column;

package/src/components/base/markdown/markdown_typescale_demo.html

@@ -1,32 +1,46 @@
 <h1>MD Doc h1 • GitLab uses "GitLab Flavored Markdown" (GFM)</h1>
-<p>MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
-  significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
-  requests, milestones, snippets and more.</p>
-<p class="sm">MD Doc Small Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
-  in a few significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues,
-  merge requests, milestones, snippets and more.</p>
+<p>
+  MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
+  in a few significant ways to add some useful functionality. You can use GFM in the following
+  areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
+<p class="sm">
+  MD Doc Small Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard
+  Markdown in a few significant ways to add some useful functionality. You can use GFM in the
+  following areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
 <p class="monospace">UI Monospace</p>
 <p class="monospace sm">UI Small Monospace</p>
 <h2>MD Doc h2 • GitLab uses "GitLab Flavored Markdown" (GFM)</h2>
-<p>MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
-  significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
-  requests, milestones, snippets and more.</p>
+<p>
+  MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
+  in a few significant ways to add some useful functionality. You can use GFM in the following
+  areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
 <h3>MD Doc h3 • GitLab uses "GitLab Flavored Markdown" (GFM)</h3>
-<p>MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
-  significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
-  requests, milestones, snippets and more.</p>
+<p>
+  MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
+  in a few significant ways to add some useful functionality. You can use GFM in the following
+  areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
 <h4>MD Doc h4 • GitLab uses "GitLab Flavored Markdown" (GFM)</h4>
-<p>MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
-  significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
-  requests, milestones, snippets and more.</p>
+<p>
+  MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
+  in a few significant ways to add some useful functionality. You can use GFM in the following
+  areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
 <h5>MD Doc h5 • GitLab uses "GitLab Flavored Markdown" (GFM)</h5>
-<p>MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
-  significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
-  requests, milestones, snippets and more.</p>
+<p>
+  MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
+  in a few significant ways to add some useful functionality. You can use GFM in the following
+  areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
 <h6>MD Doc h6 • GitLab uses "GitLab Flavored Markdown" (GFM)</h6>
-<p>MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
-  significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
-  requests, milestones, snippets and more.</p>
+<p>
+  MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
+  in a few significant ways to add some useful functionality. You can use GFM in the following
+  areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
 
 <table>
   <thead>
@@ -38,46 +52,31 @@
   </thead>
   <tbody>
     <tr>
+      <td>Test summary</td>
+      <td>Test summary contained 3 failed, 1 fixed test result out of 15 total tests</td>
       <td>
-        Test summary
-      </td>
-      <td>
-        Test summary contained 3 failed, 1 fixed test result out of 15 total tests
-      </td>
-      <td>
-        This is the only one that doesn't include the breakdown in the Level 1 subtext. Does it need to be updated?
+        This is the only one that doesn't include the breakdown in the Level 1 subtext. Does it need
+        to be updated?
       </td>
     </tr>
     <tr>
-      <td>
-        Browser performance
-      </td>
-      <td>
-        Browser performance test metrics: 7 changes
-      </td>
-      <td>
-        Browser performance test metrics detected 7 changes
-      </td>
+      <td>Browser performance</td>
+      <td>Browser performance test metrics: 7 changes</td>
+      <td>Browser performance test metrics detected 7 changes</td>
     </tr>
     <tr>
-      <td>
-        Load performance
-      </td>
-      <td>
-        Load performance test metrics detected 4 changes
-      </td>
-      <td>
-        ✅
-      </td>
+      <td>Load performance</td>
+      <td>Load performance test metrics detected 4 changes</td>
+      <td>✅</td>
     </tr>
   </tbody>
 </table>
 
 <blockquote>
   <p>
-    MD Doc Blockquote • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
-    significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
-    requests, milestones, snippets and more.
+    MD Doc Blockquote • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard
+    Markdown in a few significant ways to add some useful functionality. You can use GFM in the
+    following areas: comments, issues, merge requests, milestones, snippets and more.
   </p>
 </blockquote>
 <blockquote>
@@ -102,26 +101,55 @@
 </blockquote>
 <blockquote>
   <blockquote>
-    <p>
-      Nested blockquote
-    </p>
+    <p>Nested blockquote</p>
   </blockquote>
 </blockquote>
 <p>
   This is a paragraph with two types inline diff <span class="idiff addition">addition</span> and
   <span class="idiff deletion">deletion</span>
 </p>
-<p>
-  This block implements the "GitLab Flavored Markdown" <code>Code span</code> styles.
-</p>
+<p>This block implements the "GitLab Flavored Markdown" <code>Code span</code> styles.</p>
 
 <p>
   This is an audio file
   <span class="media-container audio-container">
-    <audio src="file.mp3" controls="true" data-setup="{}" data-title="file.mp3" data-canonical-src="file.mp3"
-      class="gfm">
-    </audio>
-    <a href="file.mp3" target="_blank" rel="noopener noreferrer" title="Download file.mp3" data-canonical-src="file.mp3"
-      data-link="true" class="gfm">file.mp3</a>
+    <audio
+      src="file.mp3"
+      controls="true"
+      data-setup="{}"
+      data-title="file.mp3"
+      data-canonical-src="file.mp3"
+      class="gfm"
+    ></audio>
+    <a
+      href="file.mp3"
+      target="_blank"
+      rel="noopener noreferrer"
+      title="Download file.mp3"
+      data-canonical-src="file.mp3"
+      data-link="true"
+      class="gfm"
+      >file.mp3</a
+    >
   </span>
 </p>
+<p>Code block</p>
+<pre class="code"><code>pre {
+  @include gl-py-4;
+  @include gl-px-6;
+
+  code {
+    @include gl-bg-white;
+    @include gl-rounded-0;
+    @include gl-text-gray-900;
+    @include gl-px-0;
+    @include gl-py-0;
+  }
+}
+</code></pre>
+<p>Code block with long lines scrolls horizontally</p>
+<pre
+  class="code"
+><code>MD Doc Small Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
+significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge requests, milestones, snippets and more.
+</code></pre>

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

@@ -79,6 +79,7 @@ const generateProps = ({
   textSrOnly = defaultValue('textSrOnly'),
   icon = '',
   multiple = defaultValue('multiple'),
+  isCheckCentered = defaultValue('isCheckCentered'),
   ariaLabelledby,
   startOpened = true,
 } = {}) => ({
@@ -94,6 +95,7 @@ const generateProps = ({
   textSrOnly,
   icon,
   multiple,
+  isCheckCentered,
   ariaLabelledby,
   startOpened,
 });
@@ -120,6 +122,7 @@ const template = (content, label = '') => `
       :text-sr-only="textSrOnly"
       :icon="icon"
       :multiple="multiple"
+      :is-check-centered="isCheckCentered"
       :aria-labelledby="ariaLabelledby"
     >
       ${content}
@@ -183,7 +186,10 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
                                 </div>
                               </template>`),
 });
-HeaderAndFooter.args = generateProps({ toggleText: 'Header and Footer', multiple: true });
+HeaderAndFooter.args = generateProps({
+  toggleText: 'Header and Footer',
+  multiple: true,
+});
 HeaderAndFooter.decorators = [makeContainer({ height: '370px' })];
 
 export const CustomListItem = (args, { argTypes }) => ({
@@ -225,6 +231,7 @@ export const CustomListItem = (args, { argTypes }) => ({
         :text-sr-only="textSrOnly"
         :icon="icon"
         :multiple="multiple"
+        :is-check-centered="isCheckCentered"
         :aria-labelledby="ariaLabelledby"
       >
         <template #list-item="{ item }">
@@ -247,6 +254,7 @@ CustomListItem.args = generateProps({
     { value: 'markian', text: 'Mark Florian', secondaryText: '@markian', icon: 'bin' },
   ],
   multiple: true,
+  isCheckCentered: true,
 });
 CustomListItem.decorators = [makeContainer({ height: '200px' })];
 

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -152,6 +152,14 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Center selected item checkmark
+     */
+    isCheckCentered: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     /**
      * The `aria-labelledby` attribute value for the toggle button
      */
@@ -335,6 +343,7 @@ export default {
         :key="item.value"
         :is-selected="isSelected(item)"
         :is-focused="nextFocusedItemIndex === index"
+        :is-check-centered="isCheckCentered"
         @select="onSelect(item, $event)"
       >
         <!-- @slot Custom template of the listbox item -->

package/src/components/base/new_dropdowns/listbox/listbox_item.spec.js

@@ -80,6 +80,31 @@ describe('GlListboxItem', () => {
     });
   });
 
+  describe('checkbox', () => {
+    describe('is NOT centered', () => {
+      beforeEach(() => {
+        buildWrapper({ isSelected: true });
+      });
+
+      it('should not center check icon by default', () => {
+        expect(findCheckIcon().classes()).toEqual(
+          expect.arrayContaining(['gl-mt-3', 'gl-align-self-start'])
+        );
+      });
+    });
+
+    describe('is centered', () => {
+      beforeEach(() => {
+        buildWrapper({ isSelected: true, isCheckCentered: true });
+      });
+      it('should center the check icon', () => {
+        expect(findCheckIcon().classes()).not.toEqual(
+          expect.arrayContaining(['gl-mt-3', 'gl-align-self-start'])
+        );
+      });
+    });
+  });
+
   describe('tabindex', () => {
     it('should set tabindex to `-1` when item is not focused', () => {
       buildWrapper({ isFocused: false });

package/src/components/base/new_dropdowns/listbox/listbox_item.vue

@@ -18,6 +18,20 @@ export default {
       default: false,
       required: false,
     },
+    isCheckCentered: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    checkedClasses() {
+      if (this.isCheckCentered) {
+        return '';
+      }
+
+      return 'gl-mt-3 gl-align-self-start';
+    },
   },
   methods: {
     toggleSelection() {
@@ -48,8 +62,11 @@ export default {
       <gl-icon
         name="mobile-issue-close"
         data-testid="dropdown-item-checkbox"
-        class="gl-mt-3 gl-align-self-start"
-        :class="['gl-new-dropdown-item-check-icon', { 'gl-visibility-hidden': !isSelected }]"
+        :class="[
+          'gl-new-dropdown-item-check-icon',
+          { 'gl-visibility-hidden': !isSelected },
+          checkedClasses,
+        ]"
       />
       <span class="gl-new-dropdown-item-text-wrapper">
         <slot></slot>

package/src/scss/utilities.scss

@@ -4559,6 +4559,14 @@
   max-width: $limited-layout-width !important;
 }
 
+.gl-max-w-container-xl {
+  max-width: $container-xl;
+}
+
+.gl-max-w-container-xl\! {
+  max-width: $container-xl !important;
+}
+
 .gl-h-auto {
   height: auto;
 }

package/src/scss/utility-mixins/sizing.scss

@@ -155,6 +155,10 @@
   max-width: $limited-layout-width;
 }
 
+@mixin gl-max-w-container-xl {
+  max-width: $container-xl;
+}
+
 @mixin gl-h-auto {
   height: auto;
 }

package/src/scss/variables.scss

@@ -41,6 +41,7 @@ $breakpoints: (
 
 // Max widths
 $limited-layout-width: 990px !default;
+$container-xl: 1280px !default;
 
 // Color schema
 $black: #000 !default;

package/src/utils/constants.js

@@ -48,12 +48,6 @@ export const variantCssColorMap = {
 
 export const targetOptions = ['_self', '_blank', '_parent', '_top', null];
 
-export const sizeOptions = {
-  default: null,
-  sm: 'sm',
-  lg: 'lg',
-};
-
 export const labelSizeOptions = {
   default: null,
   sm: 'sm',
@@ -234,7 +228,6 @@ export const tokenVariants = ['default', 'search-type', 'search-value'];
 export const resizeDebounceTime = 200;
 
 export const variantOptionsWithNoDefault = appendDefaultOption(variantOptions);
-export const sizeOptionsWithNoDefault = appendDefaultOption(sizeOptions);
 
 // Datetime constants
 export const defaultDateFormat = 'YYYY-MM-DD';