From 057c4dce08e5e38d4e7b446f0b78c320144217e3 Mon Sep 17 00:00:00 2001
From: Daniel Tian <dtian@gitlab.com>
Date: Tue, 29 Nov 2022 15:01:28 -1000
Subject: [PATCH] fix(GlDropdownItem): Fix dropdown item disabled state styling
---
src/components/base/dropdown/dropdown_item.scss | 16 ++++++++++++++++
.../base/dropdown/dropdown_item.stories.js | 5 ++++-
2 files changed, 20 insertions(+), 1 deletion(-)
diff --git a/src/components/base/dropdown/dropdown_item.scss b/src/components/base/dropdown/dropdown_item.scss
index 6814410f74..a8f0e042cf 100644
--- a/src/components/base/dropdown/dropdown_item.scss
+++ b/src/components/base/dropdown/dropdown_item.scss
@@ -63,6 +63,22 @@
@include gl-text-decoration-none;
}
+ &:disabled {
+ @include gl-text-gray-500;
+
+ .gl-new-dropdown-item-check-icon {
+ @include gl-reset-color;
+ }
+
+ .gl-new-dropdown-item-text-secondary {
+ @include gl-reset-color;
+ }
+
+ .gl-avatar {
+ @include gl-opacity-7;
+ }
+ }
+
&:not(.disable-hover):hover,
&:active,
&:focus,
diff --git a/src/components/base/dropdown/dropdown_item.stories.js b/src/components/base/dropdown/dropdown_item.stories.js
index 723ad9523c..997ab717ce 100644
--- a/src/components/base/dropdown/dropdown_item.stories.js
+++ b/src/components/base/dropdown/dropdown_item.stories.js
@@ -18,7 +18,8 @@ const wrap = (template) => `
:is-checked="isChecked"
:is-check-item="isCheckItem"
:is-check-centered="isCheckCentered"
- :secondary-text="secondaryText">
+ :secondary-text="secondaryText"
+ :disabled="disabled">
${template}
</gl-dropdown-item>
</ul>
@@ -36,6 +37,7 @@ const generateProps = ({
isCheckItem = defaultValue('isCheckItem'),
isCheckCentered = defaultValue('isCheckCentered'),
secondaryText = defaultValue('secondaryText'),
+ disabled = false,
} = {}) => ({
avatarUrl,
iconColor,
@@ -46,6 +48,7 @@ const generateProps = ({
isCheckItem,
isCheckCentered,
secondaryText,
+ disabled,
});
export const Default = (args, { argTypes }) => ({
--
GitLab