fix(radio): remove 'menu' variant

BREAKING CHANGE: remove 'menu' variant of Radio component
react95-io · Nov 10, 2022 · c76f191 · c76f191
1 parent 17eec67
commit c76f191
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 109 deletions.
diff --git a/src/Radio/Radio.stories.tsx b/src/Radio/Radio.stories.tsx
@@ -1,15 +1,6 @@
 import { ComponentMeta } from '@storybook/react';
 import React, { useState } from 'react';
-import {
-  GroupBox,
-  MenuList,
-  MenuListItem,
-  Radio,
-  ScrollView,
-  Separator,
-  Window,
-  WindowContent
-} from 'react95';
+import { GroupBox, Radio, ScrollView, Window, WindowContent } from 'react95';
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
@@ -25,6 +16,7 @@ const Wrapper = styled.div`
     }
   }
 `;
+
 export default {
   title: 'Controls/Radio',
   component: Radio,
@@ -143,67 +135,3 @@ export function Flat() {
 Flat.story = {
   name: 'flat'
 };
-
-export function Menu() {
-  const [state, setState] = useState({
-    tool: 'Brush',
-    color: 'Black'
-  });
-  const handleToolChange = (e: React.ChangeEvent<HTMLInputElement>) =>
-    setState({ ...state, tool: e.target.value });
-  const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) =>
-    setState({ ...state, color: e.target.value });
-
-  const { tool, color } = state;
-
-  return (
-    <MenuList>
-      <MenuListItem size='sm'>
-        <Radio
-          variant='menu'
-          checked={tool === 'Brush'}
-          onChange={handleToolChange}
-          value='Brush'
-          label='Brush'
-          name='tool'
-        />
-      </MenuListItem>
-      <MenuListItem size='sm'>
-        <Radio
-          variant='menu'
-          checked={tool === 'Pencil'}
-          onChange={handleToolChange}
-          value='Pencil'
-          label='Pencil'
-          name='tool'
-        />
-      </MenuListItem>
-      <Separator />
-      <MenuListItem size='sm' disabled>
-        <Radio
-          disabled
-          variant='menu'
-          checked={color === 'Black'}
-          onChange={handleColorChange}
-          value='Black'
-          label='Black'
-          name='color'
-        />
-      </MenuListItem>
-      <MenuListItem size='sm' disabled>
-        <Radio
-          disabled
-          variant='menu'
-          checked={color === 'Red'}
-          onChange={handleColorChange}
-          value='Red'
-          label='Red'
-          name='color'
-        />
-      </MenuListItem>
-    </MenuList>
-  );
-}
-Menu.story = {
-  name: 'menu'
-};
diff --git a/src/Radio/Radio.tsx b/src/Radio/Radio.tsx
@@ -8,11 +8,10 @@ import {
   StyledInput,
   StyledLabel
 } from '../common/SwitchBase';
-import { StyledMenuListItem } from '../MenuList/MenuList';
 import { StyledScrollView } from '../ScrollView/ScrollView';
 import { CommonStyledProps } from '../types';
 
-type RadioVariant = 'default' | 'flat' | 'menu';
+type RadioVariant = 'default' | 'flat';
 
 type RadioProps = {
   checked?: boolean;
@@ -78,15 +77,6 @@ const StyledFlatCheckbox = styled.div<StyledCheckboxProps>`
     border-radius: 50%;
   }
 `;
-const StyledMenuCheckbox = styled.div`
-  ${sharedCheckboxStyles}
-  position: relative;
-  display: inline-block;
-  box-sizing: border-box;
-  border: none;
-  outline: none;
-  background: none;
-`;
 
 type IconProps = {
   'data-testid': 'checkmarkIcon';
@@ -106,34 +96,13 @@ const Icon = styled.span.attrs(() => ({
   height: 6px;
   transform: translate(-50%, -50%);
   border-radius: 50%;
-  ${({ $disabled, theme, variant }) =>
-    variant === 'menu'
-      ? css`
-          background: ${$disabled
-            ? theme.materialTextDisabled
-            : theme.materialText};
-          filter: drop-shadow(
-            1px 1px 0px
-              ${$disabled ? theme.materialTextDisabledShadow : 'transparent'}
-          );
-        `
-      : css`
-          background: ${$disabled ? theme.checkmarkDisabled : theme.checkmark};
-        `}
-  ${StyledMenuListItem}:hover & {
-    ${({ $disabled, theme, variant }) =>
-      !$disabled &&
-      variant === 'menu' &&
-      css`
-        background: ${theme.materialTextInvert};
-      `};
-  }
+  background: ${p =>
+    p.$disabled ? p.theme.checkmarkDisabled : p.theme.checkmark};
 `;
 
 const CheckboxComponents = {
   flat: StyledFlatCheckbox,
-  default: StyledCheckbox,
-  menu: StyledMenuCheckbox
+  default: StyledCheckbox
 };
 
 const Radio = forwardRef<HTMLInputElement, RadioProps>(