TODO: Slider

DONE: Segmented buttons
This commit is contained in:
doryan04 2024-02-12 20:11:33 +04:00
parent 08c590c745
commit d94e1b7360
9 changed files with 175 additions and 62 deletions

View File

@ -1,15 +1,16 @@
import React from 'react'; import React from 'react';
import testImage1 from './test-images/test-image-1.jpg'; import testImage1 from './test-images/test-image-1.jpg';
import { Card } from '../src/primitive-components/card/card'; import { Card } from '../src/primitive-components/card/card';
import { Checkbox } from '../src/primitive-components/components';
import { CardBody } from '../src/primitive-components/card/card-body'; import { CardBody } from '../src/primitive-components/card/card-body';
import { CardMedia } from '../src/primitive-components/card/card-media'; import { CardMedia } from '../src/primitive-components/card/card-media';
import { CardFooter } from '../src/primitive-components/card/card-footer'; import { CardFooter } from '../src/primitive-components/card/card-footer';
import { CardHeader } from '../src/primitive-components/card/card-header'; import { CardHeader } from '../src/primitive-components/card/card-header';
import { SegmentedButtons } from '../src/primitive-components/components';
import { Typography } from '../src/primitive-components/typography/typography'; import { Typography } from '../src/primitive-components/typography/typography';
import { CardActionArea } from '../src/primitive-components/card/card-action-area'; import { CardActionArea } from '../src/primitive-components/card/card-action-area';
import { Button } from '../src/primitive-components/button-components/button/button'; import { Button } from '../src/primitive-components/button-components/button/button';
import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons'; import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button';
import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
export default function Page() { export default function Page() {
return ( return (
@ -23,7 +24,7 @@ export default function Page() {
padding: '8px', padding: '8px',
}} }}
> >
<div style={{ display: 'flex', gap: '8px', maxWidth: '512px' }}> <div style={{ display: 'flex', gap: '8px', maxWidth: '768px' }}>
<Card variant={'outlined'}> <Card variant={'outlined'}>
<CardHeader> <CardHeader>
<Typography.h3> Header-3 </Typography.h3> <Typography.h3> Header-3 </Typography.h3>
@ -52,18 +53,23 @@ export default function Page() {
<Button icon={'add'} iconPlace={'right'}> <Button icon={'add'} iconPlace={'right'}>
Label 2 Label 2
</Button> </Button>
<SegmentedButtons> <SegmentedButtons toggled>
<SegmentButton icon={'add'}> <SegmentButton
fillIcon={1}
icon={'change_history'}
>
Label 1 Label 1
</SegmentButton> </SegmentButton>
<SegmentButton <SegmentButton
icon={'add'} fillIcon={1}
icon={'change_history'}
iconPlace={'right'} iconPlace={'right'}
> >
Label 2 Label 2
</SegmentButton> </SegmentButton>
<SegmentButton>Label 3</SegmentButton> <SegmentButton>Label 3</SegmentButton>
</SegmentedButtons> </SegmentedButtons>
<Checkbox />
</div> </div>
</CardFooter> </CardFooter>
</Card> </Card>

View File

@ -0,0 +1,74 @@
'use client';
import { string } from 'prop-types';
import React, { forwardRef, useState } from 'react';
import { IconWrapper } from '../../icon/icon-wrapper';
import { SegmentedButton } from './segmented-buttons.types';
import { ButtonLayout } from '../button-layout/button-layout';
import { ButtonLayoutProps } from '../button-layout/button-layout.types';
export const SegmentButton = forwardRef<
HTMLButtonElement,
ButtonLayoutProps & SegmentedButton
>(
(
{
icon,
toggled = false,
iconPlace = 'left',
centralRipple = false,
...props
},
ref,
) => {
const {
fillIcon,
grade,
svgSize,
iconSize,
opticalSize,
type,
weight,
} = props;
const [selectedState, setSelectedState] = useState<boolean>(false);
const classes =
`m3-button-segment${selectedState ? ' selected' : ''} ${props.className ?? ''}`.trimEnd();
const _icon = selectedState && icon;
return (
<ButtonLayout
{...props}
centralRipple={centralRipple}
className={classes}
onClick={() => {
if (toggled) {
setSelectedState(state => !state);
}
props.onClick?.apply(this, props.onClick.arguments);
}}
ref={ref}
>
<IconWrapper
fillIcon={fillIcon}
grade={grade}
icon={_icon}
iconPlace={iconPlace}
iconSize={iconSize}
opticalSize={opticalSize}
svgSize={svgSize}
type={type}
weight={weight}
>
<span className={'label-large'}>{props.children}</span>
</IconWrapper>
<span className={'m3 m3-button-segment-state-layer'} />
</ButtonLayout>
);
},
);
SegmentButton.propTypes = {
children: string,
};

View File

@ -1,51 +1,33 @@
import React, { forwardRef } from 'react'; 'use client';
import {
SegmentedButton,
SegmentedButtonsProps,
} from './segmented-buttons.types';
import { string } from 'prop-types';
import { ButtonLayout } from '../../components';
import { ButtonLayoutProps } from '../button-layout/button-layout.types';
import { IconWrapper } from '../../icon/icon-wrapper';
export const SegmentButton = forwardRef< import { SegmentButton } from './segment-button';
HTMLButtonElement, import { SegmentedButtonsProps } from './segmented-buttons.types';
ButtonLayoutProps & SegmentedButton import React, { cloneElement, forwardRef, ReactElement } from 'react';
>(({ centralRipple = false, iconPlace = 'left', icon, ...props }, ref) => {
const classes = `m3-button-segment ${props.className ?? ''}`.trimEnd();
return (
<ButtonLayout
{...props}
centralRipple={centralRipple}
className={classes}
ref={ref}
>
<IconWrapper icon={icon} iconPlace={iconPlace}>
<span className={'label-large'}>{props.children}</span>
</IconWrapper>
<span className={'m3 m3-button-segment-state-layer'} />
</ButtonLayout>
);
});
SegmentButton.propTypes = {
children: string,
};
export const SegmentedButtons = forwardRef< export const SegmentedButtons = forwardRef<
HTMLDivElement, HTMLDivElement,
SegmentedButtonsProps SegmentedButtonsProps
>(({ children, ...props }, ref) => { >(({ toggled = false, children, ...props }, ref) => {
if (children.length <= 1) { if (children.length <= 1) {
throw 'You must build segmented button with 2 or more buttton'; throw 'You must build segmented button with 2 or more button';
} }
const SegmentedButtons: Array<ReactElement> = children.map(
(Button: ReactElement, index: number) => {
return cloneElement(<SegmentButton />, {
...Button.props,
toggled: toggled,
key: index,
});
},
);
return ( return (
<div <div
className={`m3 m3-segmented-buttons ${props.className ?? ''}`.trimEnd()} className={`m3 m3-segmented-buttons ${props.className ?? ''}`.trimEnd()}
ref={ref} ref={ref}
> >
{children} {SegmentedButtons}
</div> </div>
); );
}); });

View File

@ -1,12 +1,15 @@
import { HTMLAttributes, ReactElement } from 'react'; import { HTMLAttributes, ReactElement } from 'react';
import { IconWrapperProps } from '../../icon/icon.types'; import { IconProps, IconWrapperProps } from '../../icon/icon.types';
export type SegmentedButton = IconWrapperProps & { export type SegmentedButton = IconWrapperProps & {
icon?: string; icon?: string;
toggled?: boolean;
centralRipple?: boolean; centralRipple?: boolean;
children?: string | ReactElement<IconProps>;
}; };
export interface SegmentedButtons { export interface SegmentedButtons {
toggled?: boolean;
children?: ReactElement<HTMLButtonElement>[]; children?: ReactElement<HTMLButtonElement>[];
} }

View File

@ -16,7 +16,7 @@ const Ripple = ({
const rippleDomainContext = useContext(rippleAreaContext); const rippleDomainContext = useContext(rippleAreaContext);
useLayoutEffect(() => { useLayoutEffect(() => {
if (endLifetime !== null && !rippleDomainContext) { if (endLifetime && !rippleDomainContext) {
setClasses('m3 ripple'); setClasses('m3 ripple');
setTimeout(() => endLifetime(rippleKey), lifetime); setTimeout(() => endLifetime(rippleKey), lifetime);
} }

View File

@ -1,3 +1,10 @@
input[type="button"].test-button
color: white
&:not(:checked)
background-color: green
&:checked
background-color: blue
button:not(.m3-fab, .m3-icon-button) button:not(.m3-fab, .m3-icon-button)
width: min-content width: min-content
height: min-content height: min-content

View File

@ -1,31 +1,46 @@
div.m3.m3-segmented-buttons div.m3.m3-segmented-buttons
padding: 0
height: 40px
display: flex display: flex
flex-direction: row flex-direction: row
width: min-content
border-radius: 20px border-radius: 20px
box-sizing: border-box
border-collapse: collapse
& > button.m3.m3-button-segment & > button.m3.m3-button-segment
margin: 0 -0.5px 0 -0.5px
& > button.m3.m3-button-segment:first-child
border-radius: 20px 0 0 20px
& > button.m3.m3-button-segment:last-child
border-radius: 0 20px 20px 0
& > button.m3.m3-button-segment
height: 40px height: 40px
border-radius: 0 display: flex
min-width: 108px min-width: 108px
width: max-content width: max-content
box-sizing: border-box padding-inline: 10px
border: 1px solid var(--md-sys-color-outline) border: 1px solid var(--md-sys-color-outline)
&
border-radius: 0
background-color: transparent
& > span & > span
color: var(--md-sys-color-on-surface) color: var(--md-sys-color-on-surface)
& > svg > text & > svg > text
fill: var(--md-sys-color-on-surface) fill: var(--md-sys-color-on-surface)
&:not(:first-child) &.selected
margin-left: -1px background-color: var(--md-sys-color-secondary-container)
&:first-child &.selected > span
border-radius: 20px 0 0 20px color: var(--md-sys-color-on-secondary-container)
&:last-child &.selected > svg > text
border-radius: 0 20px 20px 0 fill: var(--md-sys-color-on-secondary-container)
& > span.m3.m3-button-segment-state-layer & > span.m3.m3-button-segment-state-layer
position: absolute position: absolute

View File

@ -443,6 +443,16 @@ button.m3.m3-fab:focus-visible.tertiary::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent); background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
} }
input[type=button].test-button {
color: white;
}
input[type=button].test-button:not(:checked) {
background-color: green;
}
input[type=button].test-button:checked {
background-color: blue;
}
button:not(.m3-fab, .m3-icon-button) { button:not(.m3-fab, .m3-icon-button) {
width: min-content; width: min-content;
height: min-content; height: min-content;
@ -712,33 +722,49 @@ button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
} }
div.m3.m3-segmented-buttons { div.m3.m3-segmented-buttons {
padding: 0;
height: 40px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: min-content;
border-radius: 20px; border-radius: 20px;
box-sizing: border-box;
border-collapse: collapse;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
margin: 0 -0.5px 0 -0.5px;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child {
border-radius: 20px 0 0 20px;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:last-child {
border-radius: 0 20px 20px 0;
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment { div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
height: 40px; height: 40px;
border-radius: 0; display: flex;
min-width: 108px; min-width: 108px;
width: max-content; width: max-content;
box-sizing: border-box; padding-inline: 10px;
border: 1px solid var(--md-sys-color-outline); border: 1px solid var(--md-sys-color-outline);
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
border-radius: 0;
background-color: transparent;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span { div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span {
color: var(--md-sys-color-on-surface); color: var(--md-sys-color-on-surface);
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > svg > text { div.m3.m3-segmented-buttons > button.m3.m3-button-segment > svg > text {
fill: var(--md-sys-color-on-surface); fill: var(--md-sys-color-on-surface);
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(:first-child) { div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected {
margin-left: -1px; background-color: var(--md-sys-color-secondary-container);
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child { div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span {
border-radius: 20px 0 0 20px; color: var(--md-sys-color-on-secondary-container);
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:last-child { div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > svg > text {
border-radius: 0 20px 20px 0; fill: var(--md-sys-color-on-secondary-container);
} }
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer { div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
position: absolute; position: absolute;

File diff suppressed because one or more lines are too long