Add support for left and right button accessories

components/Button/index.tsx

@@ -8,7 +8,10 @@ interface Props
     React.ButtonHTMLAttributes<HTMLButtonElement>,
     HTMLButtonElement
   > {
-  accessoryIcon?: React.ReactNode
+  leftAccessoryIcon?: React.ReactNode
+  leftAccessoryClassName?: string
+  rightAccessoryIcon?: React.ReactNode
+  rightAccessoryClassName?: string
   active?: boolean
   blended?: boolean
   contained?: boolean
@@ -24,7 +27,18 @@ const defaultProps = {
 }
 
 const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
-  { accessoryIcon, active, blended, contained, buttonSize, text, ...props },
+  {
+    leftAccessoryIcon,
+    leftAccessoryClassName,
+    rightAccessoryIcon,
+    rightAccessoryClassName,
+    active,
+    blended,
+    contained,
+    buttonSize,
+    text,
+    ...props
+  },
   forwardedRef
 ) {
   const classes = classNames(
@@ -38,8 +52,24 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
     props.className
   )
 
-  const hasAccessory = () => {
+  const leftAccessoryClasses = classNames(leftAccessoryClassName, {
-    if (accessoryIcon) return <span className="Accessory">{accessoryIcon}</span>
+    Accessory: true,
+    Left: true,
+  })
+
+  const rightAccessoryClasses = classNames(rightAccessoryClassName, {
+    Accessory: true,
+    Right: true,
+  })
+
+  const hasLeftAccessory = () => {
+    if (leftAccessoryIcon)
+      return <span className={leftAccessoryClasses}>{leftAccessoryIcon}</span>
+  }
+
+  const hasRightAccessory = () => {
+    if (rightAccessoryIcon)
+      return <span className={rightAccessoryClasses}>{rightAccessoryIcon}</span>
   }
 
   const hasText = () => {
@@ -48,8 +78,9 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(function button(
 
   return (
     <button {...props} className={classes} ref={forwardedRef}>
-      {hasAccessory()}
+      {hasLeftAccessory()}
       {hasText()}
+      {hasRightAccessory()}
     </button>
   )
 })

components/CharacterUnit/index.tsx

@@ -218,7 +218,7 @@ const CharacterUnit = ({
           <ContextMenu onOpenChange={handleContextMenuOpenChange}>
             <ContextMenuTrigger asChild>
               <Button
-                accessoryIcon={<SettingsIcon />}
+                leftAccessoryIcon={<SettingsIcon />}
                 className={buttonClasses}
                 onClick={handleButtonClicked}
               />

components/GridRep/index.tsx

@@ -208,7 +208,7 @@ const GridRep = (props: Props) => {
             <a href="#">
               <Button
                 className="Save"
-                accessoryIcon={<SaveIcon className="stroke" />}
+                leftAccessoryIcon={<SaveIcon className="stroke" />}
                 active={props.favorited}
                 contained={true}
                 buttonSize="small"

components/JobImage/index.tsx

@@ -76,7 +76,7 @@ const JobImage = ({
 
     return (
       <Button
-        accessoryIcon={icon}
+        leftAccessoryIcon={icon}
         className={classes}
         onClick={handleAccessoryButtonClicked}
         ref={buttonRef}

components/PartyDetails/index.tsx

@@ -538,7 +538,7 @@ const PartyDetails = (props: Props) => {
         <div className="left">
           {router.pathname !== '/new' ? (
             <Button
-              accessoryIcon={<CrossIcon />}
+              leftAccessoryIcon={<CrossIcon />}
               className="Blended medium destructive"
               onClick={handleClick}
               text={t('buttons.delete')}
@@ -550,7 +550,7 @@ const PartyDetails = (props: Props) => {
         <div className="right">
           <Button text={t('buttons.cancel')} onClick={toggleDetails} />
           <Button
-            accessoryIcon={<CheckIcon className="Check" />}
+            leftAccessoryIcon={<CheckIcon className="Check" />}
             text={t('buttons.save_info')}
             onClick={updateDetails}
           />
@@ -643,7 +643,7 @@ const PartyDetails = (props: Props) => {
         <div className="Right">
           {party.editable ? (
             <Button
-              accessoryIcon={<EditIcon />}
+              leftAccessoryIcon={<EditIcon />}
               text={t('buttons.show_info')}
               onClick={toggleDetails}
             />

components/SummonUnit/index.tsx

@@ -172,7 +172,7 @@ const SummonUnit = ({
           <ContextMenu onOpenChange={handleContextMenuOpenChange}>
             <ContextMenuTrigger asChild>
               <Button
-                accessoryIcon={<SettingsIcon />}
+                leftAccessoryIcon={<SettingsIcon />}
                 className={buttonClasses}
                 onClick={handleButtonClicked}
               />

components/WeaponUnit/index.tsx

@@ -450,7 +450,7 @@ const WeaponUnit = ({
           <ContextMenu onOpenChange={handleContextMenuOpenChange}>
             <ContextMenuTrigger asChild>
               <Button
-                accessoryIcon={<SettingsIcon />}
+                leftAccessoryIcon={<SettingsIcon />}
                 className={buttonClasses}
                 onClick={handleButtonClicked}
               />