@gitlab/ui 80.14.0 → 80.15.0

package/dist/tokens/json/tokens.dark.json

@@ -6669,7 +6669,6 @@
       "$type": "color",
       "comment": "Use text.color.default instead",
       "deprecated": true,
-      "themeable": true,
       "filePath": "src/tokens/text.tokens.json",
       "isSource": true,
       "original": {
@@ -6679,8 +6678,7 @@
         },
         "$type": "color",
         "comment": "Use text.color.default instead",
-        "deprecated": true,
-        "themeable": true
+        "deprecated": true
       },
       "name": "TEXT_PRIMARY",
       "attributes": {},
@@ -6694,7 +6692,6 @@
       "$type": "color",
       "comment": "Use text.color.subtle instead",
       "deprecated": true,
-      "themeable": true,
       "filePath": "src/tokens/text.tokens.json",
       "isSource": true,
       "original": {
@@ -6704,8 +6701,7 @@
         },
         "$type": "color",
         "comment": "Use text.color.subtle instead",
-        "deprecated": true,
-        "themeable": true
+        "deprecated": true
       },
       "name": "TEXT_SECONDARY",
       "attributes": {},
@@ -6719,7 +6715,6 @@
       "$type": "color",
       "comment": "Use text.color.disabled instead",
       "deprecated": true,
-      "themeable": true,
       "filePath": "src/tokens/text.tokens.json",
       "isSource": true,
       "original": {
@@ -6729,8 +6724,7 @@
         },
         "$type": "color",
         "comment": "Use text.color.disabled instead",
-        "deprecated": true,
-        "themeable": true
+        "deprecated": true
       },
       "name": "TEXT_TERTIARY",
       "attributes": {},
@@ -6744,7 +6738,6 @@
         "value": "#ececef",
         "$type": "color",
         "comment": "Used for the default text color.",
-        "themeable": true,
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -6753,8 +6746,7 @@
             "dark": "{color.neutral.50}"
           },
           "$type": "color",
-          "comment": "Used for the default text color.",
-          "themeable": true
+          "comment": "Used for the default text color."
         },
         "name": "TEXT_COLOR_DEFAULT",
         "attributes": {},
@@ -6768,7 +6760,6 @@
         "value": "#bfbfc3",
         "$type": "color",
         "comment": "Used for supplemental text that doesn't need to be as prominent as other text.",
-        "themeable": true,
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -6777,8 +6768,7 @@
             "dark": "{color.neutral.200}"
           },
           "$type": "color",
-          "comment": "Used for supplemental text that doesn't need to be as prominent as other text.",
-          "themeable": true
+          "comment": "Used for supplemental text that doesn't need to be as prominent as other text."
         },
         "name": "TEXT_COLOR_SUBTLE",
         "attributes": {},
@@ -6792,7 +6782,6 @@
         "value": "#fff",
         "$type": "color",
         "comment": "Used for text with the highest contrast.",
-        "themeable": true,
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -6801,8 +6790,7 @@
             "dark": "{color.neutral.0}"
           },
           "$type": "color",
-          "comment": "Used for text with the highest contrast.",
-          "themeable": true
+          "comment": "Used for text with the highest contrast."
         },
         "name": "TEXT_COLOR_STRONG",
         "attributes": {},
@@ -6816,7 +6804,6 @@
         "value": "#fff",
         "$type": "color",
         "comment": "Used for headings level 1-6.",
-        "themeable": true,
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -6825,8 +6812,7 @@
             "dark": "{color.neutral.0}"
           },
           "$type": "color",
-          "comment": "Used for headings level 1-6.",
-          "themeable": true
+          "comment": "Used for headings level 1-6."
         },
         "name": "TEXT_COLOR_HEADING",
         "attributes": {},
@@ -6840,7 +6826,6 @@
         "value": "#63a6e9",
         "$type": "color",
         "comment": "Used for default text links.",
-        "themeable": true,
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -6849,8 +6834,7 @@
             "dark": "{color.blue.300}"
           },
           "$type": "color",
-          "comment": "Used for default text links.",
-          "themeable": true
+          "comment": "Used for default text links."
         },
         "name": "TEXT_COLOR_LINK",
         "attributes": {},
@@ -6864,7 +6848,6 @@
         "value": "#f57f6c",
         "$type": "color",
         "comment": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
