Make disabled but selected items not muted

Author: mhawryluk

src/components/SelectionList/BaseSelectionList.tsx

@@ -347,8 +347,8 @@ function BaseSelectionList<TItem extends ListItem>({
     };
 
     const renderItem: ListRenderItem<TItem> = ({item, index}: ListRenderItemInfo<TItem>) => {
-        const isItemDisabled = isDisabled || item.isDisabled;
         const selected = isItemSelected(item);
+        const isItemDisabled = isDisabled || (!!item.isDisabled && !selected);
         const isItemFocused = (!isDisabled || selected) && focusedIndex === index;
         const isItemVisuallyFocused = isItemFocused && (shouldHighlightInitiallyFocusedItem || isKeyboardNavigating);
         const isItemHighlighted = !!itemsToHighlight?.has(item.keyForList);

src/components/SelectionList/ListItem/SelectableListItem.tsx

@@ -25,8 +25,6 @@ function SelectableListItem<TItem extends ListItem>({
 }: SelectableListItemProps<TItem>) {
     const styles = useThemeStyles();
     const ButtonComponent = canSelectMultiple ? ListCheckbox : ListRadioButton;
-    const isButtonDisabled = (!!isDisabled && !item.isSelected) || item.isDisabledCheckbox;
-    const shouldDimButton = !!isDisabled && !!item.isSelected && !item.isDisabledCheckbox;
 
     return (
         <BaseListItem
@@ -43,8 +41,8 @@ function SelectableListItem<TItem extends ListItem>({
                         <ButtonComponent
                             item={item}
                             onSelectRow={onSelectionButtonPress ?? onSelectRow}
-                            disabled={isButtonDisabled}
-                            style={[styles.ml3, shouldDimButton && styles.buttonOpacityDisabled]}
+                            disabled={!!isDisabled || !!item.isDisabledCheckbox}
+                            style={styles.ml3}
                         />
                         {typeof rightHandSideComponent === 'function' ? rightHandSideComponent(item, isFocused) : rightHandSideComponent}
                     </>
@@ -59,8 +57,8 @@ function SelectableListItem<TItem extends ListItem>({
                           <ButtonComponent
                               item={item}
                               onSelectRow={onSelectionButtonPress ?? onSelectRow}
-                              disabled={isButtonDisabled}
-                              style={[styles.mr3, shouldDimButton && styles.buttonOpacityDisabled]}
+                              disabled={!!isDisabled || item.isDisabledCheckbox}
+                              style={styles.mr3}
                           />
                           {typeof children === 'function' ? children(hovered) : children}
                       </>

src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx

@@ -364,7 +364,7 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
             case CONST.SECTION_LIST_ITEM_TYPE.ROW: {
                 const isItemFocused = index === focusedIndex;
                 const isItemVisuallyFocused = isItemFocused && (shouldHighlightInitiallyFocusedItem || isKeyboardNavigating);
-                const isDisabled = !!item.isDisabled;
+                const isDisabled = !!item.isDisabled && !item.isSelected;
 
                 return (
                     <ListItemRenderer