doryan
/
material-you-react
0
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

ADDED: Icon wrapper for more elegant way to placement icon in buttons 

TODO: Add styles for selected segmented button
DONE: Base styles for segmented buttons
This commit is contained in:
doryan04 2024-02-09 23:16:00 +04:00
parent 7d79badf8b
commit b0275dec80
15 changed files with 148 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/page.tsx
View File

@ -5,13 +5,11 @@ import { CardBody } from '../src/primitive-components/card/card-body';
import { CardMedia } from '../src/primitive-components/card/card-media';
import { CardFooter } from '../src/primitive-components/card/card-footer';
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 { CardActionArea } from '../src/primitive-components/card/card-action-area';
import { Button } from '../src/primitive-components/button-components/button/button';
import { Typography } from '../src/primitive-components/typography/typography';
import {
ButtonLayout,
SegmentedButtons,
} from '../src/primitive-components/components';
import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
export default function Page() {
return (
@ -50,11 +48,21 @@ export default function Page() {
</CardActionArea>
<CardFooter>
<div className={'flex flex-row gap-3'}>
<Button>label</Button>
<Button icon={'add'}>Label 1</Button>
<Button icon={'add'} iconPlace={'right'}>
Label 2
</Button>
<SegmentedButtons>
<ButtonLayout>Label 1</ButtonLayout>
<ButtonLayout>Label 2</ButtonLayout>
<ButtonLayout>Label 3</ButtonLayout>
<SegmentButton icon={'add'}>
Label 1
</SegmentButton>
<SegmentButton
icon={'add'}
iconPlace={'right'}
>
Label 2
</SegmentButton>
<SegmentButton>Label 3</SegmentButton>
</SegmentedButtons>
</div>
</CardFooter>

3
src/primitive-components/button-components/button-layout/button-layout.tsx
View File

@ -1,6 +1,6 @@
'use client';
import { bool, string } from 'prop-types';
import { bool } from 'prop-types';
import { RippleEffect } from '../../ripple/ripple-effect';
import { ButtonLayoutProps } from './button-layout.types';
import useRippleEffect from '../../ripple/hooks/useRippleEffect';
@ -37,6 +37,5 @@ export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
);
ButtonLayout.propTypes = {
children: string,
centralRipple: bool,
};

8
src/primitive-components/button-components/button/button.tsx
View File

@ -1,10 +1,10 @@
'use client';
import { forwardRef } from 'react';
import { Icon } from '../../components';
import { ButtonProps } from './button.types';
import { bool, oneOf, string } from 'prop-types';
import { ButtonLayout } from '../button-layout/button-layout';
import { IconWrapper } from '../../icon/icon-wrapper';
/**
* Button component
@ -14,10 +14,11 @@ import { ButtonLayout } from '../button-layout/button-layout';
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
(
{
icon,
icon = undefined,
className = '',
disabled = false,
variant = 'filled',
iconPlace = 'left',
centralRipple = false,
...props
},
@ -30,8 +31,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
disabled={disabled}
ref={ref}
>
{icon ? <Icon iconSize={20}>{icon}</Icon> : <></>}
<IconWrapper icon={icon} iconPlace={iconPlace}>
<span className={'label-large'}>{props.children}</span>
</IconWrapper>
</ButtonLayout>
),
);

1
src/primitive-components/button-components/button/button.types.ts
View File

@ -6,6 +6,7 @@ export interface ButtonMainProps {
children?: string;
disabled?: boolean;
variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
iconPlace?: 'left' | 'right';
}
export type ButtonProps = RipplePropsForComponents<HTMLButtonElement> &

48
src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx
View File

@ -1,29 +1,51 @@
import React, { cloneElement, forwardRef, ReactElement } from 'react';
import { SegmentedButtonProps } from './segmented-buttons.types';
import React, { forwardRef } from 'react';
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<
HTMLButtonElement,
ButtonLayoutProps & SegmentedButton
>(({ 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}>
{props.children}
</IconWrapper>
<span className={'m3 m3-button-segment-state-layer'} />
</ButtonLayout>
);
});
SegmentButton.propTypes = {
children: string,
};
export const SegmentedButtons = forwardRef<
HTMLDivElement,
SegmentedButtonProps
SegmentedButtonsProps
>(({ children, ...props }, ref) => {
if (children.length <= 1) {
throw 'You must build segmented button with 2 or more buttton';
}
const buttons = children.map((button: ReactElement, index) => {
const classes =
`m3-button-segment ${button.props.className ?? ''}`.trimEnd();
return cloneElement(button, {
className: classes,
key: index,
});
});
return (
<div
className={`m3 m3-segmented-buttons ${props.className ?? ''}`.trimEnd()}
ref={ref}
>
{buttons}
{children}
</div>
);
});

10
src/primitive-components/button-components/segmented-buttons/segmented-buttons.types.ts
View File

@ -1,8 +1,14 @@
import { HTMLAttributes, ReactElement } from 'react';
import { IconWrapperProps } from '../../icon/icon.types';
export interface SegmentedButton {
export type SegmentedButton = IconWrapperProps & {
icon?: string;
centralRipple?: boolean;
};
export interface SegmentedButtons {
children?: ReactElement<HTMLButtonElement>[];
}
export type SegmentedButtonProps = SegmentedButton &
export type SegmentedButtonsProps = SegmentedButtons &
HTMLAttributes<HTMLDivElement>;

2
src/primitive-components/components.tsx
View File

@ -3,9 +3,9 @@ export { Icon } from './icon/icon';
export { Badge } from './badge/badge';
export { Ripple } from './ripple/ripple';
export { Divider } from './divider/divider';
export { FAB } from './button-components/fab/fab';
export { Container } from './container/container';
export { RippleEffect } from './ripple/ripple-effect';
export { FAB } from './button-components/fab/fab';
export { Radio } from './input-components/radio/radio';
export { Switch } from './input-components/switch/switch';
export { Button } from './button-components/button/button';

18
src/primitive-components/icon/icon-wrapper.tsx Normal file
View File

@ -0,0 +1,18 @@
import React from 'react';
import { Icon } from './icon';
import { IconWrapperProps } from './icon.types';
export function IconWrapper({
children,
icon,
iconPlace,
...props
}: IconWrapperProps) {
return (
<>
{icon && iconPlace === 'left' && <Icon {...props}>{icon}</Icon>}
{children}
{icon && iconPlace === 'right' && <Icon {...props}>{icon}</Icon>}
</>
);
}

20
src/primitive-components/icon/icon.types.ts
View File

@ -1,12 +1,26 @@
import { SVGProps } from 'react';
import { PropsWithChildren, SVGProps } from 'react';
export interface IconProps extends SVGProps<SVGSVGElement> {
export interface IconPlacement {
iconPlace?: 'left' | 'right';
}
export interface GeneralIconProps {
grade?: number;
svgSize?: number;
fillIcon?: 0 | 1;
iconSize?: number;
opticalSize?: number;
children?: string | undefined;
type?: 'outlined' | 'rounded' | 'sharp';
weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700;
}
export type IconWrapperProps = IconPlacement &
GeneralIconProps &
PropsWithChildren & {
icon?: string;
};
export type IconProps = SVGProps<SVGSVGElement> &
GeneralIconProps & {
children?: string | undefined;
};

2
src/primitive-components/ripple/ripple.types.ts
View File

@ -30,7 +30,7 @@ export interface RipplePropsForComponents<T> extends HTMLAttributes<T> {
}
export interface RippleAreaProps extends HTMLAttributes<HTMLElement> {
callback: Dispatch<SetStateAction<boolean>>;
callback?: Dispatch<SetStateAction<boolean>>;
central?: boolean;
}

2
src/styles/button-styles/button.sass
View File

@ -1,7 +1,9 @@
button:not(.m3-fab, .m3-icon-button)
width: min-content
height: min-content
max-height: 40px
box-sizing: border-box
white-space: nowrap
font-size: var(--md-sys-typescale-label-large-font-size)
font-weight: var(--md-sys-typescale-label-large-font-weight)
line-height: var(--md-sys-typescale-label-large-line-height)

21
src/styles/button-styles/segmented-button.sass
View File

@ -1,7 +1,6 @@
div.m3.m3-segmented-buttons
display: flex
flex-direction: row
outline-offset: -1px
width: min-content
border-radius: 20px
@ -21,3 +20,23 @@ div.m3.m3-segmented-buttons
&:last-child
border-radius: 0 20px 20px 0
& > span.m3.m3-button-segment-state-layer
position: absolute
width: 100%
height: 100%
& > span.m3.m3-button-segment-state-layer, span.m3.m3-ripple-domain
transition: .2s cubic-bezier(0.2, 0, 0, 1)
&:hover
& > span.m3.m3-button-segment-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
&:is(&:active, &:focus-visible)
& > span.m3.m3-button-segment-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
&:active
& > span.m3.m3-ripple-domain > span.m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)

3
src/styles/card.sass
View File

@ -80,8 +80,5 @@ div.m3.m3-card-action-area
& > span.m3.m3-card-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
& > span.m3.m3-card-state-layer
background-color: transparent
& > span.m3.m3-ripple-domain > .m3.ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)

23
src/styles/generics.css
View File

@ -71,9 +71,6 @@ div.m3.m3-card-action-area:active.m3-card-elevated {
div.m3.m3-card-action-area:active:not(div.m3.m3-card-action-area:active:has(span.m3.m3-ripple-domain)) > span.m3.m3-card-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
div.m3.m3-card-action-area:active > span.m3.m3-card-state-layer {
background-color: transparent;
}
div.m3.m3-card-action-area:active > span.m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
@ -449,7 +446,9 @@ button.m3.m3-fab:focus-visible.tertiary::before {
button:not(.m3-fab, .m3-icon-button) {
width: min-content;
height: min-content;
max-height: 40px;
box-sizing: border-box;
white-space: nowrap;
font-size: var(--md-sys-typescale-label-large-font-size);
font-weight: var(--md-sys-typescale-label-large-font-weight);
line-height: var(--md-sys-typescale-label-large-line-height);
@ -715,7 +714,6 @@ button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
div.m3.m3-segmented-buttons {
display: flex;
flex-direction: row;
outline-offset: -1px;
width: min-content;
border-radius: 20px;
}
@ -736,6 +734,23 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child {
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 > span.m3.m3-button-segment-state-layer {
position: absolute;
width: 100%;
height: 100%;
}
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-ripple-domain {
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:hover > span.m3.m3-button-segment-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:is(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:active, div.m3.m3-segmented-buttons > button.m3.m3-button-segment:focus-visible) > span.m3.m3-button-segment-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:active > span.m3.m3-ripple-domain > span.m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
div.m3.m3-radio {
width: 20px;

2
src/styles/generics.css.map
View File

File diff suppressed because one or more lines are too long