@gitlab/ui 32.31.0 → 32.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.31.0",
+  "version": "32.32.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/scss_to_js/scss_variables.js

@@ -295,7 +295,6 @@ export const glIconChevronRight = '#{'data:image/svg+xml}'
 export const glIconChevronDown = '#{'data:image/svg+xml}'
 export const defaultIconSize = '1rem'
 export const glIconSizes = '8 12 14 16 24 32 48 72'
-export const glDeprecatedIconSizes = '8 12 14 16 24 32 48 72 10 18'
 export const glDropdownWidth = '15rem'
 export const glDropdownWidthNarrow = '10rem'
 export const glDropdownWidthWide = '25rem'

package/scss_to_js/scss_variables.json

@@ -1557,11 +1557,6 @@
       "value": "8 12 14 16 24 32 48 72",
       "compiledValue": "8 12 14 16 24 32 48 72"
     },
-    {
-      "name": "$gl-deprecated-icon-sizes",
-      "value": "join($gl-icon-sizes, 10 18)",
-      "compiledValue": "8 12 14 16 24 32 48 72 10 18"
-    },
     {
       "name": "$gl-dropdown-width",
       "value": "px-to-rem(240px)",

package/src/components/base/icon/icon.scss

@@ -1,6 +1,6 @@
 .gl-icon {
   fill: currentColor;
-  @each $size in $gl-deprecated-icon-sizes {
+  @each $size in $gl-icon-sizes {
     &.s#{$size} {
       width: #{$size}px;
       height: #{$size}px;

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

@@ -25,6 +25,7 @@ describe('Icon component', () => {
     });
   };
 
+  const validateSize = (size) => Icon.props.size.validator(size);
   const validateName = (name) => Icon.props.name.validator(name);
 
   afterEach(() => {
@@ -52,35 +53,14 @@ describe('Icon component', () => {
   });
 
   describe('size validator', () => {
-    beforeEach(() => {
-      consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
-    });
-
     const maxSize = Math.max(...iconSizeOptions);
 
-    it('fails with size outside options', async () => {
-      createComponent({
-        size: maxSize + 10,
-      });
-
-      expect(consoleSpy).toBeCalledWith(
-        `[gitlab-ui] Unexpected value '${maxSize + 10}' was provided for the icon size`
-      );
-    });
-
-    it('passes with use-deprecated-sizes', () => {
-      createComponent({
-        size: maxSize + 10,
-        useDeprecatedSizes: true,
-      });
-
-      expect(consoleSpy).not.toBeCalled();
+    it('fails with size outside options', () => {
+      expect(validateSize(maxSize + 10)).toBe(false);
     });
 
     it('passes with size in options', () => {
-      createComponent({ size: maxSize });
-
-      expect(consoleSpy).not.toBeCalled();
+      expect(validateSize(maxSize)).toBe(true);
     });
   });
 

package/src/components/base/icon/icon.vue

@@ -55,15 +55,7 @@ export default {
       type: Number,
       required: false,
       default: 16,
-    },
-    /**
-     * Is used to deprecate 10&18 icon sizes iteratively.
-     * More info here https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1232
-     */
-    useDeprecatedSizes: {
-      type: Boolean,
-      required: false,
-      default: false,
+      validator: (value) => iconSizeOptions.includes(value),
     },
   },
   computed: {
@@ -74,13 +66,6 @@ export default {
       return this.size ? `s${this.size}` : '';
     },
   },
-
-  created() {
-    if (!iconSizeOptions.includes(this.size) && !this.useDeprecatedSizes) {
-      // eslint-disable-next-line no-console
-      console.warn(`[gitlab-ui] Unexpected value '${this.size}' was provided for the icon size`);
-    }
-  },
 };
 </script>
 

package/src/scss/variables.scss

@@ -427,12 +427,7 @@ $gl-icon-chevron-down: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="
 
 // Icons
 $default-icon-size: px-to-rem(16px);
-// $gl-deprecated-icon-sizes is used for css classes generation as there are still instances around codebase
-// where $gl-icon-sizes is a new list of supported icon sizes and will be used for icon size validation
-// $gl-deprecated-icon-sizes should be replaced with $gl-icon-sizes in scope
-// of this issue https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1232
 $gl-icon-sizes: 8 12 14 16 24 32 48 72;
-$gl-deprecated-icon-sizes: join($gl-icon-sizes, 10 18);
 
 // Dropdowns
 $gl-dropdown-width: px-to-rem(240px);