Adding missing support for disabled state in color hooks docs (#6278)

adobe · Apr 30, 2024 · e1f3c14 · e1f3c14 · rspbot · Apr 30, 2024
1 parent e352bda
commit e1f3c14
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/packages/@react-aria/color/docs/useColorSlider.mdx b/packages/@react-aria/color/docs/useColorSlider.mdx
@@ -105,6 +105,7 @@ const TRACK_THICKNESS = 28;
 const THUMB_SIZE = 20;
 
 function ColorSlider(props) {
+  let {isDisabled} = props;
   let {locale} = useLocale();
   let state = useColorSliderState({...props, locale});
   let trackRef = React.useRef(null);
@@ -145,20 +146,21 @@ function ColorSlider(props) {
           ...trackProps.style,
           height: TRACK_THICKNESS,
           width: '100%',
-          borderRadius: 4
+          borderRadius: 4,
+          background: isDisabled ? 'rgb(142, 142, 142)' : trackProps.style.background
         }}>
         <div
           {...thumbProps}
           style={{
             ...thumbProps.style,
             top: TRACK_THICKNESS / 2,
-            border: '2px solid white',
+            background: isDisabled ? 'rgb(142, 142, 142)' : state.getDisplayColor().toString('css'),
+            border: `2px solid ${isDisabled ? 'rgb(142, 142, 142)' : 'white'}`,
             boxShadow: '0 0 0 1px black, inset 0 0 0 1px black',
             width: isFocusVisible ? TRACK_THICKNESS + 4 : THUMB_SIZE,
             height: isFocusVisible ? TRACK_THICKNESS + 4 : THUMB_SIZE,
             borderRadius: '50%',
-            boxSizing: 'border-box',
-            background: state.getDisplayColor().toString('css')
+            boxSizing: 'border-box'
           }}>
           <input ref={inputRef} {...inputProps} {...focusProps} />
         </div>

diff --git a/packages/@react-aria/color/docs/useColorWheel.mdx b/packages/@react-aria/color/docs/useColorWheel.mdx
@@ -93,6 +93,7 @@ const TRACK_THICKNESS = 28;
 const THUMB_SIZE = 20;
 
 function ColorWheel(props) {
+  let {isDisabled} = props;
   let state = useColorWheelState(props);
   let inputRef = React.useRef(null);
   let {trackProps, inputProps, thumbProps} = useColorWheel({
@@ -105,12 +106,18 @@ function ColorWheel(props) {
 
   return (
     <div style={{position: 'relative', display: 'inline-block'}}>
-      <div {...trackProps} />
+      <div
+        {...trackProps}
+        style={{
+          ...trackProps.style,
+          background: isDisabled ? 'rgb(142, 142, 142)' : trackProps.style.background
+        }} />
       <div
         {...thumbProps}
         style={{
           ...thumbProps.style,
-          border: '2px solid white',
+          background: isDisabled ? 'rgb(142, 142, 142)' : state.getDisplayColor().toString('css'),
+          border: `2px solid ${isDisabled ? 'rgb(142, 142, 142)' : 'white'}`,
           boxShadow: '0 0 0 1px black, inset 0 0 0 1px black',
           width: isFocusVisible ? TRACK_THICKNESS + 4 : THUMB_SIZE,
           height: isFocusVisible ? TRACK_THICKNESS + 4 : THUMB_SIZE,