Skip to content

Commit

Permalink
fix: icon and icon-button sizes
Browse files Browse the repository at this point in the history 
Signed-off-by: Saulo Vallory <[email protected]>
  • Loading branch information
@svallory
svallory committed Jan 16, 2025
1 parent fb87b00 commit ddc9edd
Show file tree
Hide file tree
Showing 35 changed files with 504 additions and 486 deletions.
25 changes: 6 additions & 19 deletions packages/ui/src/lib/components/action-group/action-group.stories.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
import type { Meta } from '@storybook/svelte';
import type { SvelteComponent } from 'svelte';
import { Button } from '../button';
import { Icon } from '../icon';
import { IconButton } from '../icon-button';
import ActionGroup from './action-group.svelte';
Expand All @@ -26,30 +25,18 @@

<Story name="With Icon Buttons">
<ActionGroup>
<IconButton>
<Icon iconName="AdjustSvg" />
</IconButton>
<IconButton>
<Icon iconName="BackSvg" />
</IconButton>
<IconButton>
<Icon iconName="DraftSvg" />
</IconButton>
<IconButton>
<Icon iconName="TimerSvg" />
</IconButton>
<IconButton>
<Icon iconName="StarOnSvg" />
</IconButton>
<IconButton iconName="AdjustSvg" />
<IconButton iconName="BackSvg" />
<IconButton iconName="DraftSvg" />
<IconButton iconName="TimerSvg" />
<IconButton iconName="StarOnSvg" />
</ActionGroup>
</Story>

<Story name="Mixed">
<ActionGroup>
<Button>Edit</Button>
<IconButton>
<Icon iconName="StarOnSvg" />
</IconButton>
<IconButton iconName="StarOnSvg" />
<Button>Save</Button>
</ActionGroup>
</Story>
Expand Down
35 changes: 13 additions & 22 deletions packages/ui/src/lib/components/badge/badge.stories.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<script context="module" lang="ts">
import { Story } from '@storybook/addon-svelte-csf';
import { Icon } from '../icon';
import { IconButton } from '../icon-button';
import Badge from './badge.svelte';
Expand All @@ -19,12 +18,8 @@
<Story name="Default">
<Badge text="Tag Name" color="#7B61FF" size="small">
<svelte:fragment slot="actions">
<IconButton size="small">
<Icon iconName="AdjustSvg" />
</IconButton>
<IconButton size="small">
<Icon iconName="BreakSvg" />
</IconButton>
<IconButton iconName="AdjustSvg" />
<IconButton iconName="BreakSvg" />
</svelte:fragment>
</Badge>
</Story>
Expand All @@ -33,16 +28,12 @@
<div style="display: flex; flex-direction: column; gap: 8px;">
<Badge text="Small Badge" color="#7B61FF" size="small">
<svelte:fragment slot="actions">
<IconButton size="small">
<Icon iconName="Break_12Svg" size="small" />
</IconButton>
<IconButton size="small" iconName="Break_12Svg" />
</svelte:fragment>
</Badge>
<Badge text="Medium Badge" color="#7B61FF" size="medium">
<svelte:fragment slot="actions">
<IconButton>
<Icon iconName="Break_16Svg" size="medium" />
</IconButton>
<IconButton size="medium" iconName="Break_16Svg" />
</svelte:fragment>
</Badge>
</div>
Expand All @@ -52,29 +43,29 @@
<Badge text="Simple Tag" color="#ffcc00" />
</Story>

<Story name="Text Only">
<Badge text="Simple Tag" no-dot on:click={() => alert('clicked')} />
</Story>

