From 340c0e8c2bb095073c635393c147b078fff5f3fe Mon Sep 17 00:00:00 2001
From: Will Martin <contact@willmartian.com>
Date: Thu, 29 Aug 2024 15:18:41 -0400
Subject: [PATCH] [CL-278][CL-391] misc bit-item style fixes (#10758)

* update stories to use small icon button

* update colors

* [CL-391] use pointer cursor on hover when link or button
---
 libs/components/src/item/item.component.html |  5 ++-
 libs/components/src/item/item.stories.ts     | 36 ++++++++++----------
 2 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/libs/components/src/item/item.component.html b/libs/components/src/item/item.component.html
index c02117058f1..130b2984752 100644
--- a/libs/components/src/item/item.component.html
+++ b/libs/components/src/item/item.component.html
@@ -1,9 +1,8 @@
-<!-- TODO: Colors will be finalized in the extension refresh feature branch -->
 <div
-  class="tw-box-border tw-overflow-auto tw-flex tw-bg-background [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-bg-primary-300/20 tw-text-main tw-border-solid tw-border-b tw-border-0 tw-rounded-lg tw-mb-1.5"
+  class="tw-box-border tw-overflow-auto tw-flex tw-bg-background [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-cursor-pointer [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-bg-primary-100 tw-text-main tw-border-solid tw-border-b tw-border-0 tw-rounded-lg tw-mb-1.5"
   [ngClass]="
     focusVisibleWithin()
-      ? 'tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-primary-600 tw-border-transparent'
+      ? 'tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-primary-700 tw-border-transparent'
       : 'tw-border-b-secondary-300 [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-border-b-transparent'
   "
 >
diff --git a/libs/components/src/item/item.stories.ts b/libs/components/src/item/item.stories.ts
index e8accfd6933..f307d7dbbd0 100644
--- a/libs/components/src/item/item.stories.ts
+++ b/libs/components/src/item/item.stories.ts
@@ -53,10 +53,10 @@ export const Default: Story = {
             <button type="button" bitBadge variant="primary">Auto-fill</button>
           </bit-item-action>
           <bit-item-action>
-            <button type="button" bitIconButton="bwi-clone"></button>
+            <button type="button" bitIconButton="bwi-clone" size="small"></button>
           </bit-item-action>
           <bit-item-action>
-            <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+            <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
           </bit-item-action>
         </ng-container>
       </bit-item>
@@ -121,10 +121,10 @@ export const TextOverflow: Story = {
         </bit-item-content>
         <ng-container slot="end">
           <bit-item-action>
-            <button type="button" bitIconButton="bwi-clone"></button>
+            <button type="button" bitIconButton="bwi-clone" size="small"></button>
           </bit-item-action>
           <bit-item-action>
-            <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+            <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
           </bit-item-action>
         </ng-container>
       </bit-item>
@@ -149,10 +149,10 @@ export const MultipleActionList: Story = {
               <button type="button" bitBadge variant="primary">Auto-fill</button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone"></button>
+              <button type="button" bitIconButton="bwi-clone" size="small"></button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
             </bit-item-action>
           </ng-container>
         </bit-item>
@@ -168,10 +168,10 @@ export const MultipleActionList: Story = {
               <button type="button" bitBadge variant="primary">Auto-fill</button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone"></button>
+              <button type="button" bitIconButton="bwi-clone" size="small"></button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
             </bit-item-action>
           </ng-container>
         </bit-item>
@@ -187,10 +187,10 @@ export const MultipleActionList: Story = {
               <button type="button" bitBadge variant="primary">Auto-fill</button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone"></button>
+              <button type="button" bitIconButton="bwi-clone" size="small"></button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
             </bit-item-action>
           </ng-container>
         </bit-item>
@@ -206,10 +206,10 @@ export const MultipleActionList: Story = {
               <button type="button" bitBadge variant="primary">Auto-fill</button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone"></button>
+              <button type="button" bitIconButton="bwi-clone" size="small"></button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
             </bit-item-action>
           </ng-container>
         </bit-item>
@@ -225,10 +225,10 @@ export const MultipleActionList: Story = {
               <button type="button" bitBadge variant="primary">Auto-fill</button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone"></button>
+              <button type="button" bitIconButton="bwi-clone" size="small"></button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
             </bit-item-action>
           </ng-container>
         </bit-item>
@@ -244,10 +244,10 @@ export const MultipleActionList: Story = {
               <button type="button" bitBadge variant="primary">Auto-fill</button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-clone"></button>
+              <button type="button" bitIconButton="bwi-clone" size="small"></button>
             </bit-item-action>
             <bit-item-action>
-              <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+              <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
             </bit-item-action>
           </ng-container>
         </bit-item>
@@ -321,10 +321,10 @@ export const VirtualScrolling: Story = {
                 <button type="button" bitBadge variant="primary">Auto-fill</button>
               </bit-item-action>
               <bit-item-action>
-                <button type="button" bitIconButton="bwi-clone"></button>
+                <button type="button" bitIconButton="bwi-clone" size="small"></button>
               </bit-item-action>
               <bit-item-action>
-                <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+                <button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
               </bit-item-action>
             </ng-container>
           </bit-item>