fix(components): list item disabled (#2184)

Teradata · Jul 29, 2024 · 4ba3ab2 · 4ba3ab2
1 parent 170f3f7
commit 4ba3ab2
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 8 deletions.
diff --git a/libs/components/src/list/list-item.scss b/libs/components/src/list/list-item.scss
@@ -11,6 +11,15 @@
   border-radius: 9999px;
 }
 
+:host([disabled]) {
+  color: var(--cv-theme-on-surface-38);
+
+  &:host([graphic='avatar']) .mdc-deprecated-list-item__graphic,
+  .mdc-deprecated-list-item__meta {
+    --mdc-theme-text-icon-on-background: var(--cv-theme-on-surface-38);
+  }
+}
+
 .mdc-deprecated-list-item__meta.material-icons ::slotted(cv-icon) {
   font-family: var(--mdc-icon-font);
   font-size: var(--mdc-icon-size, 24px);

diff --git a/libs/components/src/list/list.stories.js b/libs/components/src/list/list.stories.js
@@ -11,10 +11,10 @@ export default {
   },
 };
 
-const BasicTemplate = ({ selected }) => {
+const BasicTemplate = ({ selected, disabled }) => {
   return `
     <cv-list activatable>
-        <cv-list-item>Item 0</cv-list-item>
+        <cv-list-item ${disabled ? `disabled` : null}>Item 0</cv-list-item>
         <cv-list-item ${
           selected ? `selected activated` : null
         }>Item 1</cv-list-item>
@@ -23,10 +23,10 @@ const BasicTemplate = ({ selected }) => {
     </cv-list>`;
 };
 
-const IconTemplate = ({ icon, iconStyle = 'avatar' }) => {
+const IconTemplate = ({ icon, iconStyle = 'avatar', disabled }) => {
   return `
     <cv-list>
-        <cv-list-item graphic="${iconStyle}">
+        <cv-list-item graphic="${iconStyle}" ${disabled ? `disabled` : null}>
             <span>${iconStyle} 0</span>
             <cv-icon slot="graphic">${icon}</cv-icon>
         </cv-list-item>
@@ -49,10 +49,10 @@ const IconTemplate = ({ icon, iconStyle = 'avatar' }) => {
     </cv-list>`;
 };
 
-const TwoLineTemplate = ({ icon, style, required, helper }) => {
+const TwoLineTemplate = ({ icon, style, required, helper, disabled }) => {
   return `
     <cv-list>
-        <cv-list-item twoline>
+        <cv-list-item twoline ${disabled ? `disabled` : null}>
             <span>Item 0</span>
             <span slot="secondary">Secondary line</span>
         </cv-list-item>
@@ -71,10 +71,12 @@ const TwoLineTemplate = ({ icon, style, required, helper }) => {
     </cv-list>`;
 };
 
-const CheckRadioTemplate = ({ listType = 'check' }) => {
+const CheckRadioTemplate = ({ listType = 'check', disabled }) => {
   return `
     <cv-list multi>
-        <cv-${listType}-list-item selected>Item 0</cv-${listType}-list-item>
+        <cv-${listType}-list-item selected ${
+    disabled ? `disabled` : null
+  }>Item 0</cv-${listType}-list-item>
         <cv-${listType}-list-item selected>Item 1</cv-${listType}-list-item>
         <li divider role="separator" padded></li>
         <cv-${listType}-list-item left selected>Item 2 (left)</cv-${listType}-list-item>
@@ -85,12 +87,14 @@ const CheckRadioTemplate = ({ listType = 'check' }) => {
 export const Basic = BasicTemplate.bind({});
 Basic.args = {
   selected: false,
+  disabled: false,
 };
 
 export const WithAvatar = IconTemplate.bind({});
 WithAvatar.args = {
   icon: 'folder',
   iconStyle: 'avatar',
+  disabled: false,
 };
 WithAvatar.argTypes = {
   iconStyle: {
@@ -100,8 +104,14 @@ WithAvatar.argTypes = {
 };
 
 export const TwoLine = TwoLineTemplate.bind({});
+TwoLine.args = {
+  disabled: false,
+};
 
 export const ChecksAndRadios = CheckRadioTemplate.bind({});
+ChecksAndRadios.args = {
+  disabled: false,
+};
 ChecksAndRadios.argTypes = {
   listType: {
     options: ['check', 'radio'],