Make the button still appear dimmed when row disabled but selected

Author: mhawryluk

src/components/SelectionList/ListItem/SelectableListItem.tsx

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