add/fix types

packages/components/src/segmented-control/component.tsx

@@ -16,20 +16,24 @@ import { useMergeRefs } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { contextConnect, useContextSystem } from '../ui/context';
+import {
+	contextConnect,
+	useContextSystem,
+	PolymorphicComponentProps,
+} from '../ui/context';
 import { View } from '../view';
 import * as styles from './styles';
 import { useUpdateEffect } from '../utils/hooks';
 import Backdrop from './segmented-control-backdrop';
 import Button from './segmented-control-button';
+import type { SegmentedControlProps } from './types';
 
 const noop = () => {};
 
-/**
- * @param {import('./types').SegmentedControlProps} props
- * @param {import('react').Ref<any>}                forwardedRef
- */
-function SegmentControl( props, forwardedRef ) {
+function SegmentControl(
+	props: PolymorphicComponentProps< SegmentedControlProps, 'input' >,
+	forwardedRef: import('react').Ref< any >
+) {
 	const {
 		className,
 		baseId,

packages/components/src/segmented-control/segmented-control-backdrop.tsx

@@ -9,8 +9,11 @@ import { useState, useEffect, memo } from '@wordpress/element';
 import type { SegmentedControlBackdropProps } from './types';
 import { BackdropView } from './styles';
 
-function SegmentedControlBackdrop( props: SegmentedControlBackdropProps ) {
-	const { containerRef, containerWidth, state } = props;
+function SegmentedControlBackdrop( {
+	containerRef,
+	containerWidth,
+	state,
+}: SegmentedControlBackdropProps ) {
 	const [ left, setLeft ] = useState( 0 );
 	const [ width, setWidth ] = useState( 0 );
 	const [ canAnimate, setCanAnimate ] = useState( false );

packages/components/src/segmented-control/segmented-control-button.tsx

@@ -57,9 +57,11 @@ function SegmentedControlButton( allProps: SegmentedControlButtonProps ) {
 	);
 }
 
-const SegmentedControlSeparator = memo( ( { isActive: boolean } ) => {
-	const classes = cx( isActive && styles.separatorActive );
-	return <SeparatorView aria-hidden className={ classes } />;
-} );
+const SegmentedControlSeparator = memo(
+	( { isActive }: { isActive: boolean } ) => {
+		const classes = cx( isActive && styles.separatorActive );
+		return <SeparatorView aria-hidden className={ classes } />;
+	}
+);
 
 export default memo( SegmentedControlButton );

packages/components/src/segmented-control/styles.ts

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/core';
+import { css } from 'emotion';
 import styled from '@emotion/styled';
 
 /**
  * Internal dependencies
  */
-import { CONFIG, COLORS } from '../utils';
+import { CONFIG, COLORS, reduceMotion } from '../utils';
 
 export const SegmentedControl = css`
 	background: ${ COLORS.ui.background };
@@ -20,7 +20,7 @@ export const SegmentedControl = css`
 	padding: 1px;
 	position: relative;
 	transition: all ${ CONFIG.transitionDurationFastest } linear;
-
+	${ reduceMotion( 'transition' ) }
 	&:hover {
 		border-color: ${ COLORS.ui.borderHover };
 	}
@@ -47,6 +47,7 @@ export const BackdropView = styled.div`
 	left: 0;
 	position: absolute;
 	transition: all ${ CONFIG.transitionDurationFast } ease;
+	${ reduceMotion( 'transition' ) }
 	z-index: 1;
 `;
 
@@ -79,6 +80,7 @@ export const ButtonView = styled.button`
 	text-align: center;
 	transition: background ${ CONFIG.transitionDurationFast } linear,
 		color ${ CONFIG.transitionDurationFast } linear, font-weight 60ms linear;
+	${ reduceMotion( 'transition' ) }
 	user-select: none;
 	width: 100%;
 	z-index: 2;
@@ -94,10 +96,10 @@ export const ButtonView = styled.button`
 
 export const ButtonContentView = styled.div`
 	font-size: ${ CONFIG.fontSize };
-	left: 50%;
 	line-height: 1;
 	position: absolute;
 	top: 50%;
+	left: 50%;
 	transform: translate( -50%, -50% );
 `;
 
@@ -113,6 +115,7 @@ export const SeparatorView = styled.div`
 	right: 0;
 	top: 4px;
 	transition: background ${ CONFIG.transitionDuration } linear;
+	${ reduceMotion( 'transition' ) }
 	width: 1px;
 `;
 
@@ -128,10 +131,22 @@ export const LabelPlaceholderView = styled.div`
 	visibility: hidden;
 `;
 
-export const large = css`
-	min-height: ${ CONFIG.controlHeightLarge };
+export const xSmall = css`
+	min-height: ${ CONFIG.controlHeightXSmall };
 `;
 
 export const small = css`
 	min-height: ${ CONFIG.controlHeightSmall };
 `;
+
+export const medium = css`
+	min-height: ${ CONFIG.controlHeight };
+`;
+
+export const large = css`
+	min-height: ${ CONFIG.controlHeightLarge };
+`;
+
+export const xLarge = css`
+	min-height: ${ CONFIG.controlHeightXLarge };
+`;