RelationInput: Add missing label to disconnect button

This commit is contained in:
Gustav Hansen 2022-10-07 12:53:11 +02:00
parent 685b3e11b0
commit e56bae5a2f
2 changed files with 10 additions and 3 deletions

View File

@ -38,7 +38,7 @@ const BoxEllipsis = styled(Box)`
}
`;
const RemoveButton = styled.button`
const DisconnectButton = styled.button`
svg path {
fill: ${({ theme }) => theme.colors.neutral500};
}
@ -59,6 +59,7 @@ const RelationInput = ({
label,
labelAction,
labelLoadMore,
labelDisconnectRelation,
loadingMessage,
onRelationAdd,
onRelationLoadMore,
@ -292,14 +293,15 @@ const RelationInput = ({
disabled={disabled}
key={`relation-${name}-${id}`}
endAction={
<RemoveButton
<DisconnectButton
data-testid={`remove-relation-${id}`}
disabled={disabled}
type="button"
onClick={() => onRelationRemove(data[index])}
aria-label={labelDisconnectRelation}
>
<Icon width="12px" as={Cross} />
</RemoveButton>
</DisconnectButton>
}
style={style}
>
@ -400,6 +402,7 @@ RelationInput.propTypes = {
label: PropTypes.string.isRequired,
labelAction: PropTypes.element,
labelLoadMore: PropTypes.string,
labelDisconnectRelation: PropTypes.string.isRequired,
loadingMessage: PropTypes.func.isRequired,
name: PropTypes.string.isRequired,
numberOfRelationsToDisplay: PropTypes.number.isRequired,

View File

@ -160,6 +160,10 @@ export const RelationInputDataManager = ({
})
: null
}
labelDisconnectRelation={formatMessage({
id: getTrad('relation.disconnect'),
defaultMessage: 'Remove',
})}
listHeight={320}
loadingMessage={() =>
formatMessage({