From dfcc612fbe1eb5cc09523506f68fcc5184070b89 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Tue, 13 Jul 2021 22:13:31 +0100
Subject: [PATCH] Restores radio group item to style panel, cleans up
 components

---
 components/shared.tsx                         |  4 +++
 components/style-panel/color-content.tsx      | 32 ++++++++++---------
 components/style-panel/quick-color-select.tsx |  9 ++++--
 components/style-panel/quick-dash-select.tsx  | 23 +++++++------
 components/style-panel/quick-size-select.tsx  | 22 +++++++------
 5 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/components/shared.tsx b/components/shared.tsx
index 3557c9f8d..d198df58c 100644
--- a/components/shared.tsx
+++ b/components/shared.tsx
@@ -216,6 +216,10 @@ export const Item = styled('button', {
   pointerEvents: 'all',
   cursor: 'pointer',
 
+  '&:focus': {
+    backgroundColor: '$hover',
+  },
+
   '&:hover:not(:disabled)': {
     backgroundColor: '$hover',
     '& svg': {
diff --git a/components/style-panel/color-content.tsx b/components/style-panel/color-content.tsx
index 2f64e1765..f75d971f2 100644
--- a/components/style-panel/color-content.tsx
+++ b/components/style-panel/color-content.tsx
@@ -8,29 +8,31 @@ import { memo } from 'react'
 import state from 'state'
 import useTheme from 'hooks/useTheme'
 
-function handleColorChange(
-  e: Event & { currentTarget: { value: ColorStyle } }
-): void {
-  state.send('CHANGED_STYLE', { color: e.currentTarget.value })
+function handleColorChange(color: ColorStyle): void {
+  state.send('CHANGED_STYLE', { color })
 }
 
-function ColorContent(): JSX.Element {
+function ColorContent({ color }: { color: ColorStyle }): JSX.Element {
   const { theme } = useTheme()
 
   return (
-    <DropdownContent sideOffset={8} side="bottom">
-      {Object.keys(strokes[theme]).map((color: ColorStyle) => (
-        <DropdownMenu.DropdownMenuItem
+    <DropdownMenu.DropdownMenuRadioGroup
+      value={color}
+      as={DropdownContent}
+      onValueChange={handleColorChange}
+      sideOffset={8}
+    >
+      {Object.keys(strokes[theme]).map((colorStyle: ColorStyle) => (
+        <DropdownMenu.DropdownMenuRadioItem
           as={IconButton}
-          key={color}
-          title={color}
-          value={color}
-          onSelect={handleColorChange}
+          key={colorStyle}
+          title={colorStyle}
+          value={colorStyle}
         >
-          <Square fill={strokes[theme][color]} stroke="none" size="22" />
-        </DropdownMenu.DropdownMenuItem>
+          <Square fill={strokes[theme][colorStyle]} stroke="none" size="22" />
+        </DropdownMenu.DropdownMenuRadioItem>
       ))}
-    </DropdownContent>
+    </DropdownMenu.DropdownMenuRadioGroup>
   )
 }
 
diff --git a/components/style-panel/quick-color-select.tsx b/components/style-panel/quick-color-select.tsx
index 015baa1d1..0196f8f8e 100644
--- a/components/style-panel/quick-color-select.tsx
+++ b/components/style-panel/quick-color-select.tsx
@@ -1,7 +1,7 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { breakpoints, IconButton } from 'components/shared'
 import Tooltip from 'components/tooltip'
-import { fills, strokes } from 'state/shape-styles'
+import { strokes } from 'state/shape-styles'
 import { useSelector } from 'state'
 import ColorContent from './color-content'
 import { BoxIcon } from '../shared'
@@ -15,10 +15,13 @@ export default function QuickColorSelect(): JSX.Element {
     <DropdownMenu.Root dir="ltr">
       <DropdownMenu.Trigger as={IconButton} bp={breakpoints}>
         <Tooltip label="Color">
-          <BoxIcon fill={fills[theme][color]} stroke={strokes[theme][color]} />
+          <BoxIcon
+            fill={strokes[theme][color]}
+            stroke={strokes[theme][color]}
+          />
         </Tooltip>
       </DropdownMenu.Trigger>
-      <ColorContent />
+      <ColorContent color={color} />
     </DropdownMenu.Root>
   )
 }
diff --git a/components/style-panel/quick-dash-select.tsx b/components/style-panel/quick-dash-select.tsx
index c008a5828..7a4e4983d 100644
--- a/components/style-panel/quick-dash-select.tsx
+++ b/components/style-panel/quick-dash-select.tsx
@@ -1,7 +1,7 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { breakpoints, IconButton } from 'components/shared'
 import Tooltip from 'components/tooltip'
-import { memo } from 'react'
+import React, { memo } from 'react'
 import state, { useSelector } from 'state'
 import { DashStyle } from 'types'
 import {
@@ -20,10 +20,8 @@ const dashes = {
   [DashStyle.Dotted]: <DashDottedIcon />,
 }
 
-function changeDashStyle(
-  e: Event & { currentTarget: { value: DashStyle } }
-): void {
-  state.send('CHANGED_STYLE', { dash: e.currentTarget.value })
+function changeDashStyle(dash: DashStyle): void {
+  state.send('CHANGED_STYLE', { dash })
 }
 
 function QuickdashSelect(): JSX.Element {
@@ -34,19 +32,24 @@ function QuickdashSelect(): JSX.Element {
       <DropdownMenu.Trigger as={IconButton} bp={breakpoints}>
         <Tooltip label="Dash">{dashes[dash]}</Tooltip>
       </DropdownMenu.Trigger>
-      <DropdownContent sideOffset={8} direction="vertical">
+      <DropdownMenu.DropdownMenuRadioGroup
+        as={DropdownContent}
+        sideOffset={8}
+        direction="vertical"
+        value={dash}
+        onValueChange={changeDashStyle}
+      >
         {Object.keys(DashStyle).map((dashStyle: DashStyle) => (
-          <DropdownMenu.DropdownMenuItem
+          <DropdownMenu.DropdownMenuRadioItem
             as={Item}
             key={dashStyle}
             isActive={dash === dashStyle}
-            onSelect={changeDashStyle}
             value={dashStyle}
           >
             {dashes[dashStyle]}
-          </DropdownMenu.DropdownMenuItem>
+          </DropdownMenu.DropdownMenuRadioItem>
         ))}
-      </DropdownContent>
+      </DropdownMenu.DropdownMenuRadioGroup>
     </DropdownMenu.Root>
   )
 }
diff --git a/components/style-panel/quick-size-select.tsx b/components/style-panel/quick-size-select.tsx
index f544a601d..5183bd524 100644
--- a/components/style-panel/quick-size-select.tsx
+++ b/components/style-panel/quick-size-select.tsx
@@ -13,10 +13,8 @@ const sizes = {
   [SizeStyle.Large]: 22,
 }
 
-function handleSizeChange(
-  e: Event & { currentTarget: { value: SizeStyle } }
-): void {
-  state.send('CHANGED_STYLE', { size: e.currentTarget.value })
+function changeSizeStyle(size: SizeStyle): void {
+  state.send('CHANGED_STYLE', { size })
 }
 
 function QuickSizeSelect(): JSX.Element {
@@ -29,19 +27,25 @@ function QuickSizeSelect(): JSX.Element {
           <Circle size={sizes[size]} stroke="none" fill="currentColor" />
         </Tooltip>
       </DropdownMenu.Trigger>
-      <DropdownContent sideOffset={8} direction="vertical">
+
+      <DropdownMenu.DropdownMenuRadioGroup
+        as={DropdownContent}
+        sideOffset={8}
+        direction="vertical"
+        value={size}
+        onValueChange={changeSizeStyle}
+      >
         {Object.keys(SizeStyle).map((sizeStyle: SizeStyle) => (
-          <DropdownMenu.DropdownMenuItem
+          <DropdownMenu.DropdownMenuRadioItem
             key={sizeStyle}
             as={Item}
             isActive={size === sizeStyle}
             value={sizeStyle}
-            onSelect={handleSizeChange}
           >
             <Circle size={sizes[sizeStyle]} />
-          </DropdownMenu.DropdownMenuItem>
+          </DropdownMenu.DropdownMenuRadioItem>
         ))}
-      </DropdownContent>
+      </DropdownMenu.DropdownMenuRadioGroup>
     </DropdownMenu.Root>
   )
 }