Tweaks to add sizing and reset control spacing

WordPress · Jul 18, 2022 · 3a9712e · 3a9712e
1 parent 9ecec22
commit 3a9712e
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 8 deletions.
diff --git a/packages/components/src/slider/slider/hook.ts b/packages/components/src/slider/slider/hook.ts
@@ -8,12 +8,11 @@ import { useCallback, useMemo, useState } from '@wordpress/element';
  */
 import * as styles from '../styles';
 import { useContextSystem, WordPressComponentProps } from '../../ui/context';
-import { useControlledValue } from '../../utils/hooks';
-import { useCx } from '../../utils/hooks/use-cx';
 import { useFormGroupContextId } from '../../ui/form-group';
+import { useControlledValue, useCx } from '../../utils/hooks';
+import { interpolate } from '../../utils/interpolate';
 import { parseCSSUnitValue, createCSSUnitValue } from '../../utils/unit-values';
 import { isValueNumeric } from '../../utils/values';
-import { interpolate } from '../../utils/interpolate';
 
 import type { SliderProps } from '../types';
 
@@ -33,14 +32,14 @@ export function useSlider(
 		isFocused: isFocusedProp = false,
 		max = 100,
 		min = 0,
-		size = 'medium',
+		size = 'default',
 		style,
 		value: valueProp,
 		...otherProps
 	} = useContextSystem( props, 'Slider' );
 
 	const [ _value, onChange ] = useControlledValue( {
-		defaultValue,
+		defaultValue: defaultValue || '50',
 		onChange: onChangeProp,
 		value: valueProp,
 	} );

diff --git a/packages/components/src/slider/stories/index.tsx b/packages/components/src/slider/stories/index.tsx
@@ -16,7 +16,14 @@ import { Slider } from '../';
 const meta: ComponentMeta< typeof Slider > = {
 	title: 'Components (Experimental)/Slider',
 	component: Slider,
-	argTypes: { onChange: { action: 'onChange' } },
+	argTypes: {
+		onChange: { action: 'onChange' },
+		size: {
+			control: 'select',
+			options: [ 'small', 'default', 'large' ],
+		},
+		value: { control: { type: null } },
+	},
 	parameters: {
 		controls: { expanded: true, exclude: [ 'heading' ] },
 		docs: { source: { state: 'open' } },

diff --git a/packages/components/src/slider/styles.ts b/packages/components/src/slider/styles.ts
@@ -52,14 +52,15 @@ export const focusedError = css`
 export const slider = css`
 	appearance: none;
 	background-color: transparent;
-	border: 1px solid transparent;
+	border: 0;
 	border-radius: ${ CONFIG.controlBorderRadius };
 	cursor: pointer;
 	display: block;
 	height: ${ CONFIG.controlHeight };
 	max-width: 100%;
 	min-width: 0;
-	padding: ${ space( 1 ) };
+	padding: 0;
+	margin: 0;
 	width: 100%;
 
 	&:focus {
@@ -174,3 +175,15 @@ export const error = css`
 		${ getFocusBoxShadow( errorBoxShadow ) };
 	}
 `;
+
+export const large = css`
+	/*
+	 * Uses hardcoded 40px height to match design goal instead of
+	 * CONFIG.controlHeightLarge which is only 36px.
+	 */
+	height: 40px;
+`;
+
+export const small = css`
+	height: ${ CONFIG.controlHeightSmall };
+`;
diff --git a/packages/components/src/slider/types.ts b/packages/components/src/slider/types.ts
@@ -19,6 +19,12 @@ export type SliderProps = {
 	 * Callback function when the `value` is committed.
 	 */
 	onChange?: ( value: string ) => void;
+	/**
+	 * Toggles which sized height the slider is rendered at.
+	 *
+	 * @default 'default'
+	 */
+	size?: 'small' | 'default' | 'large';
 	/**
 	 * The Slider's current value.
 	 */