Skip to content

add feature to have two icons at the same time #336

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
u12206050 merged 6 commits into from
Aug 14, 2025
Merged

add feature to have two icons at the same time #336

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
10d7d56
add feature to have two icons at the same time
BradleySchapf Aug 14, 2025
38c7a50
Update design-library/src/components/BccBadge/BccBadge.vue
u12206050 Aug 14, 2025
702f7d5
Update design-library/src/components/BccBadge/BccBadge.vue
BradleySchapf Aug 14, 2025
3eb21cd
Update design-library/src/components/BccBadge/BccBadge.vue
BradleySchapf Aug 14, 2025
c4f55dc
Merge branch 'main' into bccBadge/add-dual-icons
BradleySchapf Aug 14, 2025
e72428b
add correct icon check, moved some conditional logic to a computed prop
BradleySchapf Aug 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions design-library/src/components/BccBadge/BccBadge.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<script setup lang="ts">
import { BCC_CONTEXTS } from "@/composables/contexts";
import type { VueComponent } from "@/types";
import { computed, defineProps, withDefaults } from "vue";

withDefaults(
const props = withDefaults(
defineProps<{
icon?: VueComponent;
iconRight?: boolean;
iconRight?: boolean | VueComponent;
size?: "xs" | "sm" | "md";
contrast?: "light" | "dark";
bordered?: boolean;
Expand All @@ -19,16 +20,24 @@
context: "neutral",
}
);

const shouldShowRightIcon = computed(() => {
return (props.iconRight && typeof props.iconRight !== 'boolean') || (props.icon && props.iconRight === true)

Check failure on line 25 in design-library/src/components/BccBadge/BccBadge.vue

View workflow job for this annotation

GitHub Actions / lint 

Replace `props.iconRight·&&·typeof·props.iconRight·!==·'boolean')·||` with `⏎····(props.iconRight·&&·typeof·props.iconRight·!==·"boolean")·||⏎···`
})

Check failure on line 26 in design-library/src/components/BccBadge/BccBadge.vue

View workflow job for this annotation

GitHub Actions / lint 

Replace `})` with `··);⏎});`
Copy link

Copilot AI Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The logic for determining when to show the right icon is complex and could be simplified. Consider extracting the conditions into separate boolean variables with descriptive names like hasCustomRightIcon and hasIconMovedRight for better readability.

Suggested change
})
const hasCustomRightIcon = computed(() => props.iconRight && typeof props.iconRight !== 'boolean');
const hasIconMovedRight = computed(() => props.icon && props.iconRight === true);
const shouldShowRightIcon = computed(() => hasCustomRightIcon.value || hasIconMovedRight.value);

Copilot uses AI. Check for mistakes.
</script>

<template>
<div class="bcc-badge" :class="[BCC_CONTEXTS[context], contrast, size, { bordered }]">
<component

Check failure on line 31 in design-library/src/components/BccBadge/BccBadge.vue

View workflow job for this annotation

GitHub Actions / lint 

Replace `⏎······v-if="icon·&&·iconRight·!==·true"⏎······:is="icon"⏎······class="bcc-badge-icon·order-1"⏎···` with `·v-if="icon·&&·iconRight·!==·true"·:is="icon"·class="bcc-badge-icon·order-1"`
v-if="icon"
v-if="icon && iconRight !== true"
Copy link

Copilot AI Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The condition iconRight !== true is checking against a prop that can now be a boolean or VueComponent. This logic could be clearer by explicitly checking the type or using a computed property to determine when the left icon should be shown.

Copilot uses AI. Check for mistakes.
:is="icon"
class="bcc-badge-icon"
:class="[iconRight ? 'order-3' : 'order-1']"
class="bcc-badge-icon order-1"
/>
<span class="order-2 empty:hidden"><slot></slot></span>
<component
v-if="shouldShowRightIcon"
:is="typeof iconRight !== 'boolean' ? iconRight : icon"
Copy link

Copilot AI Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This ternary operator logic is repeated from the v-if condition above. Consider extracting this into a computed property like rightIconComponent to reduce duplication and improve maintainability.

Suggested change
:is="typeof iconRight !== 'boolean' ? iconRight : icon"
v-if="rightIconComponent"
:is="rightIconComponent"

Copilot uses AI. Check for mistakes.
Copy link
Member Author

@BradleySchapf BradleySchapf Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am going to leave the :is logic because it's trying to overwrite the v-if statement that is already there

Copy link
Member

@u12206050 u12206050 Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But if the rightIconComponent computed property returns the correct icon then you can just test it and display it?

class="bcc-badge-icon order-3"
/>
</div>
</template>
Loading