-        "themeable": true,
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -6873,8 +6856,7 @@
             "dark": "{color.red.300}"
           },
           "$type": "color",
-          "comment": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
-          "themeable": true
+          "comment": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination."
         },
         "name": "TEXT_COLOR_DANGER",
         "attributes": {},
@@ -6888,7 +6870,6 @@
         "value": "#52b87a",
         "$type": "color",
         "comment": "Used for text indicating success or validity.",
-        "themeable": true,
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -6897,8 +6878,7 @@
             "dark": "{color.green.300}"
           },
           "$type": "color",
-          "comment": "Used for text indicating success or validity.",
-          "themeable": true
+          "comment": "Used for text indicating success or validity."
         },
         "name": "TEXT_COLOR_SUCCESS",
         "attributes": {},
@@ -6912,7 +6892,6 @@
         "value": "#89888d",
         "$type": "color",
         "comment": "Used for disabled text.",
-        "themeable": true,
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -6921,8 +6900,7 @@
             "dark": "{color.neutral.400}"
           },
           "$type": "color",
-          "comment": "Used for disabled text.",
-          "themeable": true
+          "comment": "Used for disabled text."
         },
         "name": "TEXT_COLOR_DISABLED",
         "attributes": {},

package/dist/tokens/json/tokens.json

@@ -6669,7 +6669,6 @@
       "$type": "color",
       "comment": "Use text.color.default instead",
       "deprecated": true,
-      "themeable": true,
       "filePath": "src/tokens/text.tokens.json",
       "isSource": true,
       "original": {
@@ -6679,8 +6678,7 @@
         },
         "$type": "color",
         "comment": "Use text.color.default instead",
-        "deprecated": true,
-        "themeable": true
+        "deprecated": true
       },
       "name": "TEXT_PRIMARY",
       "attributes": {},
@@ -6694,7 +6692,6 @@
       "$type": "color",
       "comment": "Use text.color.subtle instead",
       "deprecated": true,
-      "themeable": true,
       "filePath": "src/tokens/text.tokens.json",
       "isSource": true,
       "original": {
@@ -6704,8 +6701,7 @@
         },
         "$type": "color",
         "comment": "Use text.color.subtle instead",
-        "deprecated": true,
-        "themeable": true
+        "deprecated": true
       },
       "name": "TEXT_SECONDARY",
       "attributes": {},
@@ -6719,7 +6715,6 @@
       "$type": "color",
       "comment": "Use text.color.disabled instead",
       "deprecated": true,
-      "themeable": true,
       "filePath": "src/tokens/text.tokens.json",
       "isSource": true,
       "original": {
@@ -6729,8 +6724,7 @@
         },
         "$type": "color",
         "comment": "Use text.color.disabled instead",
-        "deprecated": true,
-        "themeable": true
+        "deprecated": true
       },
       "name": "TEXT_TERTIARY",
       "attributes": {},
@@ -6744,7 +6738,6 @@
         "value": "#434248",
         "$type": "color",
         "comment": "Used for the default text color.",
-        "themeable": true,
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -6753,8 +6746,7 @@
             "dark": "{color.neutral.50}"
           },
           "$type": "color",
-          "comment": "Used for the default text color.",
-          "themeable": true
+          "comment": "Used for the default text color."
         },
         "name": "TEXT_COLOR_DEFAULT",
         "attributes": {},
@@ -6768,7 +6760,6 @@
         "value": "#626168",
         "$type": "color",
         "comment": "Used for supplemental text that doesn't need to be as prominent as other text.",
-        "themeable": true,
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -6777,8 +6768,7 @@
             "dark": "{color.neutral.200}"
           },
           "$type": "color",
-          "comment": "Used for supplemental text that doesn't need to be as prominent as other text.",
-          "themeable": true
+          "comment": "Used for supplemental text that doesn't need to be as prominent as other text."
         },
         "name": "TEXT_COLOR_SUBTLE",
         "attributes": {},
@@ -6792,7 +6782,6 @@
         "value": "#1f1e24",
         "$type": "color",
         "comment": "Used for text with the highest contrast.",
-        "themeable": true,
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -6801,8 +6790,7 @@
             "dark": "{color.neutral.0}"
           },
           "$type": "color",
