diff --git a/app/assets/javascripts/work_items/components/item_state.vue b/app/assets/javascripts/work_items/components/item_state.vue
index 9053d8972deccc5cda0ee7f72e253af82f8081ca..2100cc67c8c0e28117118888e9afa0f2a82371dc 100644
--- a/app/assets/javascripts/work_items/components/item_state.vue
+++ b/app/assets/javascripts/work_items/components/item_state.vue
@@ -63,17 +63,9 @@ export default {
:options="$options.states"
:disabled="disabled"
data-testid="work-item-state-select"
- class="gl-w-auto hide-select-decoration gl-pl-4 gl-my-1 work-item-field-value"
+ class="hide-unfocused-input-decoration work-item-field-value gl-w-auto gl-pl-4 gl-my-1"
:class="{ 'gl-bg-transparent! gl-cursor-text!': disabled }"
@change="setState"
/>
</gl-form-group>
</template>
-
-<style>
-.hide-select-decoration:not(:focus, :hover),
-.hide-select-decoration:disabled {
- background-image: none;
- box-shadow: none;
-}
-</style>
diff --git a/app/assets/javascripts/work_items/components/item_title.vue b/app/assets/javascripts/work_items/components/item_title.vue
index 1dc6d3418115b37cb640eb700611129e549bfec5..74bcc2717bdf4ee99e73028d082c49a2ed4f3447 100644
--- a/app/assets/javascripts/work_items/components/item_title.vue
+++ b/app/assets/javascripts/work_items/components/item_title.vue
@@ -52,7 +52,7 @@ export default {
:aria-label="__('Title')"
:data-placeholder="placeholder"
:contenteditable="!disabled"
- class="gl-px-4 gl-py-3 gl-ml-n4 gl-border gl-border-white gl-rounded-base gl-display-block"
+ class="hide-unfocused-input-decoration gl-px-4 gl-py-3 gl-ml-n4 gl-border gl-rounded-base gl-display-block"
:class="{ 'gl-hover-border-gray-200 gl-pseudo-placeholder': !disabled }"
@paste="handlePaste"
@blur="handleBlur"
diff --git a/app/assets/javascripts/work_items/components/work_item_assignees.vue b/app/assets/javascripts/work_items/components/work_item_assignees.vue
index f7ac63e16c353db54e8be6b324ecd0004eb25ec2..4b4aa7f96ca7ab007af4da7eb351aa73e0af102e 100644
--- a/app/assets/javascripts/work_items/components/work_item_assignees.vue
+++ b/app/assets/javascripts/work_items/components/work_item_assignees.vue
@@ -148,7 +148,7 @@ export default {
};
},
containerClass() {
- return !this.isEditing ? 'gl-shadow-none!' : '';
+ return !this.isEditing ? 'gl-shadow-none! hide-unfocused-input-decoration' : '';
},
isLoadingUsers() {
return this.$apollo.queries.users.loading;
@@ -318,7 +318,7 @@ export default {
:loading="isLoadingUsers && !isLoadingMore"
:view-only="!canUpdate"
:allow-clear-all="isEditing"
- class="assignees-selector gl-flex-grow-1 gl-border gl-border-white gl-rounded-base col-9 gl-align-self-start gl-px-0! gl-mx-2 work-item-field-value"
+ class="assignees-selector hide-unfocused-input-decoration work-item-field-value gl-flex-grow-1 gl-border gl-rounded-base col-9 gl-align-self-start gl-px-0! gl-mx-2"
data-testid="work-item-assignees-input"
@input="handleAssigneesInput"
@text-input="debouncedSearchKeyUpdate"
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue
index 1402b313ceec3dd07f2ceeca4657eaff34cdd3c9..bbf1f39e30802643e1244bb7cc31bb412ebae83b 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -397,13 +397,13 @@ export default {
<div class="gl-display-flex gl-align-items-center" data-testid="work-item-body">
<ul
v-if="parentWorkItem"
- class="list-unstyled gl-display-flex gl-mr-auto gl-max-w-26 gl-md-max-w-50p gl-min-w-0 gl-mb-0 gl-z-index-0"
+ class="list-unstyled gl-display-flex gl-min-w-0 gl-mr-auto gl-mb-0 gl-z-index-0"
data-testid="work-item-parent"
>
- <li class="gl-ml-n4 gl-display-flex gl-align-items-center gl-overflow-hidden">
+ <li class="gl-ml-n4 gl-display-flex gl-align-items-center gl-min-w-0">
<gl-button
v-gl-tooltip.hover
- class="gl-text-truncate gl-max-w-full"
+ class="gl-text-truncate"
:icon="parentWorkItemIconName"
category="tertiary"
:href="parentUrl"
diff --git a/app/assets/javascripts/work_items/components/work_item_labels.vue b/app/assets/javascripts/work_items/components/work_item_labels.vue
index 8676456a6a4eaa82e265e57c6d96ef23ec1f3828..5bfb65fe91c5fc8c53092d8f01660c2c91331c79 100644
--- a/app/assets/javascripts/work_items/components/work_item_labels.vue
+++ b/app/assets/javascripts/work_items/components/work_item_labels.vue
@@ -121,7 +121,7 @@ export default {
return this.labelsWidget?.allowsScopedLabels;
},
containerClass() {
- return !this.isEditing ? 'gl-shadow-none!' : '';
+ return !this.isEditing ? 'gl-shadow-none! hide-unfocused-input-decoration' : '';
},
isLoading() {
return this.$apollo.queries.searchLabels.loading;
@@ -272,7 +272,7 @@ export default {
:loading="isLoading"
:view-only="!canUpdate"
:allow-clear-all="isEditing"
- class="gl-flex-grow-1 gl-border gl-border-white gl-rounded-base col-9 gl-align-self-start gl-px-0! gl-mx-2! work-item-field-value"
+ class="hide-unfocused-input-decoration work-item-field-value gl-flex-grow-1 gl-border gl-rounded-base col-9 gl-align-self-start gl-px-0! gl-mx-2!"
menu-class="token-selector-menu-class"
data-testid="work-item-labels-input"
:class="{ 'gl-hover-border-gray-200': canUpdate }"
diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss
index 013aa064c4e11d7243d8e0d622a9432dc806df02..e8fa93e15046814e8b8d4cb7e55e3b96188c7fed 100644
--- a/app/assets/stylesheets/page_bundles/work_items.scss
+++ b/app/assets/stylesheets/page_bundles/work_items.scss
@@ -1,5 +1,6 @@
@import 'mixins_and_variables_and_functions';
+$work-item-field-inset-shadow: inset 0 0 0 $gl-border-size-1 var(--gray-200, $gray-200) !important;
$work-item-overview-right-sidebar-width: 340px;
$work-item-sticky-header-height: 52px;
@@ -8,15 +9,14 @@ $work-item-sticky-header-height: 52px;
align-items: center;
}
-#weight-widget-input:not(:hover, :focus),
-#weight-widget-input[readonly] {
+.hide-unfocused-input-decoration:not(:focus, :hover),
+.hide-unfocused-input-decoration:disabled {
+ background-color: transparent;
+ border-color: transparent;
+ background-image: none;
box-shadow: none;
}
-#weight-widget-input[readonly] {
- background-color: var(--white, $white);
-}
-
.work-item-assignees {
.assign-myself {
display: none;
@@ -68,19 +68,27 @@ $work-item-sticky-header-height: 52px;
}
.work-item-dropdown {
- .gl-dropdown-toggle {
- background: none !important;
+ // duplicate classname because we are fighting with gl-button styles
+ .gl-dropdown-toggle.gl-dropdown-toggle {
+ background: none;
&:hover,
&:focus {
- box-shadow: inset 0 0 0 $gl-border-size-1 var(--gray-darkest, $gray-darkest) !important;
+ box-shadow: $work-item-field-inset-shadow;
+ background-color: $input-bg;
+
+ .gl-dark & {
+ // $input-bg is overridden in dark mode but that does not
+ // work in page bundles currently, manually override here
+ background-color: var(--gray-50, $input-bg);
+ }
}
&.is-not-focused:not(:hover, :focus) {
box-shadow: none;
.gl-button-icon {
- display: none;
+ visibility: hidden;
}
}
}
@@ -150,6 +158,13 @@ $work-item-sticky-header-height: 52px;
.work-item-overview & {
max-width: 65%;
}
+
+ &.gl-form-select {
+ &:hover,
+ &:focus {
+ box-shadow: $work-item-field-inset-shadow;
+ }
+ }
}
.token-selector-menu-class {
diff --git a/ee/app/assets/javascripts/work_items/components/work_item_progress.vue b/ee/app/assets/javascripts/work_items/components/work_item_progress.vue
index c78f6dbfcd302ab6348b7255cbf7dab477a017b3..99f4c94505b8b4d0c63823a8c9f226f57066bcca 100644
--- a/ee/app/assets/javascripts/work_items/components/work_item_progress.vue
+++ b/ee/app/assets/javascripts/work_items/components/work_item_progress.vue
@@ -158,7 +158,7 @@ export default {
:min="$options.minValue"
:max="$options.maxValue"
data-testid="work-item-progress-input"
- class="gl-hover-border-gray-200! gl-border-solid! gl-border-white! work-item-field-value"
+ class="gl-hover-border-gray-200! gl-border-solid! hide-unfocused-input-decoration work-item-field-value"
:class="{ 'hide-spinners gl-shadow-none!': !isEditing }"
:placeholder="placeholder"
:readonly="!canUpdate"
@@ -169,7 +169,7 @@ export default {
/>
<span
v-if="showPercent"
- class="gl-mx-4 gl-my-3 gl-absolute gl-top-0 gl-bg-white gl-border gl-border-white gl-line-height-normal"
+ class="gl-mx-4 gl-my-3 gl-absolute gl-top-0 gl-bg-transparent gl-border gl-border-transparent gl-line-height-normal gl-pointer-events-none"
data-testid="progress-displayed-value"
>
{{ localProgress }}%
diff --git a/ee/app/assets/javascripts/work_items/components/work_item_weight.vue b/ee/app/assets/javascripts/work_items/components/work_item_weight.vue
index a4d29434908a385028368b99f0477124fb07ce2b..e8282db20b6770a87d329e0a87509ea0f5ffe98a 100644
--- a/ee/app/assets/javascripts/work_items/components/work_item_weight.vue
+++ b/ee/app/assets/javascripts/work_items/components/work_item_weight.vue
@@ -159,9 +159,9 @@ export default {
:placeholder="placeholder"
:readonly="!canUpdate"
size="sm"
+ class="hide-unfocused-input-decoration work-item-field-value"
:type="type"
:value="weight"
- class="work-item-field-value"
@blur="updateWeight"
@focus="handleFocus"
@keydown="handleKeydown"
diff --git a/spec/frontend/work_items/components/work_item_assignees_spec.js b/spec/frontend/work_items/components/work_item_assignees_spec.js
index ff1998ab2edef059efcaaec22be8e47a56166be9..50a8847032ecb79e8e2836c97e242fde289f2d24 100644
--- a/spec/frontend/work_items/components/work_item_assignees_spec.js
+++ b/spec/frontend/work_items/components/work_item_assignees_spec.js
@@ -107,7 +107,7 @@ describe('WorkItemAssignees component', () => {
it('container does not have shadow by default', () => {
createComponent();
- expect(findTokenSelector().props('containerClass')).toBe('gl-shadow-none!');
+ expect(findTokenSelector().props('containerClass')).toContain('gl-shadow-none!');
});
it('container has shadow after focusing token selector', async () => {
@@ -415,7 +415,7 @@ describe('WorkItemAssignees component', () => {
findTokenSelector().vm.$emit('input', dropdownItems);
await nextTick();
- expect(findTokenSelector().props('containerClass')).toBe('gl-shadow-none!');
+ expect(findTokenSelector().props('containerClass')).toContain('gl-shadow-none!');
});
it('calls the mutation for updating assignees with the correct input', async () => {