diff --git a/packages/core/upload/admin/src/components/SelectTree/Option.js b/packages/core/upload/admin/src/components/SelectTree/Option.js index ba081f3684..628068521c 100644 --- a/packages/core/upload/admin/src/components/SelectTree/Option.js +++ b/packages/core/upload/admin/src/components/SelectTree/Option.js @@ -1,5 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; +import { useIntl } from 'react-intl'; import { components } from 'react-select'; import styled from 'styled-components'; @@ -10,12 +11,19 @@ import { Typography } from '@strapi/design-system/Typography'; import ChevronUp from '@strapi/icons/ChevronUp'; import ChevronDown from '@strapi/icons/ChevronDown'; -const ToggleButton = styled.button` +const ToggleButton = styled(Flex)` align-self: flex-end; - margin-left: auto; + height: ${pxToRem(22)}; + width: ${pxToRem(28)}; + + &:hover, + &:focus { + background-color: ${({ theme }) => theme.colors.primary200}; + } `; const Option = ({ children, data, selectProps, ...props }) => { + const { formatMessage } = useIntl(); const { depth, value, children: options } = data; const { maxDisplayDepth, openValues, onOptionToggle } = selectProps; const isOpen = openValues.includes(value); @@ -25,14 +33,22 @@ const Option = ({ children, data, selectProps, ...props }) => { - + {children} {options?.length > 0 && ( { event.preventDefault(); event.stopPropagation();