-          "comment": "Used for text with the highest contrast.",
-          "themeable": true
+          "comment": "Used for text with the highest contrast."
         },
         "name": "TEXT_COLOR_STRONG",
         "attributes": {},
@@ -6816,7 +6804,6 @@
         "value": "#1f1e24",
         "$type": "color",
         "comment": "Used for headings level 1-6.",
-        "themeable": true,
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -6825,8 +6812,7 @@
             "dark": "{color.neutral.0}"
           },
           "$type": "color",
-          "comment": "Used for headings level 1-6.",
-          "themeable": true
+          "comment": "Used for headings level 1-6."
         },
         "name": "TEXT_COLOR_HEADING",
         "attributes": {},
@@ -6840,7 +6826,6 @@
         "value": "#0b5cad",
         "$type": "color",
         "comment": "Used for default text links.",
-        "themeable": true,
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -6849,8 +6834,7 @@
             "dark": "{color.blue.300}"
           },
           "$type": "color",
-          "comment": "Used for default text links.",
-          "themeable": true
+          "comment": "Used for default text links."
         },
         "name": "TEXT_COLOR_LINK",
         "attributes": {},
@@ -6864,7 +6848,6 @@
         "value": "#c91c00",
         "$type": "color",
         "comment": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
-        "themeable": true,
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -6873,8 +6856,7 @@
             "dark": "{color.red.300}"
           },
           "$type": "color",
-          "comment": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
-          "themeable": true
+          "comment": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination."
         },
         "name": "TEXT_COLOR_DANGER",
         "attributes": {},
@@ -6888,7 +6870,6 @@
         "value": "#217645",
         "$type": "color",
         "comment": "Used for text indicating success or validity.",
-        "themeable": true,
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -6897,8 +6878,7 @@
             "dark": "{color.green.300}"
           },
           "$type": "color",
-          "comment": "Used for text indicating success or validity.",
-          "themeable": true
+          "comment": "Used for text indicating success or validity."
         },
         "name": "TEXT_COLOR_SUCCESS",
         "attributes": {},
@@ -6912,7 +6892,6 @@
         "value": "#89888d",
         "$type": "color",
         "comment": "Used for disabled text.",
-        "themeable": true,
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -6921,8 +6900,7 @@
             "dark": "{color.neutral.400}"
           },
           "$type": "color",
-          "comment": "Used for disabled text.",
-          "themeable": true
+          "comment": "Used for disabled text."
         },
         "name": "TEXT_COLOR_DISABLED",
         "attributes": {},

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

@@ -2,9 +2,9 @@
 // Automatically generated
 // Do not edit directly
 
-$gl-text-tertiary: #737278 !default; // Use text.color.disabled instead
-$gl-text-secondary: #89888d !default; // Use text.color.subtle instead
-$gl-text-primary: #ececef !default; // Use text.color.default instead
+$gl-text-tertiary: #737278; // Use text.color.disabled instead
+$gl-text-secondary: #89888d; // Use text.color.subtle instead
+$gl-text-primary: #ececef; // Use text.color.default instead
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-42: 2.625rem;
@@ -304,14 +304,14 @@ $gl-color-blue-300: #63a6e9;
 $gl-color-blue-200: #9dc7f1;
 $gl-color-blue-100: #cbe2f9;
 $gl-color-blue-50: #e9f3fc;
-$gl-text-color-disabled: $gl-color-neutral-400 !default; // Used for disabled text.
-$gl-text-color-success: $gl-color-green-300 !default; // Used for text indicating success or validity.
-$gl-text-color-danger: $gl-color-red-300 !default; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
-$gl-text-color-link: $gl-color-blue-300 !default; // Used for default text links.
-$gl-text-color-heading: $gl-color-neutral-0 !default; // Used for headings level 1-6.
-$gl-text-color-strong: $gl-color-neutral-0 !default; // Used for text with the highest contrast.
-$gl-text-color-subtle: $gl-color-neutral-200 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
-$gl-text-color-default: $gl-color-neutral-50 !default; // Used for the default text color.
+$gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
+$gl-text-color-success: $gl-color-green-300; // Used for text indicating success or validity.
+$gl-text-color-danger: $gl-color-red-300; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
+$gl-text-color-link: $gl-color-blue-300; // Used for default text links.
+$gl-text-color-heading: $gl-color-neutral-0; // Used for headings level 1-6.
+$gl-text-color-strong: $gl-color-neutral-0; // Used for text with the highest contrast.
+$gl-text-color-subtle: $gl-color-neutral-200; // Used for supplemental text that doesn't need to be as prominent as other text.
+$gl-text-color-default: $gl-color-neutral-50; // Used for the default text color.
 $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.

