Abdullah.
569d887d1e
Renaming the package so any further PRs directed to the website are targeted to the reworked code instead of diverging. Once merged, I will start preparing this for deployment to dev to test before releasing to prod. Any improvements will also be applied to this package. I avoided making significant changes to API routes so nothing breaks, but will test it thoroughly today to confirm. That said, everything is ported - double checked. Big diff PR, impossible to review, but last one! No more rebuilds.
70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
import { css } from '@linaria/core';
|
|
import { type CSSProperties, type ReactNode } from 'react';
|
|
|
|
import { color, radius, semanticColor } from '@/tokens';
|
|
|
|
const iconButtonClassName = css`
|
|
align-items: center;
|
|
background: none;
|
|
border: 1px solid ${semanticColor.lineStrong};
|
|
border-radius: ${radius(2)};
|
|
color: ${semanticColor.ink};
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
height: var(--icon-button-size, 40px);
|
|
justify-content: center;
|
|
width: var(--icon-button-size, 40px);
|
|
|
|
/* The disabled glyph rides the scheme's strong line tone (its 20% value):
|
|
identical black-20 on light surfaces, the matching white-20 on dark ones,
|
|
so a disabled arrow stays faintly legible on a dark panel instead of
|
|
vanishing into it. */
|
|
&:disabled {
|
|
border-color: ${semanticColor.line};
|
|
color: ${semanticColor.lineStrong};
|
|
cursor: default;
|
|
}
|
|
|
|
&:disabled:hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: ${color('black-5')};
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 1px solid ${color('blue')};
|
|
outline-offset: 1px;
|
|
}
|
|
`;
|
|
|
|
export type IconButtonProps = {
|
|
ariaLabel: string;
|
|
children: ReactNode;
|
|
disabled?: boolean;
|
|
sizePx?: number;
|
|
onClick?: () => void;
|
|
};
|
|
|
|
export function IconButton({
|
|
ariaLabel,
|
|
children,
|
|
disabled = false,
|
|
sizePx = 40,
|
|
onClick,
|
|
}: IconButtonProps) {
|
|
return (
|
|
<button
|
|
aria-label={ariaLabel}
|
|
className={iconButtonClassName}
|
|
disabled={disabled}
|
|
onClick={onClick}
|
|
style={{ '--icon-button-size': `${sizePx}px` } as CSSProperties}
|
|
type="button"
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|