ADDED: Base slider styles and disable state of segment-button

This commit is contained in:
doryan04 2024-02-13 23:31:16 +04:00
parent 6493687fdf
commit eefafd3d02
11 changed files with 101 additions and 20 deletions

View File

@ -8,10 +8,10 @@ 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 { 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 { Slider } from '../src/primitive-components/input-components/slider/slider';
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/segment-button'; import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button';
import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons'; import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
import {Slider} from "../src/primitive-components/input-components/slider/slider";
export default function Page() { export default function Page() {
return ( return (
@ -68,10 +68,11 @@ export default function Page() {
> >
Label 2 Label 2
</SegmentButton> </SegmentButton>
<SegmentButton>Label 3</SegmentButton> <SegmentButton disabled>
Label 3
</SegmentButton>
</SegmentedButtons> </SegmentedButtons>
<Slider /> <Slider />
<Checkbox />
</div> </div>
</CardFooter> </CardFooter>
</Card> </Card>

View File

@ -13,7 +13,14 @@ export const SegmentButton = forwardRef<
>( >(
( (
{ {
type,
icon, icon,
grade,
weight,
svgSize,
fillIcon,
iconSize,
opticalSize,
toggled = false, toggled = false,
iconPlace = 'left', iconPlace = 'left',
centralRipple = false, centralRipple = false,
@ -21,16 +28,6 @@ export const SegmentButton = forwardRef<
}, },
ref, ref,
) => { ) => {
const {
fillIcon,
grade,
svgSize,
iconSize,
opticalSize,
type,
weight,
} = props;
const [selectedState, setSelectedState] = useState<boolean>(false); const [selectedState, setSelectedState] = useState<boolean>(false);
const classes = const classes =
`m3-button-segment${selectedState ? ' selected' : ''} ${props.className ?? ''}`.trimEnd(); `m3-button-segment${selectedState ? ' selected' : ''} ${props.className ?? ''}`.trimEnd();

View File

@ -2,8 +2,8 @@
import React, { import React, {
forwardRef, forwardRef,
useEffect,
useImperativeHandle, useImperativeHandle,
useLayoutEffect,
useRef, useRef,
} from 'react'; } from 'react';
import { bool, string } from 'prop-types'; import { bool, string } from 'prop-types';
@ -13,7 +13,7 @@ export const InputLayout = forwardRef<HTMLInputElement, InputLayoutProps>(
({ indeterminate, typeInput, type, ...props }, ref) => { ({ indeterminate, typeInput, type, ...props }, ref) => {
const checkboxRef = useRef<HTMLInputElement>(null); const checkboxRef = useRef<HTMLInputElement>(null);
useEffect(() => { useLayoutEffect(() => {
checkboxRef.current.indeterminate = indeterminate === true; checkboxRef.current.indeterminate = indeterminate === true;
}, []); }, []);
@ -22,9 +22,7 @@ export const InputLayout = forwardRef<HTMLInputElement, InputLayoutProps>(
const classesType = typeInput || type; const classesType = typeInput || type;
const extraClassStyles = const extraClassStyles =
props.className !== undefined `m3 m3-${classesType} ${props.className ?? ''}`.trimEnd();
? `m3 m3-${type} ${props.className}`
: `m3 m3-${classesType}`;
return ( return (
<input <input

View File

@ -5,5 +5,12 @@ export const Slider = forwardRef<
HTMLInputElement, HTMLInputElement,
HTMLAttributes<HTMLInputElement> HTMLAttributes<HTMLInputElement>
>((props, ref) => { >((props, ref) => {
return <InputLayout ref={ref} type={'range'} />; return (
<InputLayout
className={props.className}
ref={ref}
type={'range'}
typeInput={'slider'}
/>
);
}); });

View File

@ -30,6 +30,12 @@ div.m3.m3-segmented-buttons
& > svg > text & > svg > text
fill: var(--md-sys-color-on-surface) fill: var(--md-sys-color-on-surface)
&:disabled
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)
& > *
opacity: 38%
&.selected &.selected
background-color: var(--md-sys-color-secondary-container) background-color: var(--md-sys-color-secondary-container)

View File

@ -753,6 +753,12 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span {
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:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled > * {
opacity: 38%;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected { div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected {
background-color: var(--md-sys-color-secondary-container); background-color: var(--md-sys-color-secondary-container);
} }
@ -869,6 +875,35 @@ div.m3.m3-radio svg > circle.m3-radio-state {
r: 5px; r: 5px;
} }
input[type=range].m3.m3-slider {
height: 4px;
appearance: none;
border-radius: 2px;
background-color: var(--md-sys-color-surface-container-highest);
overflow: visible;
}
input[type=range].m3.m3-slider::-webkit-slider-container {
margin-inline: -8px;
}
input[type=range].m3.m3-slider::-webkit-slider-thumb {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
width: 20px;
aspect-ratio: 1;
appearance: none;
overflow: visible;
border-radius: 50%;
box-sizing: border-box;
background: var(--md-sys-color-primary);
}
input[type=range].m3.m3-slider::-webkit-slider-thumb::after {
width: 40px;
aspect-ratio: 1;
background-color: transparent;
}
input[type=range].m3.m3-slider::-webkit-slider-thumb:hover::after {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
div.m3.m3-switch { div.m3.m3-switch {
margin: 4px; margin: 4px;
gap: 20px; gap: 20px;

File diff suppressed because one or more lines are too long

View File

@ -14,6 +14,7 @@
@import "button-styles/segmented-button" @import "button-styles/segmented-button"
@import "input-styles/radio" @import "input-styles/radio"
@import "input-styles/slider"
@import "input-styles/swtich" @import "input-styles/swtich"
@import "input-styles/checkbox" @import "input-styles/checkbox"
@import "input-styles/text-field" @import "input-styles/text-field"

View File

@ -0,0 +1,3 @@
/*# sourceMappingURL=slider.css.map */

View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"slider.css"}

View File

@ -0,0 +1,32 @@
input[type="range"].m3.m3-slider
height: 4px
appearance: none
border-radius: 2px
background-color: var(--md-sys-color-surface-container-highest)
overflow: visible
&::-webkit-slider-container
margin-inline: -8px
&::-webkit-slider-thumb
@include elevation-1(false)
&::after
width: 40px
aspect-ratio: 1
background-color: transparent
&:hover
&::after
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
width: 20px
aspect-ratio: 1
appearance: none
overflow: visible
border-radius: 50%
box-sizing: border-box
background: var(--md-sys-color-primary)