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

CHANGED: root classname elements on checkbox and radio components 

NEW: opportunity control toggled state to each a segmented-buttons
FIXED: hover, focus and active states for slider in stylesheets
This commit is contained in:
doryan04 2024-02-14 23:21:28 +04:00
parent d955f6ac10
commit 973f70fba6
10 changed files with 1223 additions and 880 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/page.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import testImage1 from './test-images/test-image-1.jpg';
import { Card } from '../src/primitive-components/card/card';
import { Checkbox } from '../src/primitive-components/components';
import {Checkbox, Radio} from '../src/primitive-components/components';
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';
@ -25,7 +25,7 @@ export default function Page() {
padding: '8px',
}}
>
<div style={{ display: 'flex', gap: '8px', maxWidth: '768px' }}>
<div style={{ display: 'flex', gap: '8px', maxWidth: '1024px' }}>
<Card variant={'outlined'}>
<CardHeader>
<Typography.h3> Header-3 </Typography.h3>
@ -54,7 +54,7 @@ export default function Page() {
<Button icon={'add'} iconPlace={'right'}>
Label 2
</Button>
<SegmentedButtons toggled>
<SegmentedButtons>
<SegmentButton
fillIcon={1}
icon={'change_history'}
@ -72,6 +72,8 @@ export default function Page() {
Label 3
</SegmentButton>
</SegmentedButtons>
<Checkbox />
<Radio />
<Slider />
</div>
</CardFooter>

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

@ -16,7 +16,7 @@ export const SegmentedButtons = forwardRef<
(Button: ReactElement, index: number) => {
return cloneElement(<SegmentButton />, {
...Button.props,
toggled: toggled,
toggled: Button.props.toggled ?? toggled,
key: index,
});
},

8
src/primitive-components/input-components/checkbox/checkbox.tsx
View File

@ -19,7 +19,7 @@ import {
*/
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
({ centralRipple, ...props }, ref) => {
({ centralRipple = true, ...props }, ref) => {
const [isActive, setIsActive] = useState<boolean>(false),
[checked, setChecked] = useState<boolean>(props.checked ?? false),
ripplesRef = useRef(null),
@ -27,7 +27,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
events = useRippleEffect(ripplesRef, setIsActive);
const extraClassStyles =
`m3 m3-checkbox-label ${isActive === true ? 'visible' : ''}`.trimEnd();
`m3 m3-checkbox-container ${isActive === true ? 'visible' : ''}`.trimEnd();
useImperativeHandle(ref, () => checkboxRef.current);
@ -36,7 +36,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
}, [checkboxRef.current?.checked]);
return (
<label {...events} className={extraClassStyles}>
<div {...events} className={extraClassStyles}>
<InputLayout
{...props}
indeterminate={props.indeterminate}
@ -52,7 +52,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
ref={ripplesRef}
/>
{props.children}
</label>
</div>
);
},
);

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

@ -19,7 +19,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
events = useRippleEffect(ripplesRef, setIsActive);
const extraClassStyles =
`m3 m3-radio ${isActive === true ? 'visible' : ''}`.trimEnd();
`m3 m3-radio-container ${isActive === true ? 'visible' : ''}`.trimEnd();
return (
<div {...events} className={extraClassStyles}>

14
src/primitive-components/input-components/slider/slider.tsx
View File

@ -6,11 +6,13 @@ export const Slider = forwardRef<
HTMLAttributes<HTMLInputElement>
>((props, ref) => {
return (
<InputLayout
className={props.className}
ref={ref}
type={'range'}
typeInput={'slider'}
/>
<div className={'m3 m3-slider-container'}>
<InputLayout
className={props.className}
ref={ref}
type={'range'}
typeInput={'slider'}
/>
</div>
);
});

2028
src/styles/generics.css
View File

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

15
src/styles/input-styles/checkbox.sass
View File

@ -1,4 +1,4 @@
label.m3.m3-checkbox-label
div.m3.m3-checkbox-container
@include m3-label-mixin
width: 18px
height: 18px
@ -28,12 +28,13 @@ input[type="checkbox"].m3.m3-checkbox
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
& ~ span.m3-checkbox-state
transition: color .2s cubic-bezier(0.2, 0, 0, 1)
color: var(--md-sys-color-on-surface-variant)
transition: color .2s cubic-bezier(0.2, 0, 0, 1)
&:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
& ~ span.m3-checkbox-state
color: var(--md-sys-color-error)
background: var(--md-sys-color-on-error)
&:is(:user-invalid, .m3.m3-error):not(:checked)
@ -43,6 +44,7 @@ input[type="checkbox"].m3.m3-checkbox
&:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled))
& ~ span.m3-checkbox-state
color: var(--md-sys-color-primary)
background: var(--md-sys-color-on-primary)
&:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state
@ -56,13 +58,13 @@ input[type="checkbox"].m3.m3-checkbox
pointer-events: none
z-index: 10
display: flex
font-size: 24px
font-weight: 700
line-height: 24px
align-items: center
justify-content: center
line-height: 24px
font-family: Material-Symbols-Outlined-Regular, sans-serif
font-weight: 700
font-size: 24px
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24
font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24
&:not(:indeterminate, :checked) ~ span.m3-checkbox-state::before
content: "check_box_outline_blank"
@ -72,6 +74,7 @@ input[type="checkbox"].m3.m3-checkbox
&:checked ~ span.m3-checkbox-state::before
content: "check_box"
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24
&:not(:disabled)
&:is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover)

2
src/styles/input-styles/radio.sass
View File

@ -1,4 +1,4 @@
div.m3.m3-radio
div.m3.m3-radio-container
width: 20px
height: 20px
align-items: center

16
src/styles/input-styles/slider.sass
View File

@ -1,9 +1,16 @@
div.m3.m3-slider-container
height: 20px
display: flex
align-items: center
input[type="range"].m3.m3-slider
margin: 0
height: 4px
appearance: none
border-radius: 2px
background-color: var(--md-sys-color-surface-container-highest)
overflow: visible
border-radius: 2px
margin-inline: 10px
background-color: var(--md-sys-color-surface-container-highest)
&::-webkit-slider-container
margin-inline: -8px
@ -19,13 +26,18 @@ input[type="range"].m3.m3-slider
&:hover
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
&:is(:active, :focus-visible)
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
width: 20px
aspect-ratio: 1
appearance: none
overflow: visible
border-radius: 50%
box-sizing: border-box
outline: 10px solid transparent
background: var(--md-sys-color-primary)
transition: .2s cubic-bezier(0.2, 0, 0, 1)