[Enhancement] Fix dropdown list disabled color (#2094)

keplergl · Jan 26, 2023 · d1abf3e · d1abf3e
1 parent 943ee50
commit d1abf3e
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/src/components/src/common/animation-control/playback-controls.tsx b/src/components/src/common/animation-control/playback-controls.tsx
@@ -32,10 +32,14 @@ import SpeedControlFactory from './speed-control';
 
 const DEFAULT_BUTTON_HEIGHT = '20px';
 
-const StyledAnimationControls = styled.div`
+interface StyledAnimationControlsProps {
+  width?: number;
+}
+
+const StyledAnimationControls = styled.div<StyledAnimationControlsProps>`
   display: flex;
   position: relative;
-
+  width: ${props => props.width}px;
   &.disabled {
     opacity: 0.4;
     pointer-events: none;
@@ -71,7 +75,7 @@ const DEFAULT_ANIMATE_ITEMS = {
 interface PlaybackControlsProps {
   isAnimatable?: boolean;
   isAnimating?: boolean;
-  width?: number | string;
+  width?: number;
   speed: number;
   animationWindow?: string;
   setFilterAnimationWindow?: (id: string) => void;
@@ -152,7 +156,7 @@ function PlaybackControlsFactory(
         className={classnames('playback-controls', {
           disabled: !isAnimatable
         })}
-        style={{width: `${width}px`}}
+        width={width}
       >
         {/** Window */}
         {playbackActionItems.map((ActionComponent, index) => (

diff --git a/src/components/src/common/item-selector/dropdown-list.tsx b/src/components/src/common/item-selector/dropdown-list.tsx
@@ -32,10 +32,10 @@ export const classList = {
 };
 
 const defaultDisplay = d => d;
-export const ListItem = ({value, displayOption = defaultDisplay, light}) => {
+export const ListItem = ({value, displayOption = defaultDisplay, disabled, light}) => {
   const displayValue = displayOption(value);
   return (
-    <span title={displayValue} className={classNames(classList.listItemAnchor)}>
+    <span title={displayValue} className={classNames(classList.listItemAnchor, {disabled})}>
       {displayValue}
     </span>
   );

diff --git a/src/components/src/common/item-selector/item-selector.tsx b/src/components/src/common/item-selector/item-selector.tsx
@@ -60,6 +60,7 @@ export const StyledDropdownSelect = styled.div.attrs(props => ({
 interface DropdownSelectValueProps {
   hasPlaceholder?: boolean;
   inputTheme?: string;
+  disabled?: boolean;
 }
 
 const DropdownSelectValue = styled.span<DropdownSelectValueProps>`
@@ -312,14 +313,18 @@ class ItemSelectorUnmemoized extends Component<ItemSelectorProps> {
     const selected = toArray(this.props.selectedItems);
     const hasValue = selected.length;
     const displayOption = Accessor.generateOptionToStringFor(this.props.displayOption);
-    const {inputTheme = 'primary', DropDownLineItemRenderComponent = ListItem} = this.props;
+    const {
+      disabled,
+      inputTheme = 'primary',
+      DropDownLineItemRenderComponent = ListItem
+    } = this.props;
 
     const dropdownSelectProps = {
       className: classnames({
         active: this.state.showTypeahead
       }),
       displayOption,
-      disabled: this.props.disabled,
+      disabled: disabled,
       onClick: this._showTypeahead,
       error: this.props.isError,
       inputTheme,
@@ -344,13 +349,15 @@ class ItemSelectorUnmemoized extends Component<ItemSelectorProps> {
             <StyledDropdownSelect {...dropdownSelectProps}>
               <DropdownSelectValue
                 hasPlaceholder={!hasValue}
+                disabled={disabled}
                 inputTheme={inputTheme}
                 className="item-selector__dropdown__value"
               >
                 {hasValue ? (
                   <DropDownLineItemRenderComponent
                     displayOption={displayOption}
                     value={selected[0]}
+                    disabled={disabled}
                     light={inputTheme === 'light'}
                   />
                 ) : (

diff --git a/src/styles/src/base.ts b/src/styles/src/base.ts
@@ -878,6 +878,10 @@ const dropdownListAnchor = css`
   padding-left: 3px;
   font-size: ${props => props.theme.selectFontSize};
   line-height: ${props => props.theme.dropdownListLineHeight}px;
+
+  &.disabled {
+    color: ${props => props.theme.subtextColor};
+  }
 `;
 
 const dropdownListAnchorLT = css`