Skip to content

Commit

Permalink
update theme for Range component
Browse files Browse the repository at this point in the history
  • Loading branch information
SerhiiTsybulskyi committed May 13, 2024
1 parent ac3d512 commit 855db6d
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 27 deletions.
23 changes: 22 additions & 1 deletion src/form/Range/Range.story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,14 @@ import { debounce } from 'lodash';

export default {
title: 'Components/Form/Range',
component: Range
component: Range,
decorators: [
Story => (
<div className="bg-panel p-20">
<Story />
</div>
)
]
};

export const Single = () => {
Expand All @@ -21,6 +28,20 @@ export const Single = () => {
);
};

export const SingleShowHighlight = () => {
const [state, setState] = useState<number>(20);
return (
<RangeSingle
onChange={setState}
min={10}
max={50}
value={state}
className="w-[250px] mt-5"
showHighlight
/>
);
};

export const SingleDisabled = () => {
const [state, setState] = useState<number>(20);
return (
Expand Down
6 changes: 4 additions & 2 deletions src/form/Range/RangeDouble.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import React, {
import { motion, useMotionValue } from 'framer-motion';
import { RangeProps, RangeTooltip } from './RangeTooltip';
import { twMerge } from 'tailwind-merge';
import { useComponentTheme } from '@/utils';
import { cn, useComponentTheme } from '@/utils';
import { RangeTheme } from './RangeTheme';

export const RangeDouble: FC<RangeProps<[number, number]>> = ({
Expand Down Expand Up @@ -230,7 +230,9 @@ export const RangeDouble: FC<RangeProps<[number, number]>> = ({
)}
</motion.div>
<div
className={theme.rangeHighlight}
className={cn(theme.rangeHighlight.base, {
[theme.rangeHighlight.disabled]: disabled
})}
style={{
width: `${maxPercentage - minPercentage}%`,
marginLeft: `${minPercentage}%`
Expand Down
23 changes: 21 additions & 2 deletions src/form/Range/RangeSingle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,17 @@ import React, {
import { motion, useMotionValue } from 'framer-motion';
import { RangeProps, RangeTooltip } from './RangeTooltip';
import { twMerge } from 'tailwind-merge';
import { useComponentTheme } from '@/utils';
import { cn, useComponentTheme } from '@/utils';
import { RangeTheme } from './RangeTheme';

export const RangeSingle: FC<RangeProps<number>> = ({
export interface RangeSingleProps extends RangeProps<number> {
/**
* Display the highlight when true
*/
showHighlight?: boolean;
}

export const RangeSingle: FC<RangeSingleProps> = ({
disabled,
style,
handleClassName,
Expand All @@ -24,6 +31,7 @@ export const RangeSingle: FC<RangeProps<number>> = ({
valueDisplay = 'hover',
valueFormat = value => value.toLocaleString(),
step = 1,
showHighlight = false,
theme: customTheme
}) => {
const [currentValue, setCurrentValue] = useState<number>(value);
Expand Down Expand Up @@ -79,6 +87,7 @@ export const RangeSingle: FC<RangeProps<number>> = ({
const [hovering, setHovering] = useState(false);
const [focused, setFocused] = useState(false);
const tooltipVisible = dragging || focused || hovering;
const maxPercentage = ((currentValue - min) / (max - min)) * 100;

const theme: RangeTheme = useComponentTheme('range', customTheme);

Expand Down Expand Up @@ -133,6 +142,16 @@ export const RangeSingle: FC<RangeProps<number>> = ({
valueFormat(currentValue)
)}
</motion.div>
{showHighlight && (
<div
className={cn(theme.rangeHighlight.base, {
[theme.rangeHighlight.disabled]: disabled
})}
style={{
width: `${maxPercentage}%`
}}
/>
)}
</div>
);
};
43 changes: 32 additions & 11 deletions src/form/Range/RangeTheme.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
export interface RangeTheme {
base: string;
drag: string;
rangeHighlight: string;
rangeHighlight: {
base: string;
disabled: string;
};
disabled: string;
inputWrapper: {
base: string;
Expand All @@ -13,26 +16,41 @@ export interface RangeTheme {

const baseTheme: RangeTheme = {
base: 'relative box-border w-full h-0.5',
drag: 'absolute w-3.5 h-3.5 -left-[7px] -top-[7px] rounded-full',
drag: 'absolute w-4 h-4 -left-2 -top-2 rounded-full',
inputWrapper: {
base: 'cursor-pointer inline-block relative h-full w-full rounded-full',
disabled: 'cursor-not-allowed'
},
rangeHighlight: 'pointer-events-none h-0.5',
disabled: 'cursor-not-allowed opacity-60',
rangeHighlight: {
base: 'pointer-events-none h-0.5',
disabled: 'cursor-not-allowed'
},
disabled: 'cursor-not-allowed',
input: 'absolute left-[-9999px]', // The hidden input used for keyboard controls
tooltip:
'absolute top-[-45px] -translate-x-2/4 whitespace-nowrap text-center left-2/4 rounded-lg p-2.5'
};

export const rangeTheme: RangeTheme = {
...baseTheme,
base: [baseTheme.base, 'bg-surface'].join(' '),
base: [baseTheme.base, 'bg-surface light:bg-gray-200'].join(' '),
inputWrapper: {
...baseTheme.inputWrapper,
base: [baseTheme.inputWrapper.base, 'bg-primary'].join(' ')
base: [
baseTheme.inputWrapper.base,
'bg-primary-active hover:bg-primary-hover shadow-[0px_4px_4px_0px_rgba(0,0,0,0.20)]'
].join(' '),
disabled: [
baseTheme.inputWrapper.disabled,
'bg-secondary-inactive hover:bg-secondary-inactive'
].join(' ')
},
rangeHighlight: {
base: [baseTheme.rangeHighlight.base, 'bg-primary-active'].join(' '),
disabled: [baseTheme.rangeHighlight.disabled, 'bg-secondary-inactive'].join(
' '
)
},
rangeHighlight: [baseTheme.rangeHighlight, 'bg-primary'].join(' '),
tooltip: [baseTheme.tooltip, 'text-surface-content bg-surface'].join(' ')
};

Expand All @@ -46,10 +64,13 @@ export const legacyRangeTheme: RangeTheme = {
baseTheme.drag,
'top-[calc(-1_*_(var(--range-handle-size)_-_var(--range-track-size))_/_2)] left-[calc(-1_*_var(--range-handle-size)_/_2)] w-[var(--range-handle-size)] h-[var(--range-handle-size)] bg-[var(--range-handle-background)] rounded-[var(--range-handle-border-radius)]'
].join(' '),
rangeHighlight: [
baseTheme.rangeHighlight,
'h-[var(--range-track-size)] bg-[var(--range-track-active-background)]'
].join(' '),
rangeHighlight: {
...baseTheme.rangeHighlight,
base: [
baseTheme.rangeHighlight.base,
'h-[var(--range-track-size)] bg-[var(--range-track-active-background)]'
].join(' ')
},
tooltip: [
baseTheme.tooltip,
'rounded-[var(--border-radius-md)] [padding:_var(--spacing-md)] bg-[var(--tooltip-background)] text-[var(--tooltip-color)]'
Expand Down
22 changes: 11 additions & 11 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@ export const colorPalette = {
white: '#FFFFFF',
black: '#000000',
gray: {
100: '#F2F3F7',
200: '#E2E2EA',
300: '#C6CBD9',
400: '#9A9AAF',
500: '#7E7E8F',
600: '#656575',
700: '#535362',
800: '#2E2E3A',
900: '#262631',
950: '#16161E'
100: '#F7F7FA',
200: '#E6E6F0',
300: '#C9C9D6',
400: '#77778C',
500: '#5C5C73',
600: '#3D3D4D',
700: '#242433',
800: '#1E1E2E',
900: '#11111F',
950: '#02020F'
},
magenta: {
100: '#FAE5F6',
Expand Down Expand Up @@ -276,7 +276,7 @@ const config: Config = {
DEFAULT: colorPalette.charade,
active: colorPalette.charade,
hover: colorPalette.gray[700],
inactive: colorPalette.gray[800]
inactive: colorPalette.gray[600]
},
success: {
DEFAULT: colorPalette.green[500],
Expand Down

0 comments on commit 855db6d

Please sign in to comment.