diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue | 40 |
1 files changed, 28 insertions, 12 deletions
diff --git a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue index ddbb474bab6..3b6b0a91e97 100644 --- a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue +++ b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue @@ -1,5 +1,11 @@ <script> -import { GlIcon, GlDeprecatedButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui'; +import { + GlIcon, + GlButton, + GlDeprecatedDropdown, + GlDeprecatedDropdownItem, + GlFormGroup, +} from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import { convertToFixedRange, isEqualTimeRanges, findTimeRange } from '~/lib/utils/datetime_range'; @@ -22,9 +28,9 @@ const events = { export default { components: { GlIcon, - GlDeprecatedButton, - GlDropdown, - GlDropdownItem, + GlButton, + GlDeprecatedDropdown, + GlDeprecatedDropdownItem, GlFormGroup, TooltipOnTruncate, DateTimePickerInput, @@ -206,7 +212,8 @@ export default { placement="top" class="d-inline-block" > - <gl-dropdown + <gl-deprecated-dropdown + ref="dropdown" :text="timeWindowText" v-bind="$attrs" class="date-time-picker w-100" @@ -215,7 +222,9 @@ export default { > <template #button-content> <span class="gl-flex-grow-1 text-truncate">{{ timeWindowText }}</span> - <span v-if="utc" class="text-muted gl-font-weight-bold gl-font-sm">{{ __('UTC') }}</span> + <span v-if="utc" class="gl-text-gray-500 gl-font-weight-bold gl-font-sm">{{ + __('UTC') + }}</span> <gl-icon class="gl-dropdown-caret" name="chevron-down" aria-hidden="true" /> </template> @@ -242,10 +251,17 @@ export default { /> </div> <gl-form-group> - <gl-deprecated-button @click="closeDropdown">{{ __('Cancel') }}</gl-deprecated-button> - <gl-deprecated-button variant="success" :disabled="!isValid" @click="setFixedRange()"> + <gl-button data-testid="cancelButton" @click="closeDropdown">{{ + __('Cancel') + }}</gl-button> + <gl-button + variant="success" + category="primary" + :disabled="!isValid" + @click="setFixedRange()" + > {{ __('Apply') }} - </gl-deprecated-button> + </gl-button> </gl-form-group> </gl-form-group> <gl-form-group @@ -256,7 +272,7 @@ export default { <span class="gl-pl-5-deprecated-no-really-do-not-use-me">{{ __('Quick range') }}</span> </template> - <gl-dropdown-item + <gl-deprecated-dropdown-item v-for="(option, index) in options" :key="index" data-qa-selector="quick_range_item" @@ -270,9 +286,9 @@ export default { :class="{ invisible: !isOptionActive(option) }" /> {{ option.label }} - </gl-dropdown-item> + </gl-deprecated-dropdown-item> </gl-form-group> </div> - </gl-dropdown> + </gl-deprecated-dropdown> </tooltip-on-truncate> </template> |