package/dist/tokens/scss/_tokens.scss

@@ -2,9 +2,9 @@
 // Automatically generated
 // Do not edit directly
 
-$gl-text-tertiary: #89888d !default; // Use text.color.disabled instead
-$gl-text-secondary: #737278 !default; // Use text.color.subtle instead
-$gl-text-primary: #333238 !default; // Use text.color.default instead
+$gl-text-tertiary: #89888d; // Use text.color.disabled instead
+$gl-text-secondary: #737278; // Use text.color.subtle instead
+$gl-text-primary: #333238; // Use text.color.default instead
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-42: 2.625rem;
@@ -304,14 +304,14 @@ $gl-color-blue-300: #63a6e9;
 $gl-color-blue-200: #9dc7f1;
 $gl-color-blue-100: #cbe2f9;
 $gl-color-blue-50: #e9f3fc;
-$gl-text-color-disabled: $gl-color-neutral-400 !default; // Used for disabled text.
-$gl-text-color-success: $gl-color-green-600 !default; // Used for text indicating success or validity.
-$gl-text-color-danger: $gl-color-red-600 !default; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
-$gl-text-color-link: $gl-color-blue-700 !default; // Used for default text links.
-$gl-text-color-heading: $gl-color-neutral-950 !default; // Used for headings level 1-6.
-$gl-text-color-strong: $gl-color-neutral-950 !default; // Used for text with the highest contrast.
-$gl-text-color-subtle: $gl-color-neutral-600 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
-$gl-text-color-default: $gl-color-neutral-800 !default; // Used for the default text color.
+$gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
+$gl-text-color-success: $gl-color-green-600; // Used for text indicating success or validity.
+$gl-text-color-danger: $gl-color-red-600; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
+$gl-text-color-link: $gl-color-blue-700; // Used for default text links.
+$gl-text-color-heading: $gl-color-neutral-950; // Used for headings level 1-6.
+$gl-text-color-strong: $gl-color-neutral-950; // Used for text with the highest contrast.
+$gl-text-color-subtle: $gl-color-neutral-600; // Used for supplemental text that doesn't need to be as prominent as other text.
+$gl-text-color-default: $gl-color-neutral-800; // Used for the default text color.
 $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-10; // Used to slightly differentiate the background from the default.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "80.14.0",
+  "version": "80.15.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -98,11 +98,11 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.24.5",
+    "@babel/core": "^7.24.6",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.24.5",
-    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-env": "^7.24.6",
+    "@babel/preset-react": "^7.24.6",
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.5.0",
     "@gitlab/fonts": "^1.3.0",
@@ -137,7 +137,7 @@
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "bootstrap": "4.6.2",
-    "cypress": "13.9.0",
+    "cypress": "13.10.0",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.1.2",
@@ -158,6 +158,8 @@
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
+    "playwright": "^1.44.1",
+    "playwright-core": "^1.44.1",
     "plop": "^2.5.4",
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",

package/src/components/base/datepicker/datepicker.vue

