Skip to content

Commit

Permalink
fix(checkbox): remove 'menu' variant
Browse files Browse the repository at this point in the history
Remove 'menu' variant, as this should be a part of MenuList component

BREAKING CHANGE: Removal of 'menu' Checkbox variant
  • Loading branch information
arturbien committed Nov 10, 2022
1 parent 06cba7c commit 17eec67
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 116 deletions.
50 changes: 1 addition & 49 deletions src/Checkbox/Checkbox.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,7 @@ import React, { useState } from 'react';
import styled from 'styled-components';

import { ComponentMeta } from '@storybook/react';
import {
Checkbox,
GroupBox,
MenuList,
MenuListItem,
ScrollView,
Separator
} from 'react95';
import { Checkbox, GroupBox, ScrollView } from 'react95';

const Wrapper = styled.div`
background: ${({ theme }) => theme.material};
Expand Down Expand Up @@ -237,44 +230,3 @@ export function Flat() {
Flat.story = {
name: 'flat'
};

export function Menu() {
return (
<MenuList>
<MenuListItem size='md'>
<Checkbox
name='useGradient'
variant='menu'
value='useGradient'
label='Use gradient'
defaultChecked
/>
</MenuListItem>
<MenuListItem size='md'>
<Checkbox
name='thickBrush'
variant='menu'
defaultChecked={false}
value='thickBrush'
label='Thick brush'
indeterminate
/>
</MenuListItem>
<Separator />
<MenuListItem size='md' disabled>
<Checkbox
name='autoSave'
variant='menu'
value='autoSave'
checked
label='Auto-save'
disabled
/>
</MenuListItem>
</MenuList>
);
}

Menu.story = {
name: 'menu'
};
75 changes: 8 additions & 67 deletions src/Checkbox/Checkbox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
StyledLabel
} from '../common/SwitchBase';
import { noOp } from '../common/utils';
import { StyledMenuListItem } from '../MenuList/MenuList';
import { StyledScrollView } from '../ScrollView/ScrollView';
import { CommonThemeProps } from '../types';

Expand All @@ -25,7 +24,7 @@ type CheckboxProps = {
onChange?: React.ChangeEventHandler<HTMLInputElement>;
style?: React.CSSProperties;
value?: number | string;
variant?: 'default' | 'flat' | 'menu';
variant?: 'default' | 'flat';
} & Omit<
React.InputHTMLAttributes<HTMLInputElement>,
| 'checked'
Expand All @@ -41,7 +40,7 @@ type CheckboxProps = {

type CheckmarkProps = {
$disabled: boolean;
variant: 'default' | 'flat' | 'menu';
variant: 'default' | 'flat';
};

const sharedCheckboxStyles = css`
Expand Down Expand Up @@ -77,20 +76,6 @@ const StyledFlatCheckbox = styled.div<CommonThemeProps>`
$disabled ? theme.flatLight : theme.canvas};
`;

const StyledMenuCheckbox = styled.div<CommonThemeProps>`
position: relative;
box-sizing: border-box;
display: inline-block;
background: ${({ $disabled, theme }) =>
$disabled ? theme.flatLight : theme.canvas};
${sharedCheckboxStyles}
width: ${size - 4}px;
height: ${size - 4}px;
background: none;
border: none;
outline: none;
`;

const CheckmarkIcon = styled.span.attrs(() => ({
'data-testid': 'checkmarkIcon'
}))<CheckmarkProps>`
Expand All @@ -113,30 +98,8 @@ const CheckmarkIcon = styled.span.attrs(() => ({
border-width: 0 3px 3px 0;
transform: translate(-50%, -50%) rotate(45deg);
${({ $disabled, theme, variant }) =>
variant === 'menu'
? css`
border-color: ${$disabled
? theme.materialTextDisabled
: theme.materialText};
filter: drop-shadow(
1px 1px 0px
${$disabled ? theme.materialTextDisabledShadow : 'transparent'}
);
`
: css`
border-color: ${$disabled
? theme.checkmarkDisabled
: theme.checkmark};
`}
${StyledMenuListItem}:hover & {
${({ $disabled, theme, variant }) =>
!$disabled &&
variant === 'menu' &&
css`
border-color: ${theme.materialTextInvert};
`};
}
border-color: ${p =>
p.$disabled ? p.theme.checkmarkDisabled : p.theme.checkmark};
}
`;
const IndeterminateIcon = styled.span.attrs(() => ({
Expand All @@ -145,16 +108,9 @@ const IndeterminateIcon = styled.span.attrs(() => ({
display: inline-block;
position: relative;
${({ variant }) =>
variant === 'menu'
? css`
height: calc(100% - 4px);
width: calc(100% - 4px);
`
: css`
width: 100%;
height: 100%;
`}
width: 100%;
height: 100%;
&:after {
content: '';
display: block;
Expand All @@ -167,27 +123,12 @@ const IndeterminateIcon = styled.span.attrs(() => ({
mainColor: $disabled ? theme.checkmarkDisabled : theme.checkmark
})}
background-position: 0px 0px, 2px 2px;
${({ $disabled, theme, variant }) =>
variant === 'menu' &&
css`
${StyledMenuListItem}:hover & {
${createHatchedBackground({
mainColor: theme.materialTextInvert
})}
}
filter: drop-shadow(
1px 1px 0px
${$disabled ? theme.materialTextDisabledShadow : 'transparent'}
);
`};
}
`;

const CheckboxComponents = {
flat: StyledFlatCheckbox,
default: StyledCheckbox,
menu: StyledMenuCheckbox
default: StyledCheckbox
};

const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
Expand Down

0 comments on commit 17eec67

Please sign in to comment.