Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[UI Kit] style(uikit): Slider disabled state #24

Merged
merged 1 commit into from
Mar 22, 2021
Merged

[UI Kit] style(uikit): Slider disabled state #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 10 additions & 20 deletions packages/pancake-uikit/src/components/Slider/Slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
import React, { ChangeEvent } from "react";
import styled from "styled-components";
import { Box, BoxProps } from "../Box";
import { BunnySlider, BarBackground, BarProgress, StyledInput, SliderLabel } from "./styles";
import BunnyButt from "./svg/BunnyButt";
import { Box } from "../Box";
import { BunnySlider, BarBackground, BarProgress, BunnyButt, StyledInput, SliderLabel } from "./styles";
import SliderProps from "./types";

const StyledSlider = styled(Box)<{ isDisabled: SliderProps["isDisabled"] & BoxProps }>`
opacity: ${({ isDisabled }) => (isDisabled ? ".5" : 1)};
`;

// We need to adjust the offset as the percentage increases, as 100% really is 100% - label width.
// The number 10 is arbitrary, but seems to work...
const LABEL_OFFSET = 10;
Expand All @@ -21,7 +15,7 @@ const Slider: React.FC<SliderProps> = ({
onValueChanged,
valueLabel,
step = "any",
isDisabled = false,
disabled = false,
...props
}) => {
const handleChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
Expand All @@ -30,19 +24,15 @@ const Slider: React.FC<SliderProps> = ({

const progressPercentage = (value / max) * 100;
const isMax = value === max;

const progressWidth = isMax ? "calc(100% - 16px)" : `${progressPercentage}%`;
const labelOffset = progressPercentage - progressPercentage / LABEL_OFFSET;

return (
<StyledSlider position="relative" height="48px" isDisabled={isDisabled} {...props}>
<BunnyButt style={{ position: "absolute" }} />
<Box position="relative" height="48px" {...props}>
<BunnyButt disabled={disabled} />
<BunnySlider>
<BarBackground />
<BarProgress
isMax={isMax}
progress={progressPercentage}
style={{ width: isMax ? "calc(100% - 16px)" : `${progressPercentage}%` }}
/>
<BarBackground disabled={disabled} />
<BarProgress style={{ width: progressWidth }} disabled={disabled} />
<StyledInput
name={name}
type="range"
Expand All @@ -52,11 +42,11 @@ const Slider: React.FC<SliderProps> = ({
step={step}
onChange={handleChange}
isMax={isMax}
disabled={isDisabled}
disabled={disabled}
/>
</BunnySlider>
{valueLabel && <SliderLabel progress={labelOffset}>{valueLabel}</SliderLabel>}
</StyledSlider>
</Box>
);
};

Expand Down
4 changes: 2 additions & 2 deletions packages/pancake-uikit/src/components/Slider/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default {

const Col = styled(Flex)`
flex-direction: column;
width: 300px;
width: 420px;
`;

const SliderVariant = ({ initialValue }: { initialValue: number }) => {
Expand Down Expand Up @@ -53,7 +53,7 @@ export const Variants: React.FC = () => {

return (
<Col>
<Slider name="sliderdisabled" value={value} onValueChanged={handleChange} min={1} max={20} isDisabled />
<Slider name="sliderdisabled" value={value} onValueChanged={handleChange} min={1} max={20} disabled />
</Col>
);
};
Expand Down
65 changes: 40 additions & 25 deletions packages/pancake-uikit/src/components/Slider/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import styled from "styled-components";
import Text from "../Text/Text";
import bunnyHeadMain from "./svg/bunnyhead-main.svg";
import bunnyHeadMax from "./svg/bunnyhead-max.svg";
import bunnyButt from "./svg/bunnybutt.svg";

interface SliderLabelProps {
progress: number;
Expand All @@ -12,6 +13,29 @@ interface StyledInputProps extends InputHTMLAttributes<HTMLInputElement> {
isMax: boolean;
}

interface DisabledProp {
disabled?: boolean;
}

const getCursorStyle = ({ disabled = false }: DisabledProp) => {
return disabled ? "not-allowed" : "cursor";
};

const getBaseThumbStyles = ({ isMax, disabled }: StyledInputProps) => `
-webkit-appearance: none;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

appearance: none; should be enough here

background-image: url(${isMax ? bunnyHeadMax : bunnyHeadMain});
cursor: ${getCursorStyle};
width: 24px;
height: 32px;
filter: ${disabled ? "grayscale(100%)" : "none"};
transform: translate(-2px, -2px);
transition: 200ms transform;

&:hover {
transform: ${disabled ? "scale(1) translate(-2px, -2px)" : "scale(1.1) translate(-3px, -3px)"};
}
`;

export const SliderLabel = styled(Text)<SliderLabelProps>`
bottom: 0;
font-size: 12px;
Expand All @@ -20,39 +44,30 @@ export const SliderLabel = styled(Text)<SliderLabelProps>`
margin-left: 16px; // offset the bunny butt width
`;

export const BunnyButt = styled.img`
export const BunnyButt = styled.div<DisabledProp>`
background: url(${bunnyButt}) no-repeat;
height: 32px;
filter: ${({ disabled }) => (disabled ? "grayscale(100%)" : "none")};
position: absolute;
width: 15px;
`;

export const BunnySlider = styled.div`
position: absolute;
left: 14px;
width: 100%;
`;

const getBaseThumbStyles = ({ isMax }: StyledInputProps) => `
-webkit-appearance: none;
background-image: url(${isMax ? bunnyHeadMax : bunnyHeadMain});
width: 24px;
height: 32px;
cursor: pointer;
transform: translate(-2px, -2px);
transition: 0.1s all;

:hover {
transform: scale(1.1) translate(-3px, -3px);
}
width: calc(100% - 14px);
`;

export const StyledInput = styled.input<StyledInputProps>`
cursor: pointer;
cursor: ${getCursorStyle};
height: 32px;
position: relative;

::-webkit-slider-thumb {
-webkit-appearance: none;
${getBaseThumbStyles}
}

::-moz-range-thumb {
${getBaseThumbStyles}

Expand All @@ -65,18 +80,18 @@ export const StyledInput = styled.input<StyledInputProps>`
}
`;

export const BarBackground = styled.div`
position: absolute;
width: 100%;
export const BarBackground = styled.div<DisabledProp>`
background-color: ${({ theme, disabled }) => theme.colors[disabled ? "textDisabled" : "inputSecondary"]};
height: 2px;
position: absolute;
top: 18px;
background-color: ${({ theme }) => theme.colors.inputSecondary};
width: 100%;
`;

export const BarProgress = styled.div<{ progress: number; isMax: boolean }>`
position: absolute;
export const BarProgress = styled.div<DisabledProp>`
background-color: ${({ theme }) => theme.colors.primary};
filter: ${({ disabled }) => (disabled ? "grayscale(100%)" : "none")};
height: 10px;
position: absolute;
top: 18px;

background: ${({ theme }) => theme.colors.primary};
`;
27 changes: 0 additions & 27 deletions packages/pancake-uikit/src/components/Slider/svg/BunnyButt.tsx
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion packages/pancake-uikit/src/components/Slider/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@ export default interface SliderProps extends BoxProps {
step?: number | "any";
onValueChanged: (newValue: number) => void;
valueLabel?: string;
isDisabled?: boolean;
disabled?: boolean;
}