@@ -364,56 +364,58 @@ export default {
 
 <template>
   <div :class="datepickerClasses">
-    <div v-if="showDefaultField" class="gl-relative">
-      <!--
+    <div v-if="showDefaultField" class="gl-display-flex gl-align-items-start gl-gap-3">
+      <div class="gl-relative gl-display-flex gl-flex-grow-1">
+        <!--
       @slot (optional) Input to display and bind the datepicker to. Defaults to `<gl-form-input />`
       @binding {string} formattedDate
       -->
-      <slot :formatted-date="formattedDate">
-        <gl-form-input
-          :id="inputId"
-          v-model="textInput"
-          :name="inputName"
-          data-testid="gl-datepicker-input"
-          class="gl-w-full"
-          :class="renderClearButton ? 'gl-pr-9!' : 'gl-pr-7!'"
-          :value="formattedDate"
-          :placeholder="placeholder"
-          :autocomplete="inputAutocomplete"
-          :disabled="disabled"
-          :aria-label="inputLabel"
-          @keydown.enter="onKeydown"
-        />
-      </slot>
-      <div class="gl-datepicker-actions">
-        <gl-button
-          v-if="renderClearButton"
-          data-testid="clear-button"
-          class="gl-pointer-events-auto"
-          aria-label="Clear date"
-          category="tertiary"
-          size="small"
-          icon="clear"
-          @click="cleared"
-        />
-        <span
-          v-if="triggerOnFocus || disabled"
-          data-testid="datepicker-calendar-icon"
-          class="gl-px-2"
-          :class="disabled ? 'gl-text-gray-400' : 'gl-text-gray-500'"
-        >
-          <gl-icon class="gl-display-block" name="calendar" :size="16" />
-        </span>
-        <gl-button
-          v-else
-          ref="calendarTriggerBtn"
-          class="gl-pointer-events-auto"
-          aria-label="Open datepicker"
-          category="tertiary"
-          size="small"
-          icon="calendar"
-        />
+        <slot :formatted-date="formattedDate">
+          <gl-form-input
+            :id="inputId"
+            v-model="textInput"
+            :name="inputName"
+            data-testid="gl-datepicker-input"
+            :class="renderClearButton ? 'gl-pr-9!' : 'gl-pr-7!'"
+            :value="formattedDate"
+            :placeholder="placeholder"
+            :autocomplete="inputAutocomplete"
+            :disabled="disabled"
+            :aria-label="inputLabel"
+            @keydown.enter="onKeydown"
+          />
+        </slot>
+        <div class="gl-datepicker-actions">
+          <gl-button
+            v-if="renderClearButton"
+            data-testid="clear-button"
+            class="gl-pointer-events-auto"
+            aria-label="Clear date"
+            category="tertiary"
+            size="small"
+            icon="clear"
+            @click="cleared"
+          />
+          <span
+            v-if="triggerOnFocus || disabled"
+            data-testid="datepicker-calendar-icon"
+            class="gl-px-2"
+            :class="disabled ? 'gl-text-gray-400' : 'gl-text-gray-500'"
+          >
+            <gl-icon class="gl-display-block" name="calendar" :size="16" />
+          </span>
+          <gl-button
+            v-else
+            ref="calendarTriggerBtn"
+            class="gl-pointer-events-auto"
+            aria-label="Open datepicker"
+            category="tertiary"
+            size="small"
+            icon="calendar"
+          />
+        </div>
       </div>
+      <slot name="after"></slot>
     </div>
     <slot v-else :formatted-date="formattedDate"> </slot>
   </div>

package/src/components/base/daterange_picker/daterange_picker.vue

@@ -3,6 +3,7 @@ import { GlTooltipDirective } from '../../../directives/tooltip';
 import { getDayDifference, getDateInPast, getDateInFuture } from '../../../utils/datetime_utility';
 import GlDatepicker from '../datepicker/datepicker.vue';
 import GlIcon from '../icon/icon.vue';
+import { datepickerWidthOptionsMap } from '../../../utils/constants';
 
 const CONTAINER_CLASSES = [
   'gl-display-flex',
@@ -133,6 +134,15 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Maximum width of the Datepicker
+     */
+    width: {
+      type: String,
+      required: false,
+      default: null,
+      validator: (value) => Object.keys(datepickerWidthOptionsMap).includes(value),
+    },
   },
   data() {
     return {
@@ -267,10 +277,15 @@ export default {
         :target="startPickerTarget"
         :container="startPickerContainer"
         :start-opened="startOpened"
+        :width="width"
         @input="onStartDateSelected"
         @open="onStartPickerOpen"
         @close="onStartPickerClose"
-      />
+      >
+        <template #after>
+          <slot name="after-start"></slot>
+        </template>
+      </gl-datepicker>
     </div>
     <div :class="endContainerClasses" data-testid="daterange-picker-end-container">
       <label :class="labelClass">{{ toLabel }}</label>
@@ -287,10 +302,15 @@ export default {
         :container="endPickerContainer"
         :start-opened="openToCalendar"
         :default-date="toCalendarDefaultDate"
+        :width="width"
         @input="onEndDateSelected"
         @open="onEndPickerOpen"
         @close="onEndPickerClose"
-      />
+      >
+        <template #after>
+          <slot name="after-end"></slot>
+        </template>
+      </gl-datepicker>
     </div>
     <div
       v-if="showIndicator"