Skip to content

fix: use icons in features #2015

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

Open
joseacabaneros wants to merge 1 commit into
base: main
Choose a base branch
from
+64 −24
Open

fix: use icons in features #2015

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
18 changes: 10 additions & 8 deletions packages/x-design-system/demo/src/app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
<template>
<Badge />
<Button />
<ButtonGroup />
<Highlight />
<Icon />
<Input />
<ProgressBar />
<Integration />
<div class="xds:flex xds:flex-col xds:gap-40">
<Button />
<ButtonGroup />
<Icon />
<Highlight />
<Input />
<Badge />
<ProgressBar />
<Integration />
</div>
</template>

<script setup lang="ts">
Expand Down
15 changes: 15 additions & 0 deletions packages/x-design-system/demo/src/components/badge.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,20 @@
<span class="xds:attach-bottom-right xds:badge xds:badge-md xds:badge-circle">10</span>
</span>
</template>
<template #with-icon>
<span class="xds:badge">
<CuratedIcon class="xds:icon" />
</span>
<span class="xds:badge xds:badge-sm xds:badge-accent">
<CuratedIcon class="xds:icon" />
</span>
<span class="xds:badge xds:badge-circle">
<CuratedIcon class="xds:icon" />
</span>
<span class="xds:badge xds:badge-circle xds:badge-sm xds:badge-accent">
<CuratedIcon class="xds:icon" />
</span>
</template>
<template #combinations>
<span class="xds:badge xds:badge-error xds:badge-sm xds:badge-outlined">
error sm outlined badge
Expand All @@ -100,6 +114,7 @@
</template>

<script setup lang="ts">
import CuratedIcon from './icons/curated.svg'
import Wrapper from './wrapper.vue'

const rows = [
Expand Down
17 changes: 13 additions & 4 deletions packages/x-design-system/demo/src/components/button-group.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,18 +41,27 @@
<button class="xds:button xds:button-tight xds:button-warning">BUTTON 3</button>
</div>
<div class="xds:button-group" :class="{ 'xds:rounded-xl': row === 'rounded' }">
<button class="xds:button xds:button-highlight xds:button-circle">+</button>
<button class="xds:button xds:button-ghost xds:button-success xds:button-square">+</button>
<button class="xds:button xds:button-highlight xds:button-circle">
<PlusIcon class="xds:icon" />
</button>
<button class="xds:button xds:button-ghost xds:button-success xds:button-square">
<PlusIcon class="xds:icon" />
</button>
</div>
<div class="xds:button-group" :class="{ 'xds:rounded-xl': row === 'rounded' }">
<button class="xds:button xds:button-highlight xds:button-square">+</button>
<button class="xds:button xds:button-ghost xds:button-success xds:button-square">+</button>
<button class="xds:button xds:button-highlight xds:button-square">
<PlusIcon class="xds:icon" />
</button>
<button class="xds:button xds:button-ghost xds:button-success xds:button-square">
<PlusIcon class="xds:icon" />
</button>
</div>
</template>
</Wrapper>
</template>

<script setup lang="ts">
import PlusIcon from './icons/plus.svg'
import Wrapper from './wrapper.vue'

const rows = ['default', 'rounded']
Expand Down
28 changes: 21 additions & 7 deletions packages/x-design-system/demo/src/components/button.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,12 @@
<button class="xds:button xds:button-xl">xl badge</button>
</template>
<template #layout>
<button class="xds:button xds:button-circle">+</button>
<button class="xds:button xds:button-square">+</button>
<button class="xds:button xds:button-circle">
<CuratedIcon class="xds:icon" />
</button>
<button class="xds:button xds:button-square">
<CuratedIcon class="xds:icon" />
</button>
</template>
<template #color>
<button class="xds:button">button</button>
Expand Down Expand Up @@ -143,20 +147,30 @@
</button>
</template>
<template #combinations>
<button class="xds:button xds:button-lead xds:button-sm">lead sm button</button>
<button class="xds:button xds:button-lead xds:button-sm">
<CuratedIcon class="xds:icon" />
lead sm button
</button>
<button class="xds:button xds:button-outlined xds:button-square xds:button-lg xds:selected">
+
<CuratedIcon class="xds:icon" />
</button>
<button class="xds:button xds:button-auxiliary xds:button-outlined xds:button-circle">
-
<CuratedIcon class="xds:icon" />
</button>
<button class="xds:button xds:button-accent xds:button-tight">
<CuratedIcon class="xds:icon" />
accent tight button
</button>
<button class="xds:button xds:button-warning xds:button-ghost">
<CuratedIcon class="xds:icon" />
warning ghost button
</button>
<button class="xds:button xds:button-accent xds:button-tight">accent tight button</button>
<button class="xds:button xds:button-warning xds:button-ghost">warning ghost button</button>
</template>
</Wrapper>
</template>

<script setup lang="ts">
import CuratedIcon from './icons/curated.svg'
import Wrapper from './wrapper.vue'

const rows = [
Expand Down
4 changes: 2 additions & 2 deletions packages/x-design-system/demo/src/components/progress-bar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<Wrapper feature="ProgressBar" :rows="rows">
<Wrapper feature="Progress Bar" :rows="rows">
<template #default>
<span>default</span>
<div class="xds:progress-bar xds:w-320">
Expand All @@ -8,7 +8,7 @@
</template>
<template #size>
<div class="xds:flex xds:gap-8 xds:items-center xds:mr-16">
<span>sm</span>
<span>md</span>
<div class="xds:progress-bar xds:progress-bar-sm xds:w-320">
<div class="xds:progress-bar-fill xds:w-[30%]" />
</div>
Expand Down
6 changes: 3 additions & 3 deletions packages/x-design-system/demo/src/components/wrapper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<template>
<table class="xds:min-w-full xds:mb-16">
<table class="xds:min-w-full xds:border xds:border-neutral-50">
<thead class="xds:bg-neutral-25">
<tr>
<th colspan="2" class="xds:p-8">{{ feature }}</th>
<th colspan="2" class="xds:p-12 xds:text-xl">{{ feature }}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in rows" :key="row">
<tr v-for="row in rows" :key="row" class="xds:not-last:border-b xds:border-b-neutral-10">
<td class="xds:w-192 xds:p-12 xds:text-right">{{ row }}</td>
<td
class="xds:p-12 xds:flex xds:items-center xds:flex-wrap xds:whitespace-nowrap xds:gap-8"
Expand Down
Loading