feat: add disabled state to icon

PrestaShopCorp · Jan 16, 2024 · 8a6fee8 · 8a6fee8
1 parent adbf7e9
commit 8a6fee8
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/packages/components/icon/src/icon.ts b/packages/components/icon/src/icon.ts
@@ -26,6 +26,11 @@ export const iconProps = buildProps({
     default: '#00000',
     required: false,
   },
+  isDisabled: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
 } as const)
 
 export type IconProps = ExtractPropTypes<typeof iconProps>

diff --git a/packages/components/icon/src/icon.vue b/packages/components/icon/src/icon.vue
@@ -28,7 +28,7 @@ const fontSize = computed(() => {
 const style = computed(() => {
   return {
     fontSize: fontSize.value,
-    color: props.color,
+    color: props.isDisabled ? '#BBBBBB' : props.color,
   }
 })
 </script>
diff --git a/packages/components/icon/test/icon.spec.ts b/packages/components/icon/test/icon.spec.ts
@@ -33,6 +33,16 @@ describe('Icon tests', () => {
     expect(findIcon().text()).toBe('check')
   })
 
+  it('should set the icon disabled', async () => {
+    factory({
+      icon: 'check',
+      color: 'red',
+      isDisabled: true,
+    })
+
+    expect(findIcon().element.style.color).toBe('rgb(187, 187, 187)')
+  })
+
   it('should set the color', async () => {
     factory({
       icon: 'check',