Fix label position and custom height for vertical ColorSlider (#1524)

* Fix label position and custom height for vertical ColorSlider

* Hide label and value label on vertical color sliders

* Fix lightness gradient

Author: devongovett

packages/@adobe/spectrum-css-temp/components/colorslider/index.css

@@ -29,10 +29,16 @@
   pointer-events: none;
 }
 
-.spectrum-ColorSlider-container {
+.spectrum-ColorSlider-container--horizontal {
   width: var(--spectrum-colorslider-default-length);
 }
 
+.spectrum-ColorSlider-container--vertical {
+  display: flex;
+  flex-direction: column;
+  height: var(--spectrum-colorslider-default-length);
+}
+
 .spectrum-ColorSlider {
   position: relative;
   display: block;
@@ -62,7 +68,7 @@
   display: inline-block;
 
   width: var(--spectrum-colorslider-vertical-width);
-  height: var(--spectrum-colorslider-vertical-default-length);
+  flex: 1;
 
   .spectrum-ColorSlider-handle {
     left: 50%;

packages/@react-aria/color/src/useColorSlider.ts

@@ -56,8 +56,17 @@ export function useColorSlider(props: ColorSliderAriaOptions, state: ColorSlider
     switch (channel) {
       case 'hue':
         return `linear-gradient(to ${to}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
+      case 'lightness': {
+        // We have to add an extra color stop in the middle so that the hue shows up at all.
+        // Otherwise it will always just be black to white.
+        let min = state.getThumbMinValue(0);
+        let max = state.getThumbMaxValue(0);
+        let start = value.withChannelValue(channel, min).toString('css');
+        let middle = value.withChannelValue(channel, (max - min) / 2).toString('css');
+        let end = value.withChannelValue(channel, max).toString('css');
+        return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;
+      }
       case 'saturation':
-      case 'lightness':
       case 'brightness':
       case 'red':
       case 'green':

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

@@ -41,11 +41,6 @@ function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivE
   let defaultLabel = channel[0].toUpperCase() + channel.slice(1);
 
   let labelText = props.label;
-  if (props.label === undefined) {
-    if (!vertical) {
-      labelText = defaultLabel;
-    }
-  }
   let ariaLabel = props['aria-label'] ?? (labelText == null ? defaultLabel : undefined);
 
   let numberFormatter = useNumberFormatter();
@@ -85,12 +80,20 @@ function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivE
     <div
       ref={domRef}
       {...styleProps}
-      className={classNames(styles, 'spectrum-ColorSlider-container')}>
-      <Flex direction="row" justifyContent={alignLabel}>
-        {labelText && <Label {...labelProps}>{labelText}</Label>}
-        {/* TODO: is it on purpose that aria-labelledby isn't passed through? */}
-        {showValueLabel && <Label aria-labelledby={labelProps.id}>{state.getThumbValueLabel(0)}</Label>}
-      </Flex>
+      className={classNames(
+        styles,
+        {
+          'spectrum-ColorSlider-container--horizontal': !vertical,
+          'spectrum-ColorSlider-container--vertical': vertical
+        }
+      )}>
+      {!vertical &&
+        <Flex direction="row" justifyContent={alignLabel}>
+          {labelText && <Label {...labelProps}>{labelText}</Label>}
+          {/* TODO: is it on purpose that aria-labelledby isn't passed through? */}
+          {showValueLabel && <Label aria-labelledby={labelProps.id}>{state.getThumbValueLabel(0)}</Label>}
+        </Flex>
+      }
       <div
         {...groupProps}
         className={classNames(

packages/@react-spectrum/color/stories/ColorSlider.stories.tsx

@@ -54,6 +54,10 @@ storiesOf('ColorSlider', module)
     'custom width',
     () => <ColorSlider defaultValue="#7f0000" channel={'red'} width={300} />
   )
+  .add(
+    'custom height',
+    () => <ColorSlider defaultValue="#7f0000" channel={'red'} orientation="vertical" height={300} />
+  )
   .add(
     'rgba',
     () => {

packages/@react-stately/color/src/useColorSliderState.ts

@@ -70,7 +70,6 @@ export function useColorSliderState(props: ColorSliderStateOptions): ColorSlider
         case 'hue':
           return parseColor(`hsl(${c.getChannelValue('hue')}, 100%, 50%)`);
         case 'lightness':
-          c = c.withChannelValue('saturation', 0);
         case 'brightness':
         case 'saturation':
         case 'red':