Adding ContextualHelp to Slider, RangeSlider, TagGroup, and ColorSlider (#187)

* Adding ContextualHelp to Slider, RangeSlider, TagGroup, and ColorSlider

* removing thumbLabels from stories

---------

Co-authored-by: Kyle Taborski <[email protected]>

Author: ktabors

packages/@react-spectrum/s2/src/ColorSlider.tsx

@@ -22,9 +22,9 @@ import {ColorHandle} from './ColorHandle';
 import {forwardRef, useRef} from 'react';
 import {StyleProps, getAllowedOverrides} from './style-utils' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, SpectrumLabelableProps} from '@react-types/shared';
 
-export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style'>, StyleProps {
+export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style'>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {
   label?: string
 }
 
@@ -65,7 +65,7 @@ function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {
       }, getAllowedOverrides())(renderProps, styles)}>
       {({isDisabled, orientation, state}) => (<>
         {orientation === 'horizontal' && props.label && 
-          <FieldLabel isDisabled={isDisabled}>{props.label}</FieldLabel>
+          <FieldLabel isDisabled={isDisabled} contextualHelp={props.contextualHelp}>{props.label}</FieldLabel>
         }
         {orientation === 'horizontal' && 
           <SliderOutput

packages/@react-spectrum/s2/src/Field.tsx

@@ -138,7 +138,7 @@ function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
         <CenterBaseline
           className={style({
             display: 'inline-flex',
-            contain: 'size',
+            height: 0,
             marginStart: 4
           })}>
           <ContextualHelpContext.Provider

packages/@react-spectrum/s2/src/Slider.tsx

@@ -11,16 +11,16 @@
  */
 
 import {
-  Label,
   Slider as AriaSlider,
   SliderOutput,
   SliderProps as AriaSliderProps,
   SliderThumb,
   SliderTrack
 } from 'react-aria-components';
 import {FormContext, useFormProps} from './Form';
+import {FieldLabel} from './Field';
 import {ReactNode, useRef, forwardRef, RefObject, useContext} from 'react';
-import {FocusableRef, LabelPosition, InputDOMProps, Alignment} from '@react-types/shared';
+import {Alignment, FocusableRef, InputDOMProps, LabelPosition, SpectrumLabelableProps} from '@react-types/shared';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {style, size} from '../style/spectrum-theme' with {type: 'macro'};
 import {StyleProps, focusRing, field, fieldInput, getAllowedOverrides} from './style-utils' with {type: 'macro'};
@@ -30,12 +30,10 @@ import {clamp} from '@react-aria/utils';
 import {mergeStyles} from '../style/runtime';
 import {pressScale} from './pressScale';
 
-export interface SliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'children'>, StyleProps, InputDOMProps {
+export interface SliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'children'>, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, StyleProps, InputDOMProps {
   children?: ReactNode,
   label?: ReactNode,
-  labelAlign?: Alignment,
-  size?: 'S' | 'M' | 'L' | 'XL',
-  labelPosition?: LabelPosition
+  size?: 'S' | 'M' | 'L' | 'XL'
 }
 
 export interface SliderProps<T> extends Omit<AriaSliderProps<T>, 'style' | 'className' | 'orientation'>, StyleProps {
@@ -118,7 +116,7 @@ const labelContainer = style({
   width: 'full',
   gridTemplateAreas: {
     labelPosition: {
-      top: ['sliderLabel . output']
+      top: ['label . output']
     }
   },
   gridTemplateColumns: {
@@ -137,6 +135,10 @@ const labelContainer = style({
         }
       }
     }
+  },
+  '--field-gap': {
+    type: 'paddingBottom',
+    value: 0
   }
 });
 
@@ -347,7 +349,6 @@ export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T
   let formatter = useNumberFormatter(formatOptions);
   let {direction} = useLocale();
 
-
   return (
     <AriaSlider 
       {...props} 
@@ -384,9 +385,14 @@ export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T
         return (
           <>
             <div className={labelContainer({labelPosition, labelAlign})}>
-              <Label className={style({gridArea: {labelPosition: {top: 'sliderLabel'}}})({labelPosition})}>
+              <FieldLabel
+                isDisabled={props.isDisabled}
+                size={props.size}
+                labelPosition={labelPosition}
+                labelAlign={labelAlign}
+                contextualHelp={props.contextualHelp}>
                 {label}
-              </Label>
+              </FieldLabel>
               {labelPosition === 'top' && outputValue}
             </div>
             <div className={style({gridArea: 'input', display: 'inline-flex', alignItems: 'center', gap: {default: 16, size: {L: 20, XL: 24}}})({size})}>

packages/@react-spectrum/s2/src/TagGroup.tsx

@@ -43,7 +43,7 @@ export interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'cla
   children?: ReactNode
 }
 
-export interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | 'style' | 'className'>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'>, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator' | 'contextualHelp'>, StyleProps, Omit<HelpTextProps, 'errorMessage'> {
+export interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | 'style' | 'className'>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'>, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, StyleProps, Omit<HelpTextProps, 'errorMessage'> {
   /** A description for the tag group. */
   description?: ReactNode,
   /**
@@ -146,7 +146,8 @@ function TagGroup<T extends object>(
       <FieldLabel
         size={size}
         labelPosition={labelPosition}
-        labelAlign={labelAlign}>
+        labelAlign={labelAlign}
+        contextualHelp={props.contextualHelp}>
         {label}
       </FieldLabel>
       <div

packages/@react-spectrum/s2/stories/RangeSlider.stories.tsx

@@ -10,6 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
+import {Content, Footer, Heading, Text} from '../src/Content';
+import {ContextualHelp} from '../src/ContextualHelp';
+import {Link} from '../src/Link';
 import {RangeSlider} from '../src';
 import type {Meta} from '@storybook/react';
 
@@ -34,3 +37,34 @@ Example.args = {
   defaultValue: [30, 60],
   thumbLabels: ['start', 'end']
 };
+
+export const ContextualHelpExample = (args: any) => <RangeSlider {...args} />;
+
+ContextualHelpExample.args = {
+  label: 'Range',
+  defaultValue: [30, 60],
+  contextualHelp: (
+    <ContextualHelp>
+      <Heading>What is a ice cream?</Heading>
+      <Content>
+        <Text>
+          A combination of sugar, eggs, milk, and cream is cooked to make
+          a custard base. Then, flavorings are added, and this flavored
+          mixture is carefully churned and frozen to make ice cream.
+        </Text>
+      </Content>
+      <Footer>
+        <Link
+          isStandalone
+          href="https://en.wikipedia.org/wiki/Ice_cream"
+          target="_blank">Learn more about ice cream</Link>
+      </Footer>
+    </ContextualHelp>
+  )
+};
+
+ContextualHelpExample.parameters = {
+  docs: {
+    disable: true
+  }
+};

packages/@react-spectrum/s2/stories/Slider.stories.tsx

@@ -10,6 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
+import {Content, Footer, Heading, Text} from '../src/Content';
+import {ContextualHelp} from '../src/ContextualHelp';
+import {Link} from '../src/Link';
 import {Slider} from '../src/Slider';
 import type {Meta} from '@storybook/react';
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
@@ -70,3 +73,38 @@ FormatOptions.args = {
   formatOptions: {style: 'currency', currency: 'JPY'},
   thumbLabel: 'currency'
 };
+
+export const ContextualHelpExample = (args: any) => (
+  <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
+    <Slider {...args} />
+  </div>
+);
+
+ContextualHelpExample.args = {
+  label: 'Cookies',
+  defaultValue: 30,
+  contextualHelp: (
+    <ContextualHelp>
+      <Heading>What is a ice cream?</Heading>
+      <Content>
+        <Text>
+          A combination of sugar, eggs, milk, and cream is cooked to make
+          a custard base. Then, flavorings are added, and this flavored
+          mixture is carefully churned and frozen to make ice cream.
+        </Text>
+      </Content>
+      <Footer>
+        <Link
+          isStandalone
+          href="https://en.wikipedia.org/wiki/Ice_cream"
+          target="_blank">Learn more about ice cream</Link>
+      </Footer>
+    </ContextualHelp>
+  )
+};
+
+ContextualHelpExample.parameters = {
+  docs: {
+    disable: true
+  }
+};