vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

add compact sizing variants to ActionIcon

Browse Source
This commit is contained in:
jeffvli
2026-01-18 17:24:31 -08:00
parent 45df497ee6
commit 4d0b0d0c8d
2 changed files with 38 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/action-icon/action-icon.module.css
+24
View File
@@ -4,6 +4,9 @@
--ai-size-md: calc(2.625rem * var(--mantine-scale));
--ai-size-lg: calc(3.125rem * var(--mantine-scale));
--ai-size-xl: calc(3.75rem * var(--mantine-scale));
--ai-size-compact-xs: calc(1.5rem * var(--mantine-scale));
--ai-size-compact-sm: calc(1.75rem * var(--mantine-scale));
--ai-size-compact-md: calc(2rem * var(--mantine-scale));
font-weight: 500;
transition:
@@ -110,4 +113,25 @@
border: 1px solid lighten(var(--theme-colors-border), 10%);
}
}
&[data-size='compact-xs'] {
width: var(--ai-size-compact-xs);
min-width: var(--ai-size-compact-xs);
height: var(--ai-size-compact-xs);
min-height: var(--ai-size-compact-xs);
}
&[data-size='compact-sm'] {
width: var(--ai-size-compact-sm);
min-width: var(--ai-size-compact-sm);
height: var(--ai-size-compact-sm);
min-height: var(--ai-size-compact-sm);
}
&[data-size='compact-md'] {
width: var(--ai-size-compact-md);
min-width: var(--ai-size-compact-md);
height: var(--ai-size-compact-md);
min-height: var(--ai-size-compact-md);
}
}
src/shared/components/action-icon/action-icon.tsx
+14 -2
View File
@@ -11,6 +11,13 @@ import { AppIcon, Icon, IconProps } from '/@/shared/components/icon/icon';
import { Tooltip, TooltipProps } from '/@/shared/components/tooltip/tooltip';
import { createPolymorphicComponent } from '/@/shared/utils/create-polymorphic-component';
const COMPACT_SIZES = ['compact-xs', 'compact-sm', 'compact-md'] as const;
type CompactSize = (typeof COMPACT_SIZES)[number];
const isCompactSize = (size: string | undefined): size is CompactSize => {
return COMPACT_SIZES.includes(size as CompactSize);
};
export interface ActionIconProps
extends ElementProps<'button', keyof MantineActionIconProps>,
MantineActionIconProps {
@@ -49,12 +56,17 @@ const _ActionIcon = forwardRef<HTMLButtonElement, ActionIconProps>(
[classNames],
);
const actionIconProps: ActionIconProps = {
// For compact sizes, we need to ensure Mantine recognizes them
// by using a valid size and applying custom styles via CSS
const mantineSize = isCompactSize(size) ? 'sm' : size;
const actionIconProps: ActionIconProps & { 'data-size'?: string } = {
classNames: memoizedClassNames,
size,
size: mantineSize,
variant,
...props,
onClick: handleClick,
...(isCompactSize(size) && { 'data-size': size }),
};
if (tooltip && icon) {