diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.styles.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.styles.ts index 4f473b4c8f..9c99ae3fbb 100644 --- a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.styles.ts +++ b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.styles.ts @@ -39,10 +39,10 @@ export const Ul = styled.ul<{ } `; -export const IconArrowWrapper = styled.div<{ disabled: boolean }>` +export const IconArrowWrapper = styled.div<{ disabled: boolean; readOnly: boolean }>` line-height: 0; color: var(${tokens.disclosureIconColor}); - cursor: ${({ disabled }) => (disabled ? 'inherit' : 'pointer')}; + cursor: ${({ disabled, readOnly }) => (disabled || readOnly ? 'inherit' : 'pointer')}; .${classes.arrowInverse} { transform: rotate(-180deg); @@ -50,8 +50,8 @@ export const IconArrowWrapper = styled.div<{ disabled: boolean }>` &:hover, &:active { - color: ${({ disabled }) => - disabled ? `var(${tokens.disclosureIconColor})` : `var(${tokens.disclosureIconColorHover})`}; + color: ${({ disabled, readOnly }) => + disabled || readOnly ? `var(${tokens.disclosureIconColor})` : `var(${tokens.disclosureIconColorHover})`}; } `; diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.tsx b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.tsx index eb205815af..4d29329754 100644 --- a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.tsx +++ b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.tsx @@ -555,6 +555,7 @@ export const comboboxRoot = (Root: RootProps