matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IconButton: add themes

Browse Source
This commit is contained in:
Alex Gleason
2022-08-12 10:42:26 -05:00
parent f338a761ef
commit 7615111eb0
3 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/soapbox/components/ui/icon-button/icon-button.tsx
View File

@ -12,12 +12,14 @@ interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
/** Text to display next ot the button. */
text?: string,
/** Don't render a background behind the icon. */
transparent?: boolean
transparent?: boolean,
/** Predefined styles to display for the button. */
theme?: 'seamless' | 'outlined',
}
/** A clickable icon. */
const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
const { src, className, iconClassName, text, transparent = false, ...filteredProps } = props;
const { src, className, iconClassName, text, transparent = false, theme = 'seamless', ...filteredProps } = props;
return (
<button
@ -25,6 +27,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
type='button'
className={classNames('flex items-center space-x-2 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0 focus:ring-primary-500', {
'bg-white dark:bg-transparent': !transparent,
'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500': theme === 'outlined',
'opacity-50': filteredProps.disabled,
}, className)}
{...filteredProps}