feat(ui): add icon button (#335)

* feat(ui): add icon button * docs(changeset): feat: add icon button * fix(ui): show share button on editor
riccardoperra · Sep 4, 2022 · f20624f · f20624f
1 parent fe67654
commit f20624f
Show file tree

Hide file tree

Showing 14 changed files with 103 additions and 49 deletions.
diff --git a/.changeset/serious-berries-lick.md 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
@@ -8,11 +8,11 @@ export function DotVerticalIcon(props: SvgIconProps) {
   );
 }
 
-export function DotHorizontalIocn(props: SvgIconProps) {
+export function DotHorizontalIcon(props: SvgIconProps) {
   return (
-    <svg viewBox="0 0 20 20" fill="currentColor" {...props}>
+    <SvgIcon viewBox="0 0 20 20" fill="currentColor" {...props}>
       <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
-    </svg>
+    </SvgIcon>
   );
 }
 

diff --git 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)}
         >
           <HStack spacing={'2'}>

diff --git 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'}
                   >
                     <img
-                      style={{
-                        'border-radius': '50%',
-                      }}
+                      class={sprinkles({
+                        borderRadius: 'full',
+                      })}
                       width={72}
                       height={72}
                       src={user()?.picture}

diff --git a/apps/codeimage/src/components/Toolbar/ShareButton.tsx b/apps/codeimage/src/components/Toolbar/ShareButton.tsx
@@ -1,5 +1,5 @@
 import {useI18n} from '@codeimage/locale';
-import {Box, Button, SvgIcon} from '@codeimage/ui';
+import {Button, IconButton, SvgIcon} from '@codeimage/ui';
 import {Component, createMemo, mergeProps, onMount, Show} from 'solid-js';
 import {useWebshare} from '../../core/hooks/use-webshare';
 import {useHotkey} from '../../hooks/use-hotkey';
@@ -44,18 +44,30 @@ export const ShareButton: Component<ShareButtonProps> = props => {
 
   return (
     <Show when={canShare()}>
-      <Button
-        aria-label={t('toolbar.share')}
-        variant={'solid'}
-        theme={'secondary'}
-        onClick={onShare}
-        style={{height: '30px', width: 'auto'}}
+      <Show
+        fallback={() => (
+          <IconButton variant={'solid'} theme={'secondary'} onClick={onShare}>
+            <SvgIcon viewBox="0 0 20 20" fill="currentColor" size={'sm'}>
+              <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" />
+            </SvgIcon>
+          </IconButton>
+        )}
+        when={props.showLabel}
       >
-        <SvgIcon viewBox="0 0 20 20" fill="currentColor" size={'xs'}>
-          <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" />
-        </SvgIcon>
-        <Box marginLeft={2}>{t('toolbar.share')}</Box>
-      </Button>
+        <Button
+          aria-label={t('toolbar.share')}
+          variant={'solid'}
+          theme={'secondary'}
+          onClick={onShare}
+          leftIcon={() => (
+            <SvgIcon viewBox="0 0 20 20" fill="currentColor">
+              <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" />
+            </SvgIcon>
+          )}
+        >
+          {t('toolbar.share')}
+        </Button>
+      </Show>
     </Show>
   );
 };
diff --git 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 (
     <div class={styles.wrapper}>
       <ToolbarSettingsButton />
@@ -53,6 +45,8 @@ export const Toolbar: Component<{
 
       <Box class={styles.actionBox} style={{flex: 1}}>
         <HStack marginLeft={'auto'} spacing={'2'}>
+          <ShareButton showLabel={false} />
+
           <ExportInNewTabButton canvasRef={props.canvasRef} />
 
           <ExportButton canvasRef={props.canvasRef} />

diff --git 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={
         <MenuButton
-          as={Button}
+          as={IconButton}
           pill={true}
-          style={{width: '30px', height: '30px'}}
-          variant={'solid'}
           size={'xs'}
+          variant={'solid'}
           theme={'secondary'}
         >
           <MenuAlt2Icon size={'sm'} />

diff --git 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<ProjectItemProps>) {
           <DropdownMenuV2
             menuButton={
               <MenuButton
-                as={Button}
+                as={IconButton}
                 variant={'solid'}
                 theme={'secondary'}
                 size={'xs'}
-                style={{width: '30px', height: '30px'}}
               >
-                <DotHorizontalIocn size={'sm'} />
+                <DotHorizontalIcon size={'sm'} />
               </MenuButton>
             }
             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
@@ -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
@@ -9,14 +9,15 @@ import {CustomComponentProps} from '../../utils';
 import {LoadingCircle} from '../Loader';
 import * as styles from './Button.css';
 
-type ButtonProps<T extends ValidConstructor = 'button'> = CustomComponentProps<
-  T,
-  {
-    leftIcon?: JSXElement;
-    loading?: boolean;
-  } & ShButtonProps<T> &
-    styles.ButtonVariants
->;
+export type ButtonProps<T extends ValidConstructor = 'button'> =
+  CustomComponentProps<
+    T,
+    {
+      leftIcon?: JSXElement;
+      loading?: boolean;
+    } & ShButtonProps<T> &
+      styles.ButtonVariants
+  >;
 
 export function Button<T extends ValidConstructor = 'button'>(
   props: ParentProps<ButtonProps<T>>,

diff --git a/packages/ui/src/lib/primitives/IconButton/IconButton.css.ts 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
@@ -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 (
+    <Button {...omitProps(props, ['class', 'children'])} class={classes()}>
+      {props.children}
+    </Button>
+  );
+}
diff --git a/packages/ui/src/lib/primitives/IconButton/index.tsx 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
@@ -1,4 +1,5 @@
 export {Button, buttonStyles} from './Button';
+export {IconButton} from './IconButton';
 
 export {
   Text,