Create v6 Slider with Styled System (#404)

* Move v5 Slider to "Legacy" export

* Add v6 Slider component rebuilt with Styled System

* Add v6 Slider documentation

* Prefer nullish coalescing operator

catalog/index.js

@@ -67,10 +67,11 @@ import {
 	theme,
 } from '../index';
 import {
-	Modal as V6Modal,
 	Button as V6Button,
 	SegmentedButtonGroup,
 	Dropdown as V6Dropdown,
+	Modal as V6Modal,
+	Slider as V6Slider,
 } from '../index-v6';
 import { GroupSelector, LargeGroupSelector } from '../components/group-selector';
 import { ShareDialog } from '../components/share-dialog';
@@ -904,17 +905,26 @@ const pages = [
 				path: '/slider/variations',
 				title: 'Slider Variations',
 				content: pageLoader(() => import('./slider/variations.md')),
-				imports: {
-					Slider,
-					DocgenTable,
-				},
+				imports: { Slider, DocgenTable },
 			},
 			{
 				path: 'slider/documentation',
 				title: 'Slider Documentation',
 				content: pageLoader(() => import('./slider/documentation.md')),
 				imports: { Slider, DocgenTable },
 			},
+			{
+				path: '/slider/variations-v6',
+				title: 'v6 Slider Variations',
+				content: pageLoader(() => import('./slider/variations-v6.md')),
+				imports: { Slider: V6Slider, DocgenTable },
+			},
+			{
+				path: 'slider/documentation-v6',
+				title: 'v6 Slider Documentation',
+				content: pageLoader(() => import('./slider/documentation-v6.md')),
+				imports: { Slider: V6Slider, DocgenTable },
+			},
 		],
 	},
 	{

catalog/slider/documentation-v6.md

@@ -0,0 +1,11 @@
+For the next major version of Styled UI, the Slider component has been rebuilt to use Styled System primitives.
+
+You can opt-in to the new API now by importing `{ Slider } from '@faithlife/styled-ui/v6'`. When v6 is released, the `/v6` entrypoint will continue to be supported with a deprecation warning until v7 is released.
+
+This documentation is automatically generated from JSDoc comments.
+
+```react
+noSource: true
+---
+<DocgenTable component={Slider} />
+```

catalog/slider/variations-v6.md

@@ -0,0 +1,108 @@
+For the next major version of Styled UI, the Slider component has been rebuilt to use Styled System primitives.
+
+You can opt-in to the new API now by importing `{ Slider } from '@faithlife/styled-ui/v6'`. When v6 is released, the `/v6` entrypoint will continue to be supported with a deprecation warning until v7 is released.
+
+## Slider
+
+```react
+showSource: true
+state: {}
+---
+<div style={{background: "#fff", padding: 20}}>
+	<Slider value={1} stopCount={5} />
+	<Slider value={1} stopCount={5} />
+</div>
+```
+
+### With minValue / maxValue
+
+```react
+showSource: true
+state: {}
+---
+<div style={{background: "#fff", padding: 20}}>
+	<Slider value={2} minValue={0} maxValue={2} stopCount={5} />
+	<Slider value={3} minValue={1} maxValue={3} stopCount={5} />
+	<Slider value={4} minValue={2} maxValue={4} stopCount={5} />
+</div>
+```
+
+### With labels
+
+```react
+showSource: true
+state: {}
+---
+<div style={{background: "#fff", padding: 20}}>
+	<Slider value={1} stopCount={5} labels={['Admins', 'Moderators', 'Members', 'Followers', 'Public']} disabled />
+	<Slider value={1} stopCount={5} labels={['One', 'Two', 'Three', 'Four', 'Five']}/>
+	<Slider value={1} minValue={1} maxValue={3} stopCount={5} labels={['', 'Min', '', 'Max', '']}/>
+</div>
+```
+
+### Callback props: onStop vs onSlide
+
+If your slider will be making external API calls, you may wish to call that only on the `onStop` callback, when the user has finished sliding.
+If you want to have incremental updates while the slider is moving, such as to keep multiple sliders in sync, you may want to use the `onSlide` callback prop.
+
+```react
+showSource: true
+state: { value: 1 }
+---
+<div style={{background: "#fff", padding: 20}}>
+	onStop:
+	<Slider
+		value={state.value}
+		stopCount={5}
+		onStop={function (value) {setState({value: value})}}
+	/>
+	onSlide:
+	<Slider
+		value={state.value}
+		stopCount={5}
+		onSlide={function (value) {setState({value: value})}}
+	/>
+</div>
+```
+
+### hideAvailableStops
+
+For sliders with many stops, consider using the `hideAvailableStops` option.
+
+```react
+showSource: true
+state: { value: 50, labels: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68, 70, 72, 74, 76, 78, 80, 82, 84, 86, 88, 90, 92, 94, 96, 98, 100] }
+---
+<div style={{background: "#fff", padding: 20}}>
+	<div>Opacity: {state.value * 2}</div>
+	<Slider
+		value={state.value}
+		onStop={function (value) {setState({value: value})}}
+		stopCount={51}
+		labels={state.labels}
+	/>
+	<Slider
+		hideAvailableStops
+		value={state.value}
+		onStop={function (value) {setState({value: value})}}
+		stopCount={51}
+		labels={state.labels}
+	/>
+	<img src="https://www.bellinghamherald.com/news/local/l6de4z/picture53186905/alternates/LANDSCAPE_1140/Faithlife%201" alt="Faithlife campus" style={{ maxWidth: '100%', opacity: (state.value * 2) / 100 }} />
+</div>
+```
+
+### Note on background colors
+
+The slider component expects a white background to create the sections of inactive track that cover the blue gradient. If your slider is not on a white background, use the `backgroundColor` (or `bg`) prop to indicate the correct background color.
+
+```react
+showSource: true
+state: {}
+---
+<div style={{background: "#8fdb6b", padding: 20}}>
+	<Slider value={1} maxValue={3} stopCount={5} />
+	<Slider backgroundColor="#8fdb6b" value={1} maxValue={3} stopCount={5} />
+	<Slider bg="#8fdb6b" value={1} maxValue={3} stopCount={5} />
+</div>
+```

components/slider/component.jsx

@@ -34,16 +34,12 @@ export class Slider extends PureComponent {
 		stopCount: PropTypes.number.isRequired,
 		/** Useful for sliders with many stops */
 		hideAvailableStops: PropTypes.bool,
-		/** Style overrides */
-		styleOverrides: PropTypes.shape({
-			backgroundColor: PropTypes.string,
-		}),
+		...Box.propTypes,
 	};
 
 	static defaultProps = {
 		hideAvailableStops: false,
 		labels: [],
-		styleOverrides: {},
 	};
 
 	state = {
@@ -267,7 +263,6 @@ export class Slider extends PureComponent {
 			onStop,
 			stopCount,
 			hideAvailableStops,
-			styleOverrides,
 			disabled,
 			...props
 		} = this.props;
@@ -308,7 +303,7 @@ export class Slider extends PureComponent {
 					<TrackPart
 						left={`${getPercentage(activeStopIndex, stopCount - 1)}%`}
 						right={0}
-						bg={(styleOverrides && styleOverrides.backgroundColor) || '#fff'}
+						bg={props?.backgroundColor ?? props?.bg ?? '#fff'}
 					/>
 					<TrackPart
 						bg="#ebebeb"
@@ -330,7 +325,6 @@ export class Slider extends PureComponent {
 								}
 								minimumAvailable={index === minValue && minValue > 0}
 								key={index}
-								styleOverrides={styleOverrides}
 							/>
 						))}
 					</Styled.StopContainer>
@@ -357,12 +351,11 @@ export class Slider extends PureComponent {
 const TrackPart = ({ children, left, right, ...props }) => (
 	<Box
 		position="absolute"
-		left={0}
-		right={0}
+		left={left ?? 0}
+		right={right ?? 0}
 		height="100%"
 		overflow="hidden"
 		borderRadius={100}
-		style={{ left, right }}
 		{...props}
 	>
 		{children}

components/slider/index.js

@@ -1 +1,2 @@
+export { Slider as LegacySlider } from './legacy-component';
 export { Slider } from './component';