<Story name="With Icon">
<div style="display: flex; gap: 8px;">
<Badge text="Named Icon" iconName="AdjustSvg" color="#7B61FF" size="small" />
<Badge text="Text Icon" iconText="🎨" color="#1BC47D" size="small" />
<Badge text="Text Icon" iconText="🎨" color="#1BC47D" />
<Badge
size="medium"
text="SVG Icon"
icon="<svg width='16' height='16' viewBox='0 0 16 16' fill='none'><circle cx='8' cy='8' r='4' fill='currentColor'/></svg>"
color="#ffcc00"
size="small"
/>
<Badge text="Spinning Icon" iconName="AdjustSvg" color="#7B61FF" spin size="small" />
<Badge text="Spinning Icon" iconName="CircleInfoSvg_16" color="lightblue" spin size="medium" />
</div>
</Story>

<Story name="Disabled">
<Badge text="Disabled Tag" color="#1BC47D" size="small">
<svelte:fragment slot="actions">
<IconButton size="small">
<Icon iconName="AdjustSvg" />
</IconButton>
<IconButton size="small">
<Icon iconName="BreakSvg" />
</IconButton>
<IconButton size="small" iconName="AdjustSvg" />
<IconButton size="small" iconName="BreakSvg" />
</svelte:fragment>
</Badge>
</Story>
95 changes: 78 additions & 17 deletions packages/ui/src/lib/components/badge/badge.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import { getIconProps, Icon, type IconProps } from '#ui/icon';
import Text from '#ui/typography/text.svelte';
import { cva, type VariantProps } from 'class-variance-authority';
import { createEventDispatcher } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
const badge = cva('fps-badge', {
Expand Down Expand Up @@ -38,7 +39,7 @@
}
type $$Props = Partial<IconProps> &
HTMLAttributes<HTMLDivElement> &
HTMLAttributes<HTMLButtonElement> &
VariantProps<typeof badge> & {
/** Text content of the badge */
text?: string;
Expand Down Expand Up @@ -75,14 +76,67 @@
$: if (iconProps && $$props.spin) {
iconProps = { ...iconProps, spin: $$props.spin };
}
const dispatch = createEventDispatcher<{
click: MouseEvent;
}>();
/** @internal */
function handleClick(event: MouseEvent) {
// Only stop propagation if click was on action buttons
const actionButton = (event.target as HTMLElement).closest('.fps-badge-actions');
if (actionButton) {
event.stopPropagation();
return;
}
// Forward the click event
dispatch('click', event);
}
/** @internal */
function handleKeyDown(event: KeyboardEvent) {
// Only handle keyboard events on the badge itself, not on action buttons
if ((event.target as HTMLElement).closest('.fps-badge-actions')) {
return;
}
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
}
}
</script>

<div class="fps-badge-wrapper">
<div
<button
class={badge({ hasActions: showActions, size, noDot, class: $$props.class })}
style:background-color={colorConfig.bg}
style:color={colorConfig.text}
style:border-color={colorConfig.border}
on:click={handleClick}
on:keydown={handleKeyDown}
on:mouseenter
on:mouseleave
on:focus
on:blur
on:keyup
on:keypress
on:mousedown
on:mouseup
on:mousemove
on:mouseover
on:mouseout
on:pointerdown
on:pointerup
on:pointermove
on:pointerenter
on:pointerleave
on:pointerover
on:pointerout
on:pointercancel
on:contextmenu
on:dblclick
type="button"
>
{#if !$$props['no-dot']}
{#if iconProps}
Expand All @@ -105,8 +159,8 @@
</svg>
{/if}
{/if}
<Text emphasis="secondary" {size}>
<span style:color={colorConfig.text}>{text}</span>
<Text emphasis="secondary" {size} pointerEvents="none">
<span style:color={colorConfig.text} style:pointer-events="none">{text}</span>
</Text>
{#if showActions}
<div class="fps-badge-actions">
Expand All @@ -115,7 +169,7 @@
</slot>
</div>
{/if}
</div>
</button>
</div>

<style lang="scss">
Expand All @@ -124,28 +178,35 @@
flex: none;
order: 0;
flex-grow: 0;
margin-left: var(--space-2);
margin-left: var(--spacer-2);
color: var(--color-text);
height: var(--space-6);
height: var(--spacer-4);
&:where(.fps-badge-small) {
height: 20px;
}
:global(button) {
background: none;
padding: 0;
border: none;
font: inherit;
outline: inherit;
cursor: pointer;
}
}
.fps-badge {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-1);
gap: var(--spacer-1);
border: 1px solid var(--figma-color-border);
border-radius: var(--radius-medium);
font-family: var(--font-family-default);
height: var(--space-6);
height: var(--spacer-4);
box-sizing: border-box;
&:where(.fps-badge-small) {
font-size: var(--font-size-1);
padding: 0 4px;
height: 20px;
Expand All @@ -155,10 +216,10 @@
}
.fps-badge-actions {
height: 16px;
overflow: hidden;
:global(button) {
width: 16px;
height: 16px;
display: flex;
align-items: center;
Expand All @@ -167,22 +228,22 @@
}
&:where(.fps-badge-medium) {
font-size: var(--font-size-2);
// font-size: var(-text-body-medium-font-size);
padding: 0 6px;
}
&:where(.fps-has-actions) {
padding-right: var(--space-1);
padding-right: var(--spacer-1);
}
&:where(.fps-no-dot) {
padding-left: var(--space-2);
padding-left: var(--spacer-2);
}
.fps-badge-actions {
display: flex;
align-items: center;
gap: var(--space-1);
gap: var(--spacer-1);
height: 100%;
}
}
Expand Down Expand Up @@ -210,7 +271,7 @@
:global(.fps-badge [slot='actions']) {
display: flex;
align-items: center;
gap: var(--space-1);
gap: var(--spacer-1);
height: 100%;
}
</style>
10 changes: 5 additions & 5 deletions packages/ui/src/lib/components/button/button.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,17 +205,17 @@
}
.fps-button:where(.fps-button-small) {
height: var(--space-6);
padding: var(--space-1) var(--space-2);
height: var(--spacer-4);
padding: var(--spacer-1) var(--spacer-2);
}
.fps-button:where(.fps-button-medium) {
height: var(--space-8);
padding: var(--space-2) var(--space-3);
height: var(--spacer-5);
padding: var(--spacer-2) var(--spacer-3);
}
.fps-button:where(.fps-variant-text) {
height: var(--text-body-large-strong-line-height);
padding: var(--space-2);
padding: var(--spacer-2);
}
</style>
16 changes: 8 additions & 8 deletions packages/ui/src/lib/components/checkbox/checkbox.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,9 @@
.fp-CheckboxRoot {
position: relative;
display: grid;
grid-template-columns: var(--space-4) auto;
grid-template-columns: var(--spacer-3) auto;
min-height: 24px;
gap: var(--space-1) var(--space-2);
gap: var(--spacer-1) var(--spacer-2);
cursor: pointer;
&:has(.fp-CheckboxHiddenInput:disabled) {
Expand All @@ -96,8 +96,8 @@
opacity: 0;
margin: 0;
// Create a larger touch target while keeping it invisible
width: var(--space-11); // 44px
height: var(--space-11); // 44px
width: var(--spacer-11); // 44px
height: var(--spacer-11); // 44px
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Expand Down Expand Up @@ -144,9 +144,9 @@
display: flex;
align-items: center;
justify-content: center;
width: var(--space-4);
height: var(--space-4);
margin: var(--space-1) 0;
width: var(--spacer-3);
height: var(--spacer-3);
margin: var(--spacer-1) 0;
background-color: var(--figma-color-bg);
border: 1px solid var(--figma-color-border-strong);
border-radius: var(--radius-medium);
Expand Down Expand Up @@ -187,7 +187,7 @@
}
.fp-CheckboxLabel {
margin-top: var(--space-1);
margin-top: var(--spacer-1);
cursor: inherit;
}
Expand Down
Loading

0 comments on commit ddc9edd

Please sign in to comment.