[CL-587] disabled item styles (#15822)

* wip

* remove cursor not allowed

* add disabled button story

* add cursor not allowed

libs/components/src/item/item-content.component.ts

@@ -24,7 +24,7 @@ import { TypographyModule } from "../typography";
        * y-axis padding should be kept in sync with `item-action.component.ts`'s `top` and `bottom` units.
        * we want this to be the same height as the `item-action`'s `:after` element
        */
-      "tw-outline-none tw-text-main hover:tw-text-main tw-no-underline hover:tw-no-underline tw-text-base tw-py-2 tw-px-4 bit-compact:tw-py-1.5 bit-compact:tw-px-2 tw-bg-transparent tw-w-full tw-border-none tw-flex tw-gap-4 tw-items-center tw-justify-between",
+      "tw-outline-none tw-text-main hover:tw-text-main tw-no-underline hover:tw-no-underline tw-text-base tw-py-2 tw-px-4 bit-compact:tw-py-1.5 bit-compact:tw-px-2 tw-bg-transparent tw-w-full tw-border-none tw-flex tw-gap-4 tw-items-center tw-justify-between disabled:tw-cursor-not-allowed [&[disabled]_[bittypography]]:!tw-text-secondary-300 [&[disabled]_i]:!tw-text-secondary-300",
     "data-fvw-target": "",
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

libs/components/src/item/item.component.ts

@@ -15,7 +15,7 @@ import { ItemActionComponent } from "./item-action.component";
   templateUrl: "item.component.html",
   host: {
     class:
-      "tw-block tw-box-border tw-overflow-hidden tw-flex tw-bg-background [&:has([data-item-main-content]_button:hover,[data-item-main-content]_a:hover)]:tw-cursor-pointer [&:has([data-item-main-content]_button:hover,[data-item-main-content]_a:hover)]:tw-bg-hover-default tw-text-main tw-border-solid tw-border-b tw-border-0 [&:not(bit-layout_*)]:tw-rounded-lg bit-compact:[&:not(bit-layout_*)]:tw-rounded-none bit-compact:[&:not(bit-layout_*)]:last-of-type:tw-rounded-b-lg bit-compact:[&:not(bit-layout_*)]:first-of-type:tw-rounded-t-lg tw-min-h-9 tw-mb-1.5 bit-compact:tw-mb-0",
+      "tw-block tw-box-border tw-overflow-hidden tw-flex tw-bg-background [&:has([data-item-main-content]_button:hover,[data-item-main-content]_a:hover)]:tw-cursor-pointer [&:has([data-item-main-content]_button:enabled:hover,[data-item-main-content]_a:hover)]:tw-bg-hover-default tw-text-main tw-border-solid tw-border-b tw-border-0 [&:not(bit-layout_*)]:tw-rounded-lg bit-compact:[&:not(bit-layout_*)]:tw-rounded-none bit-compact:[&:not(bit-layout_*)]:last-of-type:tw-rounded-b-lg bit-compact:[&:not(bit-layout_*)]:first-of-type:tw-rounded-t-lg tw-min-h-9 tw-mb-1.5 bit-compact:tw-mb-0",
   },
 })
 export class ItemComponent {

libs/components/src/item/item.stories.ts

@@ -124,6 +124,11 @@ export const ContentTypes: Story = {
           And I am a button.
         </button>
       </bit-item>
+      <bit-item>
+        <button bit-item-content disabled title="I'm a disabled button">
+          And I am a disabled button.
+        </button>
+      </bit-item>
       <bit-item>
         <bit-item-content>
           I'm just static :(