diff --git a/.changeset/serious-berries-lick.md b/.changeset/serious-berries-lick.md new file mode 100644 index 000000000..9df70a943 --- /dev/null +++ b/.changeset/serious-berries-lick.md @@ -0,0 +1,6 @@ +--- +'@codeimage/app': patch +'@codeimage/ui': patch +--- + +feat: add icon button diff --git a/apps/codeimage/src/components/Icons/DotVertical.tsx b/apps/codeimage/src/components/Icons/DotVertical.tsx index ebad1366e..53a2d1917 100644 --- a/apps/codeimage/src/components/Icons/DotVertical.tsx +++ b/apps/codeimage/src/components/Icons/DotVertical.tsx @@ -8,11 +8,11 @@ export function DotVerticalIcon(props: SvgIconProps) { ); } -export function DotHorizontalIocn(props: SvgIconProps) { +export function DotHorizontalIcon(props: SvgIconProps) { return ( - + - + ); } diff --git a/apps/codeimage/src/components/KeyboardShortcuts/KeyboardShortcuts.tsx b/apps/codeimage/src/components/KeyboardShortcuts/KeyboardShortcuts.tsx index ade9872f8..72ac79330 100644 --- a/apps/codeimage/src/components/KeyboardShortcuts/KeyboardShortcuts.tsx +++ b/apps/codeimage/src/components/KeyboardShortcuts/KeyboardShortcuts.tsx @@ -118,7 +118,6 @@ export function KeyboardShortcuts(): JSXElement { type={'button'} variant={'solid'} size={'xs'} - style={{height: '30px'}} onClick={() => setShow(true)} > diff --git a/apps/codeimage/src/components/Toolbar/SettingsDialog.tsx b/apps/codeimage/src/components/Toolbar/SettingsDialog.tsx index 7cef2c328..0a6e2816b 100644 --- a/apps/codeimage/src/components/Toolbar/SettingsDialog.tsx +++ b/apps/codeimage/src/components/Toolbar/SettingsDialog.tsx @@ -14,6 +14,7 @@ import { RadioBlock, RadioField, RadioGroupField, + sprinkles, SvgIcon, Text, themeVars, @@ -134,9 +135,9 @@ export function SettingsDialog(props: ParentProps<{onClose?: () => void}>) { justifyContent={'center'} > = props => { return ( - + + ); }; diff --git a/apps/codeimage/src/components/Toolbar/Toolbar.tsx b/apps/codeimage/src/components/Toolbar/Toolbar.tsx index 51f7f54b5..082ae00f8 100644 --- a/apps/codeimage/src/components/Toolbar/Toolbar.tsx +++ b/apps/codeimage/src/components/Toolbar/Toolbar.tsx @@ -8,6 +8,7 @@ import {sidebarLogo} from '../Scaffold/Sidebar/Sidebar.css'; import {UserBadge} from '../UserBadge/UserBadge'; import {ExportButton} from './ExportButton'; import {ExportInNewTabButton} from './ExportNewTabButton'; +import {ShareButton} from './ShareButton'; import * as styles from './Toolbar.css'; import {ToolbarSettingsButton} from './ToolbarSettings'; import {ToolbarSnippetName} from './ToolbarSnippetName'; @@ -16,15 +17,6 @@ export const Toolbar: Component<{ canvasRef: HTMLElement | undefined; }> = props => { const loggedIn = () => getAuth0State().loggedIn(); - // const loggedInAuth0 = async () => - // auth0.loginWithPopup().then((data: any) => console.log('test', data)); - // const logout = () => auth0.logout(); - // const user = async () => { - // const user = await auth0.getUser(); - // console.log('check in arrow', user); - // return user; - // }; - // console.log('user', user()); return (
@@ -53,6 +45,8 @@ export const Toolbar: Component<{ + + diff --git a/apps/codeimage/src/components/Toolbar/ToolbarSettings.tsx b/apps/codeimage/src/components/Toolbar/ToolbarSettings.tsx index aec3e4e22..dee5e083f 100644 --- a/apps/codeimage/src/components/Toolbar/ToolbarSettings.tsx +++ b/apps/codeimage/src/components/Toolbar/ToolbarSettings.tsx @@ -3,6 +3,7 @@ import { Button, createStandaloneDialog, DropdownMenuV2, + IconButton, MenuButton, } from '@codeimage/ui'; import {Item} from '@solid-aria/collection'; @@ -33,11 +34,10 @@ export function ToolbarSettingsButton() { onAction={item => onMenuAction(item)} menuButton={ diff --git a/apps/codeimage/src/pages/Dashboard/components/ProjectItem/ProjectItem.tsx b/apps/codeimage/src/pages/Dashboard/components/ProjectItem/ProjectItem.tsx index 82cf6744e..2a547260d 100644 --- a/apps/codeimage/src/pages/Dashboard/components/ProjectItem/ProjectItem.tsx +++ b/apps/codeimage/src/pages/Dashboard/components/ProjectItem/ProjectItem.tsx @@ -4,10 +4,10 @@ import {useI18n} from '@codeimage/locale'; import {uiStore} from '@codeimage/store/ui'; import { Box, - Button, createStandaloneDialog, DropdownMenuV2, HStack, + IconButton, MenuButton, Text, } from '@codeimage/ui'; @@ -18,7 +18,7 @@ import {ConfirmDialog} from '@ui/ConfirmDialog/ConfirmDialog'; import {RenameContentDialog} from '@ui/ConfirmDialog/RenameContentDialog'; import {Link} from 'solid-app-router'; import {For, Show, VoidProps} from 'solid-js'; -import {DotHorizontalIocn} from '../../../../components/Icons/DotVertical'; +import {DotHorizontalIcon} from '../../../../components/Icons/DotVertical'; import {AppLocaleEntries} from '../../../../i18n'; import {getDashboardState} from '../../dashboard.state'; import * as styles from './ProjectItem.css'; @@ -70,13 +70,12 @@ export function ProjectItem(props: VoidProps) { - + } onAction={(action: string | number) => { diff --git a/packages/ui/src/lib/primitives/Button/Button.css.ts b/packages/ui/src/lib/primitives/Button/Button.css.ts index aeef0ce14..8cad8e533 100644 --- a/packages/ui/src/lib/primitives/Button/Button.css.ts +++ b/packages/ui/src/lib/primitives/Button/Button.css.ts @@ -1,14 +1,16 @@ -import {style} from '@vanilla-extract/css'; +import {createVar, style} from '@vanilla-extract/css'; import {backgroundColorVar, colorVar} from '../../theme/variables.css'; import {recipe, RecipeVariants} from '@vanilla-extract/recipes'; import {themeVars} from '../../theme'; +export const buttonHeight = createVar(); + export const button = style([ { position: 'relative', display: 'inline-flex', overflow: 'hidden', - height: '36px', + height: buttonHeight, padding: `0 ${themeVars.spacing['3']}`, borderRadius: themeVars.borderRadius.lg, fontSize: themeVars.fontSize.sm, @@ -155,16 +157,29 @@ export const buttonVariant = recipe({ size: { md: { - height: '42px', + vars: { + [buttonHeight]: '42px', + }, minWidth: '72px', fontSize: themeVars.fontSize.base, }, sm: { - height: '36px', + vars: { + [buttonHeight]: '36px', + }, fontSize: themeVars.fontSize.sm, }, xs: { - height: '24px', + vars: { + [buttonHeight]: '30px', + }, + fontSize: themeVars.fontSize.xs, + padding: `0 ${themeVars.spacing['2']}`, + }, + xxs: { + vars: { + [buttonHeight]: '24px', + }, fontSize: themeVars.fontSize.xs, padding: `0 ${themeVars.spacing['2']}`, }, @@ -173,6 +188,7 @@ export const buttonVariant = recipe({ defaultVariants: { variant: 'outline', theme: 'primary', + size: 'md', }, }); diff --git a/packages/ui/src/lib/primitives/Button/Button.tsx b/packages/ui/src/lib/primitives/Button/Button.tsx index fd0d856aa..b0d2a9d23 100644 --- a/packages/ui/src/lib/primitives/Button/Button.tsx +++ b/packages/ui/src/lib/primitives/Button/Button.tsx @@ -9,14 +9,15 @@ import {CustomComponentProps} from '../../utils'; import {LoadingCircle} from '../Loader'; import * as styles from './Button.css'; -type ButtonProps = CustomComponentProps< - T, - { - leftIcon?: JSXElement; - loading?: boolean; - } & ShButtonProps & - styles.ButtonVariants ->; +export type ButtonProps = + CustomComponentProps< + T, + { + leftIcon?: JSXElement; + loading?: boolean; + } & ShButtonProps & + styles.ButtonVariants + >; export function Button( props: ParentProps>, diff --git a/packages/ui/src/lib/primitives/IconButton/IconButton.css.ts b/packages/ui/src/lib/primitives/IconButton/IconButton.css.ts new file mode 100644 index 000000000..96e736231 --- /dev/null +++ b/packages/ui/src/lib/primitives/IconButton/IconButton.css.ts @@ -0,0 +1,10 @@ +import {style} from '@vanilla-extract/css'; +import {buttonHeight as btnSize} from '../Button/Button.css'; + +export const iconButton = style({ + width: btnSize, + height: btnSize, + padding: 0, + textAlign: 'center', + minWidth: 'auto', +}); diff --git a/packages/ui/src/lib/primitives/IconButton/IconButton.tsx b/packages/ui/src/lib/primitives/IconButton/IconButton.tsx new file mode 100644 index 000000000..c971a3399 --- /dev/null +++ b/packages/ui/src/lib/primitives/IconButton/IconButton.tsx @@ -0,0 +1,14 @@ +import clsx from 'clsx'; +import {omitProps} from 'solid-use'; +import {Button, ButtonProps} from '../Button/Button'; +import * as styles from './IconButton.css'; + +export function IconButton(props: ButtonProps) { + const classes = () => clsx(styles.iconButton, props.class); + + return ( + + ); +} diff --git a/packages/ui/src/lib/primitives/IconButton/index.tsx b/packages/ui/src/lib/primitives/IconButton/index.tsx new file mode 100644 index 000000000..1a85f0f72 --- /dev/null +++ b/packages/ui/src/lib/primitives/IconButton/index.tsx @@ -0,0 +1 @@ +export * from './IconButton'; diff --git a/packages/ui/src/lib/primitives/index.ts b/packages/ui/src/lib/primitives/index.ts index 0311b9ef2..82585e0c9 100644 --- a/packages/ui/src/lib/primitives/index.ts +++ b/packages/ui/src/lib/primitives/index.ts @@ -1,4 +1,5 @@ export {Button, buttonStyles} from './Button'; +export {IconButton} from './IconButton'; export { Text,