Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c76f191

Browse files
fix(radio): remove 'menu' variant
BREAKING CHANGE: remove 'menu' variant of Radio component
1 parent 17eec67 commit c76f191

File tree

2 files changed

+6
-109
lines changed

2 files changed

+6
-109
lines changed

‎src/Radio/Radio.stories.tsx‎

Lines changed: 2 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,6 @@
11
import { ComponentMeta } from '@storybook/react';
22
import React, { useState } from 'react';
3-
import {
4-
GroupBox,
5-
MenuList,
6-
MenuListItem,
7-
Radio,
8-
ScrollView,
9-
Separator,
10-
Window,
11-
WindowContent
12-
} from 'react95';
3+
import { GroupBox, Radio, ScrollView, Window, WindowContent } from 'react95';
134
import styled from 'styled-components';
145

156
const Wrapper = styled.div`
@@ -25,6 +16,7 @@ const Wrapper = styled.div`
2516
}
2617
}
2718
`;
19+
2820
export default {
2921
title: 'Controls/Radio',
3022
component: Radio,
@@ -143,67 +135,3 @@ export function Flat() {
143135
Flat.story = {
144136
name: 'flat'
145137
};
146-
147-
export function Menu() {
148-
const [state, setState] = useState({
149-
tool: 'Brush',
150-
color: 'Black'
151-
});
152-
const handleToolChange = (e: React.ChangeEvent<HTMLInputElement>) =>
153-
setState({ ...state, tool: e.target.value });
154-
const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) =>
155-
setState({ ...state, color: e.target.value });
156-
157-
const { tool, color } = state;
158-
159-
return (
160-
<MenuList>
161-
<MenuListItem size='sm'>
162-
<Radio
163-
variant='menu'
164-
checked={tool === 'Brush'}
165-
onChange={handleToolChange}
166-
value='Brush'
167-
label='Brush'
168-
name='tool'
169-
/>
170-
</MenuListItem>
171-
<MenuListItem size='sm'>
172-
<Radio
173-
variant='menu'
174-
checked={tool === 'Pencil'}
175-
onChange={handleToolChange}
176-
value='Pencil'
177-
label='Pencil'
178-
name='tool'
179-
/>
180-
</MenuListItem>
181-
<Separator />
182-
<MenuListItem size='sm' disabled>
183-
<Radio
184-
disabled
185-
variant='menu'
186-
checked={color === 'Black'}
187-
onChange={handleColorChange}
188-
value='Black'
189-
label='Black'
190-
name='color'
191-
/>
192-
</MenuListItem>
193-
<MenuListItem size='sm' disabled>
194-
<Radio
195-
disabled
196-
variant='menu'
197-
checked={color === 'Red'}
198-
onChange={handleColorChange}
199-
value='Red'
200-
label='Red'
201-
name='color'
202-
/>
203-
</MenuListItem>
204-
</MenuList>
205-
);
206-
}
207-
Menu.story = {
208-
name: 'menu'
209-
};

‎src/Radio/Radio.tsx‎

Lines changed: 4 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,10 @@ import {
88
StyledInput,
99
StyledLabel
1010
} from '../common/SwitchBase';
11-
import { StyledMenuListItem } from '../MenuList/MenuList';
1211
import { StyledScrollView } from '../ScrollView/ScrollView';
1312
import { CommonStyledProps } from '../types';
1413

15-
type RadioVariant = 'default' | 'flat'|'menu';
14+
type RadioVariant = 'default' | 'flat';
1615

1716
type RadioProps = {
1817
checked?: boolean;
@@ -78,15 +77,6 @@ const StyledFlatCheckbox = styled.div<StyledCheckboxProps>`
7877
border-radius: 50%;
7978
}
8079
`;
81-
const StyledMenuCheckbox = styled.div`
82-
${sharedCheckboxStyles}
83-
position: relative;
84-
display: inline-block;
85-
box-sizing: border-box;
86-
border: none;
87-
outline: none;
88-
background: none;
89-
`;
9080

9181
type IconProps = {
9282
'data-testid': 'checkmarkIcon';
@@ -106,34 +96,13 @@ const Icon = styled.span.attrs(() => ({
10696
height: 6px;
10797
transform: translate(-50%, -50%);
10898
border-radius: 50%;
109-
${({ $disabled, theme, variant }) =>
110-
variant === 'menu'
111-
? css`
112-
background: ${$disabled
113-
? theme.materialTextDisabled
114-
: theme.materialText};
115-
filter: drop-shadow(
116-
1px 1px 0px
117-
${$disabled ? theme.materialTextDisabledShadow : 'transparent'}
118-
);
119-
`
120-
: css`
121-
background: ${$disabled ? theme.checkmarkDisabled : theme.checkmark};
122-
`}
123-
${StyledMenuListItem}:hover & {
124-
${({ $disabled, theme, variant }) =>
125-
!$disabled &&
126-
variant === 'menu' &&
127-
css`
128-
background: ${theme.materialTextInvert};
129-
`};
130-
}
99+
background: ${p =>
100+
p.$disabled ? p.theme.checkmarkDisabled : p.theme.checkmark};
131101
`;
132102

133103
const CheckboxComponents = {
134104
flat: StyledFlatCheckbox,
135-
default: StyledCheckbox,
136-
menu: StyledMenuCheckbox
105+
default: StyledCheckbox
137106
};
138107

139108
const Radio = forwardRef<HTMLInputElement, RadioProps>(

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /