Skip to content

Commit

Permalink
Updates from review comments
Browse files Browse the repository at this point in the history
  • Loading branch information
Titani committed Jan 25, 2021
1 parent b3b832d commit ad798b5
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 58 deletions.
41 changes: 25 additions & 16 deletions packages/react-core/src/components/Slider/Slider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { useState } from 'react';
import styles from '@patternfly/react-styles/css/components/Slider/slider';
import { css } from '@patternfly/react-styles';
import { SliderStep } from './SliderStep';
import { InputGroup, InputGroupText } from '../InputGroup';
import { TextInput } from '../TextInput';

export interface SliderStepObject {
/** Value of the step. This value is a percentage of the slider where the tick is drawn. */
Expand Down Expand Up @@ -33,7 +35,7 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
/** Label that is place after the input field */
inputLabel?: string | number;
/** Position of the input */
inputPosition?: 'aboveThumb' | 'left';
inputPosition?: 'aboveThumb' | 'right';
/** Flag indicating input is disabled */
isInputDisabled?: boolean;
/** Value input callback. Called when enter is hit while in input filed or focus shifts from input field */
Expand All @@ -54,11 +56,11 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
steps,
isDiscrete = false,
isInputVisible = false,
inputValue,
inputValue = 0,
inputLabel,
inputAriaLabel = 'Slider value input',
thumbAriaLabel = 'Value',
inputPosition = 'left',
inputPosition = 'right',
isInputDisabled,
onChange,
onValueChange,
Expand All @@ -85,8 +87,8 @@ export const Slider: React.FunctionComponent<SliderProps> = ({

const style = { '--pf-c-slider--value': `${value}%` } as React.CSSProperties;

const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
setLocalInputValue(Number(event.currentTarget.value));
const onChangeHandler = (value: string) => {
setLocalInputValue(Number(value));
};

const handleKeyPressOnInput = (event: React.KeyboardEvent) => {
Expand Down Expand Up @@ -236,11 +238,11 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
}
};

const inputGroup = (
<div className={css(styles.inputGroup)}>
<input
const displayInput = () => {
const textInput = (
<TextInput
className={css(styles.formControl)}
disabled={isInputDisabled}
isDisabled={isInputDisabled}
type="number"
value={localInputValue}
aria-label={inputAriaLabel}
Expand All @@ -250,9 +252,18 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
onFocus={onInputFocus}
onBlur={onBlur}
/>
{inputLabel && <span className={css(styles.inputGroupText, 'pf-m-plain')}>{inputLabel}</span>}
</div>
);
);
if (inputLabel) {
return (
<InputGroup>
{textInput}
<InputGroupText className={css('pf-m-plain')}>{inputLabel}</InputGroupText>
</InputGroup>
);
} else {
return textInput;
}
};

return (
<div className={css(styles.slider, className)} style={style} {...props}>
Expand Down Expand Up @@ -289,12 +300,10 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
onClick={onThumbClick}
/>
{isInputVisible && inputPosition === 'aboveThumb' && (
<div className={css(styles.sliderValue, styles.modifiers.floating)}>
<div className={css(styles.inputGroup)}>{inputGroup}</div>
</div>
<div className={css(styles.sliderValue, styles.modifiers.floating)}>{displayInput()}</div>
)}
</div>
{isInputVisible && inputPosition === 'left' && <div className={css(styles.sliderValue)}>{inputGroup}</div>}
{isInputVisible && inputPosition === 'right' && <div className={css(styles.sliderValue)}>{displayInput()}</div>}
{rightActions && <div className={css(styles.sliderActions)}>{rightActions}</div>}
</div>
);
Expand Down
120 changes: 81 additions & 39 deletions packages/react-core/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,21 +41,51 @@ exports[`slider renders continuous slider 1`] = `
<div
className="pf-c-slider__value"
>
<div
className="pf-c-input-group"
<TextInput
aria-label="Slider value input"
className="pf-c-form-control"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="number"
value={50}
>
<input
<TextInputBase
aria-label="Slider value input"
className="pf-c-form-control"
innerRef={null}
isDisabled={false}
isLeftTruncated={false}
isReadOnly={false}
isRequired={false}
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="number"
validated="default"
value={50}
/>
</div>
>
<input
aria-invalid={false}
aria-label="Slider value input"
className="pf-c-form-control pf-c-form-control"
disabled={false}
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
readOnly={false}
required={false}
type="number"
value={50}
/>
</TextInputBase>
</TextInput>
</div>
</div>
</Slider>
Expand Down Expand Up @@ -286,30 +316,6 @@ exports[`slider renders slider with input 1`] = `
tabIndex={0}
/>
</div>
<div
className="pf-c-slider__value"
>
<div
className="pf-c-input-group"
>
<input
aria-label="Slider value input"
className="pf-c-form-control"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="number"
value={50}
/>
<span
className="pf-c-input-group__text pf-m-plain"
>
%
</span>
</div>
</div>
</div>
</Slider>
`;
Expand Down Expand Up @@ -356,13 +362,11 @@ exports[`slider renders slider with input above thumb 1`] = `
<div
className="pf-c-slider__value pf-m-floating"
>
<div
className="pf-c-input-group"
>
<InputGroup>
<div
className="pf-c-input-group"
>
<input
<TextInput
aria-label="Slider value input"
className="pf-c-form-control"
onBlur={[Function]}
Expand All @@ -372,14 +376,52 @@ exports[`slider renders slider with input above thumb 1`] = `
onKeyDown={[Function]}
type="number"
value={50}
/>
<span
className="pf-c-input-group__text pf-m-plain"
>
%
</span>
<TextInputBase
aria-label="Slider value input"
className="pf-c-form-control"
innerRef={null}
isDisabled={false}
isLeftTruncated={false}
isReadOnly={false}
isRequired={false}
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
type="number"
validated="default"
value={50}
>
<input
aria-invalid={false}
aria-label="Slider value input"
className="pf-c-form-control pf-c-form-control"
disabled={false}
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
readOnly={false}
required={false}
type="number"
value={50}
/>
</TextInputBase>
</TextInput>
<InputGroupText
className="pf-m-plain"
>
<span
className="pf-c-input-group__text pf-m-plain"
>
%
</span>
</InputGroupText>
</div>
</div>
</InputGroup>
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions packages/react-core/src/components/Slider/examples/Slider.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ class DiscreteInput extends React.Component {

render() {
const step = this.steps.find(step => step.value === this.state.value);
const displayValue = step ? step.label : undefined;
const displayValue = step ? step.label : 0;
return (
<>
<Text component={TextVariants.h3}>Slider Value is: {displayValue}</Text>
Expand Down Expand Up @@ -138,7 +138,7 @@ class ValueInput extends React.Component {

this.onValueChangeDiscrete = value => {
const step = this.stepsDiscrete.find(step => step.value === value);
let inputValue = step ? step.label : undefined;
let inputValue = step ? step.label : 0;
inputValue = Number(inputValue);
this.setState({
valueDiscrete: value,
Expand All @@ -148,7 +148,7 @@ class ValueInput extends React.Component {

this.onValueChangePercent = value => {
const step = this.stepsPercent.find(step => step.value === value);
let inputValue = step ? step.label.slice(0, -1) : undefined;
let inputValue = step ? step.label.slice(0, -1) : 0;
inputValue = Number(inputValue);
this.setState({
valuePercent: value,
Expand Down

0 comments on commit ad798b5

Please sign in to comment.