[PAY-1070] Update TabSlider/SegmentedControl slider size on resize (#3044)

Author: rickyrombo

packages/stems/package-lock.json

@@ -98,6 +98,7 @@
   ],
   "dependencies": {
     "@juggle/resize-observer": "3.3.1",
+    "react-merge-refs": "2.0.1",
     "react-perfect-scrollbar": "1.5.8",
     "react-use": "15.3.8",
     "react-use-measure": "2.1.1"

packages/stems/package.json

@@ -20,12 +20,23 @@
   font-family: var(--font-family);
   font-size: 15px;
   font-weight: var(--font-demi-bold);
+  position: relative;
 }
 
 .tab.isMobile {
   padding: var(--unit-1) var(--unit-3);
 }
 
+.tab > input {
+  opacity: 0;
+  position: absolute;
+  cursor: pointer;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
 .separator {
   opacity: 1;
   width: 1px;
@@ -50,6 +61,7 @@
 
 .containerFullWidth {
   width: 100%;
+  min-width: fit-content;
 }
 
 .tabFullWidth {

packages/stems/src/components/SegmentedControl/SegmentedControl.module.css

@@ -9,11 +9,11 @@ export default {
   argTypes: {}
 }
 
-const Template: Story<SegmentedControlProps> = (args) => (
+const Template: Story<SegmentedControlProps<string>> = (args) => (
   <SegmentedControl {...args} />
 )
 
-const options: Option[] = [
+const options: Option<string>[] = [
   {
     key: 'a',
     text: 'Long Option A'
@@ -36,7 +36,7 @@ let selectedOption = ''
 
 const handleOptionSelect = (key: string) => (selectedOption = key)
 
-const baseProps: SegmentedControlProps = {
+const baseProps: SegmentedControlProps<string> = {
   options,
   selected: selectedOption,
   onSelectOption: handleOptionSelect

packages/stems/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -1,20 +1,25 @@
 import { createRef, Fragment, useState, useEffect, useRef } from 'react'
 
 import cn from 'classnames'
+import { mergeRefs } from 'react-merge-refs'
 import { useSpring, animated } from 'react-spring'
+import useMeasure, { RectReadOnly } from 'react-use-measure'
 
 import styles from './SegmentedControl.module.css'
 import { SegmentedControlProps } from './types'
 
-export const SegmentedControl = (props: SegmentedControlProps) => {
-  const optionRefs = useRef<Array<React.RefObject<HTMLDivElement>>>(
-    props.options.map(() => createRef())
+export const SegmentedControl = <T extends string>(
+  props: SegmentedControlProps<T>
+) => {
+  const optionRefs = useRef(
+    props.options.map((_) => createRef<HTMLLabelElement>())
   )
   const [selected, setSelected] = useState(props.options[0].key)
 
+  const lastBounds = useRef<RectReadOnly>()
   const selectedOption = props.selected || selected
 
-  const onSetSelected = (option: string) => {
+  const onSetSelected = (option: T) => {
     // Call props function if controlled
     if (props.onSelectOption) props.onSelectOption(option)
     setSelected(option)
@@ -24,6 +29,12 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
     to: { left: '0px', width: '0px' }
   }))
 
+  // Watch for resizes and repositions so that we move and resize the slider appropriately
+  const [selectedRef, bounds] = useMeasure({
+    offsetSize: true,
+    polyfill: ResizeObserver
+  })
+
   useEffect(() => {
     let selectedRefIdx = props.options.findIndex(
       (option) => option.key === selectedOption
@@ -34,14 +45,19 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
       selectedRefIdx
     ]?.current ?? { clientWidth: 0, offsetLeft: 0 }
 
-    setAnimatedProps({ to: { left: `${left}px`, width: `${width}px` } })
+    setAnimatedProps({
+      to: { left: `${left}px`, width: `${width}px` },
+      immediate: bounds !== lastBounds.current // Don't animate on moves/resizes
+    })
+    lastBounds.current = bounds
   }, [
     props.options,
     selectedOption,
     props.selected,
     setAnimatedProps,
     selected,
-    optionRefs
+    optionRefs,
+    bounds
   ])
 
   return (
@@ -51,20 +67,35 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
         [styles.isMobile]: props.isMobile
       })}
     >
-      <animated.div className={styles.tabBackground} style={animatedProps} />
+      <animated.div
+        className={styles.tabBackground}
+        style={animatedProps}
+        role='radiogroup'
+        aria-label={props.label}
+      />
       {props.options.map((option, idx) => {
         return (
           <Fragment key={option.key}>
-            <div
-              ref={optionRefs.current[idx]}
+            <label
+              ref={
+                option.key === selectedOption
+                  ? mergeRefs([optionRefs.current[idx], selectedRef])
+                  : optionRefs.current[idx]
+              }
               className={cn(styles.tab, {
                 [styles.tabFullWidth]: !!props.fullWidth,
                 [styles.isMobile]: props.isMobile
               })}
-              onClick={() => onSetSelected(option.key)}
             >
+              <input
+                type='radio'
+                checked={option.key === selectedOption}
+                onChange={() => {
+                  onSetSelected(option.key)
+                }}
+              />
               {option.text}
-            </div>
+            </label>
             <div
               className={cn(styles.separator, {
                 [styles.invisible]:

packages/stems/src/components/SegmentedControl/SegmentedControl.tsx

@@ -1,17 +1,17 @@
-export type Option = {
-  key: string
+export type Option<T> = {
+  key: T
   text: string
 }
 
-export type SegmentedControlProps = {
+export type SegmentedControlProps<T extends string> = {
   // The options to display for the tab slider
-  options: Array<Option>
+  options: Array<Option<T>>
 
   // References the key of an available option that is selected
   selected: string
 
   // Called on select option
-  onSelectOption: (key: string) => void
+  onSelectOption: (key: T) => void
 
   fullWidth?: boolean
 
@@ -31,4 +31,9 @@ export type SegmentedControlProps = {
    * Styles applied only to active cell text
    */
   activeTextClassName?: string
+
+  /**
+   * The label for the radio group
+   */
+  label?: string
 }

packages/stems/src/components/SegmentedControl/types.ts

@@ -1,13 +1,12 @@
 import { useState, useMemo, useEffect, useCallback } from 'react'
 
 import { PlayableType, ID, Name, Track, encodeHashId } from '@audius/common'
-import { Modal, Button, ButtonType } from '@audius/stems'
+import { Modal, Button, ButtonType, SegmentedControl } from '@audius/stems'
 import cn from 'classnames'
 import { connect } from 'react-redux'
 import { Dispatch } from 'redux'
 
 import { useRecord, make } from 'common/store/analytics/actions'
-import TabSlider from 'components/data-entry/TabSlider'
 import { AppState } from 'store/types'
 import { BASE_GA_URL } from 'utils/route'
 
@@ -186,7 +185,7 @@ const EmbedModal = ({ isOpen, kind, id, metadata, close }: EmbedModalProps) => {
           {metadata && (metadata as Track).track_id && (
             <div className={styles.panel}>
               <div className={styles.title}>{messages.playerSize}</div>
-              <TabSlider
+              <SegmentedControl
                 options={tabOptions}
                 selected={size}
                 onSelectOption={(size) => setSize(size)}