Merge branch 'feature/button-icons-filled' into staging

weni-ai · Jan 29, 2025 · 49edba4 · 49edba4
2 parents 8e08763 + 249abe4
commit 49edba4
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 4 deletions.
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
@@ -16,6 +16,7 @@
       icon="loading-circle-1"
       :scheme="iconScheme"
       :size="iconSize"
+      :filled="iconsFilled"
       :style="{ position: 'absolute' }"
       class="rotation"
       :next="next"
@@ -27,6 +28,7 @@
       :icon="iconLeft"
       :scheme="iconScheme"
       :size="iconSize"
+      :filled="iconsFilled"
       :class="{ 'unnnic-button__icon-left': hasText }"
       :style="{ visibility: loading ? 'hidden' : null }"
       :next="next"
@@ -39,6 +41,7 @@
       :scheme="iconScheme"
       :style="{ visibility: loading ? 'hidden' : null }"
       :size="iconSize"
+      :filled="iconsFilled"
       :next="next"
       data-testid="icon-center"
     />
@@ -57,6 +60,7 @@
       :icon="iconRight"
       :scheme="iconScheme"
       :size="iconSize"
+      :filled="iconsFilled"
       :class="{ 'unnnic-button__icon-right': hasText }"
       :style="{ visibility: loading ? 'hidden' : null }"
       :next="next"
@@ -102,6 +106,10 @@ export default {
       type: String,
       default: '',
     },
+    iconsFilled: {
+      type: Boolean,
+      default: false,
+    },
     next: {
       type: Boolean,
       default: false,

diff --git a/src/components/Button/__tests__/Button.spec.js b/src/components/Button/__tests__/Button.spec.js
@@ -89,4 +89,18 @@ describe('Button', () => {
     const invalidType = () => createWrapper({ type: 'invalid-type' });
     expect(invalidType).toThrow(Error);
   });
+
+  it('should render filled icons when iconsFilled prop is true', async () => {
+    const wrapper = createWrapper({ 
+      iconLeft: 'search-1',
+      iconRight: 'search-1',
+      iconsFilled: true 
+    });
+
+    const leftIcon = wrapper.findComponent('[data-testid="icon-left"]');
+    const rightIcon = wrapper.findComponent('[data-testid="icon-right"]');
+
+    expect(leftIcon.props('filled')).toBe(true);
+    expect(rightIcon.props('filled')).toBe(true);
+  });
 });
diff --git a/src/components/Drawer/__tests__/__snapshots__/Drawer.spec.js.snap b/src/components/Drawer/__tests__/__snapshots__/Drawer.spec.js.snap
@@ -14,8 +14,8 @@ exports[`Drawer.vue > Component Rendering > Component Rendering > matches the sn
       </header>
       <section data-v-196de012="" class="unnnic-drawer__content"></section>
       <footer data-v-196de012="" class="unnnic-drawer__footer" data-testid="footer">
-        <unnnic-button-stub data-v-196de012="" size="large" text="Secondary Action" type="tertiary" float="false" iconleft="" iconright="" iconcenter="" next="false" disabled="false" loading="false" data-testid="secondary-button"></unnnic-button-stub>
-        <unnnic-button-stub data-v-196de012="" size="large" text="Primary Action" type="primary" float="false" iconleft="" iconright="" iconcenter="" next="false" disabled="false" loading="false" data-testid="primary-button"></unnnic-button-stub>
+        <unnnic-button-stub data-v-196de012="" size="large" text="Secondary Action" type="tertiary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" next="false" disabled="false" loading="false" data-testid="secondary-button"></unnnic-button-stub>
+        <unnnic-button-stub data-v-196de012="" size="large" text="Primary Action" type="primary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" next="false" disabled="false" loading="false" data-testid="primary-button"></unnnic-button-stub>
       </footer>
     </section>
   </transition-stub>

diff --git a/src/components/ModalDialog/__tests__/__snapshots__/ModalDialog.spec.js.snap b/src/components/ModalDialog/__tests__/__snapshots__/ModalDialog.spec.js.snap
@@ -15,8 +15,8 @@ exports[`ModalDialog.vue > Elements rendering > matches the snapshot 1`] = `
       </header>
       <section data-v-68ebadeb="" class="unnnic-modal-dialog__container__content"></section>
       <section data-v-68ebadeb="" data-testid="actions-section" class="unnnic-modal-dialog__container__actions">
-        <unnnic-button-stub data-v-68ebadeb="" size="large" text="Cancel" type="tertiary" float="false" iconleft="" iconright="" iconcenter="" next="false" disabled="false" loading="false" data-testid="secondary-button" class="unnnic-modal-dialog__container__actions__secondary-button"></unnnic-button-stub>
-        <unnnic-button-stub data-v-68ebadeb="" size="large" text="Confirm" type="primary" float="false" iconleft="" iconright="" iconcenter="" next="false" disabled="false" loading="false" data-testid="primary-button" class="unnnic-modal-dialog__container__actions__primary-button"></unnnic-button-stub>
+        <unnnic-button-stub data-v-68ebadeb="" size="large" text="Cancel" type="tertiary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" next="false" disabled="false" loading="false" data-testid="secondary-button" class="unnnic-modal-dialog__container__actions__secondary-button"></unnnic-button-stub>
+        <unnnic-button-stub data-v-68ebadeb="" size="large" text="Confirm" type="primary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" next="false" disabled="false" loading="false" data-testid="primary-button" class="unnnic-modal-dialog__container__actions__primary-button"></unnnic-button-stub>
       </section>
     </section>
   </section>

diff --git a/src/stories/Button.stories.js b/src/stories/Button.stories.js
@@ -100,6 +100,14 @@ export const WithIcon = {
   },
 };
 
+export const FilledIcon = {
+  args: {
+    text: 'Button Text',
+    iconLeft: 'play_arrow',
+    iconsFilled: true, 
+  },
+};
+
 export const OnlyIcon = {
   args: {
     iconCenter: 'add',