Skip to content

Commit

Permalink
feat: add new variant to badge fix #93
Browse files Browse the repository at this point in the history
  • Loading branch information
HamzaAmar committed Oct 30, 2024
1 parent 56e8985 commit 23a5e12
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 4 deletions.
5 changes: 5 additions & 0 deletions apps/docs/src/app/_components/code/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
max-height: 80vh;
max-width: 100%;
margin: 0;
padding: 1rem 0;
}

.doc-code {
Expand All @@ -68,6 +69,10 @@
color: hsl(0deg 0% 64%);
font-size: 0.85rem;
vertical-align: middle;
min-width: 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
}

.sh__line {
Expand Down
16 changes: 13 additions & 3 deletions apps/docs/src/app/_components/playground/badge/badgeVariant.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@ import { Check } from '@pillar-ui/icons'
export const BadgeVariant = () => {
return (
<>
<Flex gap="3" items="center">
<Badge variant="shadow" type="dot" color="d" />
<Badge variant="shadow" type="numeric" number={15} max={15} color="d" />
<Badge variant="shadow" type="icon" icon={<Check />} color="d" />
</Flex>
<Flex gap="3" items="center">
<Badge type="dot" variant="solid" color="d" />
<Badge type="numeric" variant="solid" number={15} max={15} color="d" />
Expand All @@ -16,9 +21,14 @@ export const BadgeVariant = () => {
<Badge type="icon" variant="mixed" icon={<Check />} color="d" />
</Flex>
<Flex gap="3" items="center">
<Badge type="dot" color="d" />
<Badge type="numeric" number={15} max={15} color="d" />
<Badge type="icon" icon={<Check />} color="d" />
<Badge variant="soft" type="dot" color="d" />
<Badge variant="soft" type="numeric" number={15} max={15} color="d" />
<Badge variant="soft" type="icon" icon={<Check />} color="d" />
</Flex>
<Flex gap="3" items="center">
<Badge variant="outline" type="dot" color="d" />
<Badge variant="outline" type="numeric" number={15} max={15} color="d" />
<Badge variant="outline" type="icon" icon={<Check />} color="d" />
</Flex>
</>
)
Expand Down
2 changes: 1 addition & 1 deletion packages/pillar-core/src/core/badge/badge.type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ interface BadgeBaseProps {
color?: Color
corner?: Corner
highContrast?: boolean
variant?: 'solid' | 'mixed'
variant?: 'solid' | 'mixed' | 'soft' | 'outline' | 'shadow'
}

interface BadgeNumericProps extends BadgeBaseProps {
Expand Down

0 comments on commit 23a5e12

Please sign in to comment.