dz action button blue when expanded + small border fix on repeatable component

This commit is contained in:
ronronscelestes 2021-11-18 17:37:14 +01:00
parent 1a7f02a19d
commit 3d2f120a0b
3 changed files with 29 additions and 3 deletions

View File

@ -17,6 +17,15 @@ import { getTrad } from '../../../../utils';
import FieldComponent from '../../../FieldComponent';
import Rectangle from './Rectangle';
const ActionStack = styled(Stack)`
svg {
path {
fill: ${({ theme, expanded }) =>
expanded ? theme.colors.primary600 : theme.colors.neutral600};
}
}
`;
const IconButtonCustom = styled(IconButton)`
background-color: transparent;
`;
@ -106,7 +115,7 @@ const Component = ({
<AccordionToggle
startIcon={<FontAwesomeIcon icon={icon} />}
action={
<Stack horizontal size={0}>
<ActionStack horizontal size={0} expanded={isOpen}>
{showDownIcon && (
<IconButtonCustom
noBorder
@ -131,7 +140,7 @@ const Component = ({
icon={<Trash />}
/>
)}
</Stack>
</ActionStack>
}
title={friendlyName}
togglePosition="left"

View File

@ -9,6 +9,7 @@ import { Flex } from '@strapi/design-system/Flex';
import { KeyboardNavigable } from '@strapi/design-system/KeyboardNavigable';
const AccordionFooter = styled(Box)`
overflow: hidden;
border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
@ -16,6 +17,22 @@ const AccordionFooter = styled(Box)`
`;
const EnhancedGroup = styled(Box)`
> div {
> div {
> div:first-of-type {
border-radius: unset;
}
}
}
> div:first-of-type {
> div {
> div:first-of-type {
border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
}
}
}
> div {
& > * {
border-radius: unset;

View File

@ -138,7 +138,7 @@ const RepeatableComponent = ({
<AccordionGroupCustom
error={errorMessage}
footer={
<Flex justifyContent="center" height="48px" background="neutral0" hasRadius>
<Flex justifyContent="center" height="48px" background="neutral0">
<TextButtonCustom disabled={isReadOnly} onClick={handleClick} startIcon={<Plus />}>
{formatMessage({
id: getTrad('containers.EditView.add.new-entry'),