Skip to content

Commit

Permalink
feat(xo-core): update VtsIcon component brand color (#8325)
Browse files Browse the repository at this point in the history
  • Loading branch information
OlivierFL authored Feb 11, 2025
1 parent 832634f commit 8f87796
Show file tree
Hide file tree
Showing 13 changed files with 27 additions and 23 deletions.
4 changes: 2 additions & 2 deletions @xen-orchestra/lite/src/components/infra/InfraHostItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<UiTreeItemLabel :icon="faServer" :route="{ name: 'host.console', params: { uuid: host.uuid } }" @toggle="toggle()">
{{ host.name_label || '(Host)' }}
<template #addons>
<UiIcon v-if="isPoolMaster" v-tooltip="$t('master')" :icon="faStar" accent="warning" />
<VtsIcon v-if="isPoolMaster" v-tooltip="$t('master')" :icon="faStar" accent="warning" />
<UiCounter
v-if="isReady"
v-tooltip="$t('running-vm', { count: vmCount })"
Expand All @@ -28,7 +28,7 @@ import type { XenApiHost } from '@/libs/xen-api/xen-api.types'
import { useHostStore } from '@/stores/xen-api/host.store'
import { usePoolStore } from '@/stores/xen-api/pool.store'
import { useVmStore } from '@/stores/xen-api/vm.store'
import UiIcon from '@core/components/icon/VtsIcon.vue'
import VtsIcon from '@core/components/icon/VtsIcon.vue'
import VtsTreeItem from '@core/components/tree/VtsTreeItem.vue'
import VtsTreeList from '@core/components/tree/VtsTreeList.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@
<ComponentStory
v-slot="{ properties }"
:params="[
prop('accent').enum('current', 'info', 'success', 'warning', 'danger').required().preset('current').widget(),
prop('accent')
.enum('current', 'brand', 'info', 'success', 'warning', 'danger')
.required()
.preset('current')
.widget(),
iconProp().preset(faCheck),
prop('overlay-icon')
.type('IconDefinition')
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@
<UiLink v-bind="properties">This is a link</UiLink>

<div v-if="!properties.to && !properties.href" class="info">
<VtsIcon :icon="faInfoCircle" accent="brand" />
<VtsIcon :icon="faInfoCircle" accent="info" />
Link is disabled because no `href` or `to` is provided
</div>
<div v-else-if="properties.to && properties.href" class="info">
<VtsIcon :icon="faExclamationTriangle" accent="brand" />
<VtsIcon :icon="faExclamationTriangle" accent="info" />
`to` is ignored when `href` is provided
</div>
</ComponentStory>
Expand Down
4 changes: 2 additions & 2 deletions @xen-orchestra/web-core/docs/guidelines/best-practices.md
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ The component would look like this:
<template>
<div>
<slot name="icon">
<UiIcon :icon />
<VtsIcon :icon />
</slot>
<!-- rest of the code -->
</div>
Expand All @@ -161,7 +161,7 @@ defineSlots<{
</script>
```

In this case, you can use the `icon` prop for simple uses, and keep the flexibility of using the slot when needed, as the `UiIcon` component is overwritten when the slot is used.
In this case, you can use the `icon` prop for simple uses, and keep the flexibility of using the slot when needed, as the `VtsIcon` component is overwritten when the slot is used.

## Component MUST use inline handler or inline function for event handling

Expand Down
4 changes: 2 additions & 2 deletions @xen-orchestra/web-core/docs/icons.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

XO Lite / 6 / Core projects are using Font Awesome 6 Free.

Icons can be displayed with the `UiIcon` component.
Icons can be displayed with the `VtsIcon` component.

The component takes an `icon` prop that should be an icon object imported from `@fortawesome/free-solid-svg-icons` or `@fortawesome/free-regular-svg-icons`.

Expand All @@ -20,7 +20,7 @@ Use the `busy` prop to display a loader icon.
</template>
<script lang="ts" setup>
import UiIcon from '@/components/ui/icon/UiIcon.vue'
import VtsIcon from '@core/components/icon/VtsIcon.vue'
import { faDisplay } from '@fortawesome/free-solid-svg-icons'
</script>
```
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<slot />
</div>
<div v-if="info" class="info-text p3 italic">{{ info }}</div>
<VtsIcon v-if="arrow" :accent="disabled ? 'current' : 'info'" :icon="faAngleRight" class="right-icon" />
<VtsIcon v-if="arrow" :accent="disabled ? 'current' : 'brand'" :icon="faAngleRight" class="right-icon" />
</div>
</template>

Expand Down
4 changes: 2 additions & 2 deletions @xen-orchestra/web-core/lib/components/icon/VtsIcon.vue
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,10 @@ defineProps<{
}

&.brand {
color: var(--color-info-item-base);
color: var(--color-brand-item-base);

.overlay-icon {
color: var(--color-info-txt-item);
color: var(--color-brand-txt-item);
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
v-bind="attrs"
/>
<span class="fake-checkbox">
<VtsIcon :icon accent="info" class="icon" />
<VtsIcon :icon accent="current" class="icon" />
</span>
<span v-if="slots.default" class="typo p1-regular">
<slot />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
v-if="!attrs.disabled && modelValue && clearable"
:icon="faXmark"
class="after"
accent="info"
accent="brand"
@click="modelValue = ''"
/>
</div>
Expand Down
4 changes: 2 additions & 2 deletions @xen-orchestra/web-core/lib/components/ui/legend/UiLegend.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!-- v3 -->
<template>
<li :class="classNames" class="ui-legend">
<VtsIcon :icon="faCircle" accent="brand" class="circle-icon" />
<VtsIcon :icon="faCircle" accent="current" class="circle-icon" />
<span class="label typo p3-regular"><slot /></span>
<VtsIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" accent="info" />
<VtsIcon v-if="tooltip" v-tooltip="tooltip" :icon="faCircleInfo" class="tooltip-icon" accent="brand" />
<span v-if="valueLabel" class="value-and-unit typo c3-semi-bold">{{ valueLabel }}</span>
</li>
</template>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<RouterLink v-if="route && !disabled" :to="route" class="ui-object-link is-link typo p3-regular-underline">
<span class="icon">
<slot name="icon">
<UiIcon :icon accent="current" />
<VtsIcon :icon accent="current" />
</slot>
</span>
<span v-tooltip class="content text-ellipsis">
Expand All @@ -13,15 +13,15 @@
<span v-else :class="{ disabled }" class="ui-object-link typo p3-regular-underline">
<span class="icon">
<slot name="icon">
<UiIcon :icon accent="current" />
<VtsIcon :icon accent="current" />
</slot>
</span>
<slot />
</span>
</template>

<script lang="ts" setup>
import UiIcon from '@core/components/icon/VtsIcon.vue'
import VtsIcon from '@core/components/icon/VtsIcon.vue'
import { vTooltip } from '@core/directives/tooltip.directive'
import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
import { type RouteLocationRaw } from 'vue-router'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<div v-else class="h-line" />
<a v-tooltip="{ selector: '.text' }" :href class="link typo p2-medium" @click="navigate">
<slot name="icon">
<UiIcon :icon accent="current" class="icon" />
<VtsIcon :icon accent="current" class="icon" />
</slot>
<div class="text text-ellipsis">
<slot />
Expand All @@ -39,7 +39,7 @@
</template>

<script lang="ts" setup>
import UiIcon from '@core/components/icon/VtsIcon.vue'
import VtsIcon from '@core/components/icon/VtsIcon.vue'
import VtsTreeLine from '@core/components/tree/VtsTreeLine.vue'
import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
import { vTooltip } from '@core/directives/tooltip.directive'
Expand Down
4 changes: 2 additions & 2 deletions @xen-orchestra/web/src/components/tree/HostTreeItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
/>
</template>
<template #addons>
<UiIcon v-if="isMaster" v-tooltip="$t('master')" :icon="faStar" accent="warning" />
<VtsIcon v-if="isMaster" v-tooltip="$t('master')" :icon="faStar" accent="warning" />
<UiCounter
v-tooltip="$t('running-vm', runningVmsCount)"
:value="runningVmsCount"
Expand All @@ -35,7 +35,7 @@ import { useHostStore } from '@/stores/xo-rest-api/host.store'
import { useVmStore } from '@/stores/xo-rest-api/vm.store'
import type { HostBranch } from '@/types/tree.type'
import type { HostState } from '@core/types/object-icon.type'
import UiIcon from '@core/components/icon/VtsIcon.vue'
import VtsIcon from '@core/components/icon/VtsIcon.vue'
import VtsTreeItem from '@core/components/tree/VtsTreeItem.vue'
import VtsTreeList from '@core/components/tree/VtsTreeList.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
Expand Down

0 comments on commit 8f87796

Please sign in to comment.