feat(GlDatepicker): use variant prop on GlIcon for disabled control

Add `disabled` prop to `GlDatepicker` story

src/components/base/datepicker/datepicker.stories.js

@@ -20,10 +20,12 @@ const defaultMaxDate = new Date(currentYear, 2, 31);
 const generateProps = ({
   minDate = defaultMinDate,
   maxDate = defaultMaxDate,
+  disabled = false,
   state = true,
 } = {}) => ({
   minDate,
   maxDate,
+  disabled,
   state,
 });
 
@@ -35,7 +37,7 @@ export const Default = (_args, { argTypes }) => ({
       pickerValue: defaultDate,
     };
   },
-  template: `<gl-datepicker :max-date="new Date(maxDate)" :min-date="new Date(minDate)" v-model="pickerValue" :state="state"/>`,
+  template: `<gl-datepicker :max-date="new Date(maxDate)" :min-date="new Date(minDate)" v-model="pickerValue" :disabled="disabled" :state="state"/>`,
 });
 Default.args = generateProps();
 Default.play = async ({ canvasElement }) => {
@@ -129,7 +131,6 @@ export default {
       'ariaLabel',
       'placeholder',
       'autocomplete',
-      'disabled',
       'displayField',
       'startOpened',
       'defaultDate',

src/components/base/datepicker/datepicker.vue

@@ -432,9 +432,13 @@ export default {
             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-block" name="calendar" :size="16" />
+            <gl-icon
+              class="gl-block"
+              name="calendar"
+              :size="16"
+              :variant="disabled ? 'disabled' : 'default'"
+            />
           </span>
           <gl-button
             v-else