@gitlab/ui 78.14.1 → 78.15.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 15 Apr 2024 10:48:52 GMT
+ * Generated on Tue, 16 Apr 2024 20:25:30 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 15 Apr 2024 10:48:52 GMT
+ * Generated on Tue, 16 Apr 2024 20:25:30 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 15 Apr 2024 10:48:52 GMT
+ * Generated on Tue, 16 Apr 2024 20:25:30 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 15 Apr 2024 10:48:52 GMT
+ * Generated on Tue, 16 Apr 2024 20:25:30 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 15 Apr 2024 10:48:52 GMT
+// Generated on Tue, 16 Apr 2024 20:25:30 GMT
 
 $gl-text-tertiary: #737278 !default;
 $gl-text-secondary: #89888d !default;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 15 Apr 2024 10:48:52 GMT
+// Generated on Tue, 16 Apr 2024 20:25:30 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/dist/utils/constants.js

@@ -64,10 +64,6 @@ const variantCssColorMap = {
   danger: 'gl-text-red-500'
 };
 const targetOptions = ['_self', '_blank', '_parent', '_top', null];
-const labelSizeOptions = {
-  default: null,
-  sm: 'sm'
-};
 const viewModeOptions = {
   dark: 'dark',
   light: 'light'
@@ -298,4 +294,4 @@ const loadingIconVariants = {
   dots: 'dots'
 };
 
-export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, loadingIconSizes, loadingIconVariants, 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": "78.14.1",
+  "version": "78.15.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -102,7 +102,7 @@
     "@gitlab/eslint-plugin": "19.5.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.96.0",
+    "@gitlab/svgs": "3.97.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -131,7 +131,7 @@
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "bootstrap": "4.6.2",
-    "cypress": "13.7.2",
+    "cypress": "13.7.3",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",

package/src/components/base/label/label.md

@@ -9,7 +9,6 @@ They provide a quick way to recognize which categories the labeled object belong
   background-color="#D9C2EE"
   title="Label content"
   description="Some content"
-  size="sm"
   tooltipPlacement="top"
   target="http://some.url"
 />

package/src/components/base/label/label.scss

@@ -16,7 +16,7 @@ $label-close-button: '.gl-label-close.gl-button';
     background-color: var(--label-background-color);
   }
 
