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

CHANGES: Added unoptimized progress bar inside <Slider> component

Browse Source 
FIXED: Some styles
This commit is contained in:
doryan authored and doryan committed 2025-04-03 11:30:04 +04:00
1 parent 1f6343c07b
commit a45fdf2f1f
9 files changed
+127 -77
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/page.tsx
+21 -2
View File
@@ -61,7 +61,7 @@ export default function Page() {
<Button icon={'add'} iconPlace={'right'}>
Label 2
</Button>
<SegmentedButtons>
<SegmentedButtons toggled={true}>
<SegmentButton
fillIcon={1}
icon={'change_history'}
@@ -80,7 +80,26 @@ export default function Page() {
</SegmentButton>
</SegmentedButtons>
<Checkbox />
<Slider />
<Slider
defaultValue={0}
max={100}
min={0}
options={[0, 10, 20, 100]}
/>
<Slider defaultValue={0} max={100} min={0} />
<div>
<input
list={'lol'}
max={100}
min={0}
type={'range'}
/>
<datalist id={'lol'}>
<option value={0} />
<option value={50} />
<option value={100} />
</datalist>
</div>
</div>
</CardFooter>
</Card>
src/primitive-components/input-components/input-layout/input-layout.types.ts
-4
View File
@@ -6,7 +6,3 @@ export interface InputLayoutProps
typeInput?: string;
type?: string;
}
export interface LabelPlacement {
labelPlacement?: 'left' | 'right';
}
src/primitive-components/input-components/slider/slider.tsx
+45 -17
View File
@@ -1,18 +1,46 @@
import React, { forwardRef, HTMLAttributes } from 'react';
import { InputLayout } from '../input-layout/input-layout';
'use client';
export const Slider = forwardRef<
HTMLInputElement,
HTMLAttributes<HTMLInputElement>
>((props, ref) => {
return (
<div className={'m3 m3-slider-container'}>
<InputLayout
className={props.className}
ref={ref}
type={'range'}
typeInput={'slider'}
/>
</div>
);
});
import { InputLayout } from '../input-layout/input-layout';
import React, { forwardRef, InputHTMLAttributes, useId, useState } from 'react';
interface SliderProps extends InputHTMLAttributes<HTMLInputElement> {
options?: number[];
}
export const Slider = forwardRef<HTMLInputElement, SliderProps>(
({ options, ...props }, ref) => {
const sliderId = useId();
const [progress, setProgress] = useState<number>(0);
return (
<div className={'m3 m3-slider-container'}>
<InputLayout
{...props}
className={props.className}
list={sliderId}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setProgress(
(parseInt(event.target.value) /
parseInt(event.target.max)) *
100,
);
}}
ref={ref}
style={{
...props.style,
background: `linear-gradient(to right, var(--md-sys-color-primary) ${progress}%, var(--md-sys-color-surface-container-highest) ${progress}%)`,
}}
type={'range'}
typeInput={'slider'}
/>
{options && (
<datalist id={sliderId}>
{options.map((option, index) => (
<option key={index} value={option} />
))}
</datalist>
)}
</div>
);
},
);
src/primitive-components/input-components/switch/switch.tsx
+29 -29
View File
@@ -4,41 +4,41 @@ import { bool } from 'prop-types';
import React, { forwardRef } from 'react';
import { SwitchMainProps } from './switch.types';
import { InputLayout } from '../input-layout/input-layout';
import { LabelPlacement } from '../input-layout/input-layout.types';
/**
* Switch component
** description
*/
export const Switch = forwardRef<
HTMLInputElement,
SwitchMainProps & LabelPlacement
>(({ icon, selected = false, ...props }, ref) => (
<>
<div className={'m3 m3-switch'}>
<InputLayout
{...props}
className={`m3 ${props.className ?? ''}`.trimEnd()}
ref={ref}
type={'checkbox'}
/>
<svg>
<rect className={'m3 m3-switch-track'} />
<circle className={'m3 m3-switch-handler'} />
<circle className={'m3 m3-switch-handler-state-layer'} />
<g>
{icon && !selected && (
<text className={'m3 m3-icon-unchecked'}>close</text>
)}
{icon && (
<text className={'m3 m3-icon-checked'}>check</text>
)}
</g>
</svg>
</div>
</>
));
export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
({ icon, selected = false, ...props }, ref) => (
<>
<div className={'m3 m3-switch'}>
<InputLayout
{...props}
className={`m3 ${props.className ?? ''}`.trimEnd()}
ref={ref}
type={'checkbox'}
/>
<svg>
<rect className={'m3 m3-switch-track'} />
<circle className={'m3 m3-switch-handler'} />
<circle className={'m3 m3-switch-handler-state-layer'} />
<g>
{icon && !selected && (
<text className={'m3 m3-icon-unchecked'}>
close
</text>
)}
{icon && (
<text className={'m3 m3-icon-checked'}>check</text>
)}
</g>
</svg>
</div>
</>
),
);
Switch.propTypes = {
icon: bool,
src/primitive-components/typography/typography.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { createElement, forwardRef } from 'react';
import { getTypographyRole } from './get-typography-role';
import { getTypographyRole } from './utils/get-typography-role';
import {
TypographyProps,
Typography as TypographyTargetRef,
src/primitive-components/typography/get-typography-role.ts → src/primitive-components/typography/utils/get-typography-role.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { TypographyRole, TypographySize } from './typography.types';
import { TypographyRole, TypographySize } from '../typography.types';
export function getTypographyRole(role: TypographyRole, size: TypographySize) {
switch (role) {
src/styles/generics.css
+14 -11
View File
@@ -881,36 +881,39 @@ div.m3.m3-slider-container {
display: flex;
align-items: center;
}
div.m3.m3-slider-container > datalist {
display: none;
}
input[type=range].m3.m3-slider {
margin: 0;
height: 4px;
appearance: none;
overflow: visible;
border-radius: 2px;
margin-inline: 10px;
background-color: var(--md-sys-color-surface-container-highest);
margin-inline: 8px;
background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%);
}
input[type=range].m3.m3-slider::-webkit-slider-container {
margin-inline: -8px;
appearance: none;
box-shadow: none;
border-radius: 2px;
min-block-size: 4px;
height: 4px !important;
}
input[type=range].m3.m3-slider::-webkit-slider-runnable-track {
height: 4px;
}
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%;
margin-top: -8px;
box-sizing: border-box;
outline: 10px solid transparent;
background: var(--md-sys-color-primary);
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
}
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 {
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
src/styles/generics.css.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass","themes/tokens.css","themes/colors.module.css","themes/typography.module.css"],"names":[],"mappings":"AAwBQ;AACA;ACdJ;EAGI;EACA;;;AAER;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EAII;EACA;EACA;EACA;EACA;;AAPA;EACI;;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAGJ;EACI;;AAGJ;ECvBA;;AD0BA;ECpBA;;ADwBA;ECtCA;;ADyCA;ECnCA;;ADuCI;EACI;;AAER;EACI;;;AE/ER;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI;;;ACjBZ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACfR;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;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I;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;AC9FhB;EACI;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EZyBI;EYXA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAnBA;EACI;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;;AC7BZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EACI;EACA;;ALine truncated
{"version":3,"sourceRoot":"","sources":["generics.sass","card.sass","mixins/m3-mixins.sass","icon.sass","badge.sass","fonts.sass","ripple.sass","divider.sass","container.sass","button-styles/fabs.sass","button-styles/button.sass","button-styles/icon-button.sass","button-styles/segmented-button.sass","input-styles/radio.sass","input-styles/slider.sass","input-styles/swtich.sass","input-styles/checkbox.sass","input-styles/text-field.sass","themes/tokens.css","themes/colors.module.css","themes/typography.module.css"],"names":[],"mappings":"AAwBQ;AACA;ACdJ;EAGI;EACA;;;AAER;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EAII;EACA;EACA;EACA;EACA;;AAPA;EACI;;;AAQR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAGJ;EACI;;AAGJ;ECvBA;;AD0BA;ECpBA;;ADwBA;ECtCA;;ADyCA;ECnCA;;ADuCI;EACI;;AAER;EACI;;;AE/ER;EACI;EACA;;AAGA;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAQJ;EACI,OATA;EAUA;EACA,aAXA;EAYA,WAZA;;AAeJ;EACI;;AADJ;EACI;;AADJ;EACI;;;ACjBZ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AACR;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrBJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAHJ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;AAJJ;EACI;EACA;EACA;EACA;;ACfR;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAEJ;EACE;IACE;;EACF;IACE;;;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I;;AAEJ;EACI;;AACA;EACI;;AAGJ;EACI;;AAER;EACI;;AACA;EACI;;AAIJ;EACI;EACA;;AAER;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAEZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;;AC9FhB;EACI;EACA;EACA;;AAEA;EACI;;;AAGR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EZgBI;EYPA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAdA;EACI;;AAEJ;EACI;;;ACjCZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;EACA;;AAER;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGA;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAEJ;EACI;;AAER;EACI;;AAEJ;EAEI;;AAGA;EACI;;AAEJ;EACI;;AAGJ;EACI;;AAER;EACI;;AAEJ;EACI;EACA;;AAII;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;;AAEJ;EACI;EACA;;AAGR;EALine truncated
src/styles/input-styles/slider.sass
+15 -11
View File
@@ -3,26 +3,30 @@ div.m3.m3-slider-container
display: flex
align-items: center
& > datalist
display: none
input[type="range"].m3.m3-slider
margin: 0
height: 4px
appearance: none
overflow: visible
border-radius: 2px
margin-inline: 10px
background-color: var(--md-sys-color-surface-container-highest)
margin-inline: 8px
background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%)
&::-webkit-slider-container
margin-inline: -8px
appearance: none
box-shadow: none
border-radius: 2px
min-block-size: 4px
height: 4px !important
&::-webkit-slider-runnable-track
height: 4px
&::-webkit-slider-thumb
@include elevation-1(false)
&::after
width: 40px
aspect-ratio: 1
background-color: transparent
&:hover
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
@@ -32,8 +36,8 @@ input[type="range"].m3.m3-slider
width: 20px
aspect-ratio: 1
appearance: none
overflow: visible
border-radius: 50%
margin-top: -8px
box-sizing: border-box
outline: 10px solid transparent
background: var(--md-sys-color-primary)