-  &:focus-within {
+  &:has(*:first-child:focus) {
     @include gl-focus($color: var(--label-background-color, $white), $important: true);
   }
 
@@ -30,7 +30,8 @@ $label-close-button: '.gl-label-close.gl-button';
     @include gl-max-w-full;
 
     &:focus,
-    &:hover {
+    &:hover,
+    &:focus:active {
       @include gl-reset-color;
       @include gl-shadow-none;
       @include gl-outline-none;
@@ -40,16 +41,18 @@ $label-close-button: '.gl-label-close.gl-button';
   .gl-label-text,
   .gl-label-text-scoped {
     @include gl-display-block;
-    @include gl-px-3;
-    @include gl-py-2;
+    padding-block: $gl-spacing-scale-1;
+    padding-inline: calc(#{$gl-spacing-scale-3} - 2px);
     @include str-truncated($label-max-width);
   }
 
   > #{$label-close-button} {
     @include gl-border-0;
     @include gl-display-flex;
-    @include gl-ml-n2;
-    @include gl-mr-2;
+    width: px-to-rem(14px);
+    height: px-to-rem(14px);
+    margin-left: calc(#{-$gl-spacing-scale-1} - 1px);
+    margin-right: calc(#{$gl-spacing-scale-2} - 1px);
     @include gl-p-0;
     @include gl-rounded-full;
     @include gl-shadow-none;
@@ -72,7 +75,7 @@ $label-close-button: '.gl-label-close.gl-button';
     }
 
     .gl-icon {
-      @include gl-p-1;
+      vertical-align: -1px;
     }
   }
 }
@@ -146,6 +149,8 @@ $label-close-button: '.gl-label-close.gl-button';
   }
 
   #{$label-close-button} {
+    margin-left: calc(#{-$gl-spacing-scale-2} - 2px);
+
     &:focus,
     &:hover {
       .gl-icon {
@@ -155,27 +160,13 @@ $label-close-button: '.gl-label-close.gl-button';
   }
 
   .gl-label-text {
-    @include gl-pr-2;
     background-color: var(--label-background-color);
   }
 
   .gl-label-text-scoped {
     @include gl-text-gray-950;
-    @include gl-pl-2;
-    @include gl-pr-3;
-  }
-}
-
-.gl-label-sm {
-  .gl-label-text,
-  .gl-label-text-scoped {
-    @include gl-py-0;
-    @include gl-line-height-normal;
-    @include gl-font-sm;
-  }
-
-  #{$label-close-button} {
-    @include gl-mr-1;
+    padding-inline-start: calc($gl-spacing-scale-3 - 4px);
+    padding-inline-end: $gl-spacing-scale-3;
   }
 }
 

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

@@ -1,5 +1,4 @@
 import { mount, shallowMount } from '@vue/test-utils';
-import CloseButton from '../../shared_components/close_button/close_button.vue';
 import GlLink from '../link/link.vue';
 import GlTooltip from '../tooltip/tooltip.vue';
 import Label from './label.vue';
@@ -41,7 +40,7 @@ describe('Label component', () => {
   const findSubTitle = () => wrapper.find('.gl-label-text-scoped');
   const findTooltip = () => wrapper.findComponent(GlTooltip);
   const findTooltipText = () => findTooltip().text();
-  const findCloseButton = () => wrapper.findComponent(CloseButton);
+  const findCloseButton = () => wrapper.find('.gl-label-close');
 
   describe('basic label', () => {
     it('renders the label title', () => {

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

@@ -1,4 +1,4 @@
-import { labelSizeOptions, tooltipPlacements } from '../../../utils/constants';
+import { tooltipPlacements } from '../../../utils/constants';
 import GlLabel from './label.vue';
 import readme from './label.md';
 
@@ -6,7 +6,6 @@ const template = `
   <div class="gl-display-flex">
     <gl-label
       :background-color="backgroundColor"
-      :size="size"
       :title="title"
       :description="description"
       :tooltip-placement="tooltipPlacement"
@@ -25,7 +24,6 @@ const Template = (args, { argTypes }) => ({
 
 const generateProps = ({
   title = 'Label title',
-  size = labelSizeOptions.default,
   tooltipPlacement = tooltipPlacements.top,
   scoped = false,
   description = '',
@@ -37,7 +35,6 @@ const generateProps = ({
   backgroundColor,
   title,
   description,
-  size,
   tooltipPlacement,
   target,
   scoped,
@@ -71,10 +68,6 @@ export default {
     backgroundColor: {
       control: 'color',
     },
-    size: {
-      options: labelSizeOptions,
-      control: 'select',
-    },
     tooltipPlacement: {
       options: tooltipPlacements,
       control: 'select',

package/src/components/base/label/label.vue

@@ -2,16 +2,18 @@
 <script>
 import { labelColorOptions } from '../../../utils/constants';
 import { colorFromBackground } from '../../../utils/utils';
-import CloseButton from '../../shared_components/close_button/close_button.vue';
+import GlButton from '../button/button.vue';
+import GlIcon from '../icon/icon.vue';
 import GlLink from '../link/link.vue';
 import GlTooltip from '../tooltip/tooltip.vue';
 
 export default {
   name: 'GlLabel',
   components: {
+    GlButton,
+    GlIcon,
     GlLink,
     GlTooltip,
-    CloseButton,
   },
   props: {
     backgroundColor: {
@@ -29,11 +31,6 @@ export default {
       required: false,
       default: '',
     },
-    size: {
-      type: String,
-      required: false,
-      default: '',
-    },
     tooltipPlacement: {
       type: String,
       required: false,
@@ -69,7 +66,6 @@ export default {
     cssClasses() {
       const textColorVariant = colorFromBackground(this.backgroundColor);
       return {
-        'gl-label-sm': this.size === 'sm',
         'gl-label-scoped': this.scoped,
         'gl-label-text-dark': textColorVariant === labelColorOptions.dark,
         'gl-label-text-light': textColorVariant === labelColorOptions.light,
@@ -78,9 +74,7 @@ export default {
     cssVariables() {
       return {
         '--label-background-color': this.backgroundColor,
-        '--label-inset-border': `inset 0 0 0 ${this.size === 'sm' ? '1px' : '2px'} ${
-          this.backgroundColor
-        }`,
+        '--label-inset-border': `inset 0 0 0 2px ${this.backgroundColor}`,
       };
     },
     scopedKey() {
@@ -89,9 +83,6 @@ export default {
     scopedValue() {
       return this.title.slice(this.splitScopedLabelIndex + 2);
     },
-    closeIconSize() {
-      return this.size === 'sm' ? 12 : 16;
-    },
     labelComponent() {
       return this.target ? GlLink : 'span';
     },
@@ -143,14 +134,18 @@ export default {
         {{ scopedValue }}
       </span>
     </component>
-    <close-button
+    <gl-button
       v-if="showCloseButton"
       class="gl-label-close gl-p-0!"
-      label="Remove label"
+      category="tertiary"
+      size="small"
       variant="reset"
+      aria-label="Remove label"
       :disabled="disabled"
       @click="onClose"
-    />
+    >
+      <gl-icon name="close-xs" :size="12" />
+    </gl-button>
     <gl-tooltip
       v-if="description"
       :target="() => tooltipTarget"

package/src/utils/constants.js

@@ -78,11 +78,6 @@ export const variantCssColorMap = {
 
 export const targetOptions = ['_self', '_blank', '_parent', '_top', null];
 
-export const labelSizeOptions = {
-  default: null,
-  sm: 'sm',
-};
-
 export const viewModeOptions = {
   dark: 'dark',
   light: 'light',