diff --git a/src/dataDisplay/Accordion/index.tsx b/src/dataDisplay/Accordion/index.tsx index 8dc64ec2..a8ab4146 100644 --- a/src/dataDisplay/Accordion/index.tsx +++ b/src/dataDisplay/Accordion/index.tsx @@ -9,17 +9,21 @@ import styled from 'styled-components'; import FixedIcon from '../FixedIcon'; -type StyledAccordionProps = AccordionMUIProps & { +type AccordionProps = AccordionMUIProps & { compact?: boolean; }; +type StyledAccordionProps = AccordionMUIProps & { + $compact?: AccordionProps['compact']; +}; + const StyledAccordion = styled(AccordionMUI)` &.MuiAccordion-root { - border-radius: ${({ compact }) => (compact ? '8px' : '0')}; - border: ${({ compact, theme }) => - compact ? '2px solid ' + theme.colors.separator : 'none'}; + border-radius: ${({ $compact }) => ($compact ? '8px' : '0')}; + border: ${({ $compact, theme }) => + $compact ? '2px solid ' + theme.colors.separator : 'none'}; border-bottom: 2px solid ${({ theme }) => theme.colors.separator}; - margin-bottom: ${({ compact }) => (compact ? '16px' : '0')}; + margin-bottom: ${({ $compact }) => ($compact ? '16px' : '0')}; overflow: hidden; &:before { @@ -31,7 +35,7 @@ const StyledAccordion = styled(AccordionMUI)` } &.Mui-expanded { - margin: ${({ compact }) => (compact ? '0 0 16px 0' : '0')}; + margin: ${({ $compact }) => ($compact ? '0 0 16px 0' : '0')}; } .MuiAccordionDetails-root { @@ -68,9 +72,9 @@ export const Accordion = ({ compact, children, ...props -}: StyledAccordionProps): ReactElement => { +}: AccordionProps): ReactElement => { return ( - + {children} ); diff --git a/src/inputs/Button/index.tsx b/src/inputs/Button/index.tsx index 62dd56bd..21bcea63 100644 --- a/src/inputs/Button/index.tsx +++ b/src/inputs/Button/index.tsx @@ -213,20 +213,20 @@ const customStyles: { }, }; -const StyledButton = styled(ButtonMUI)<{ localProps: LocalProps }>` +const StyledButton = styled(ButtonMUI)<{ $localProps: LocalProps }>` && { - height: ${({ theme, localProps }) => - theme.buttons.size[localProps.size].height}; + height: ${({ theme, $localProps }) => + theme.buttons.size[$localProps.size].height}; &.MuiButton-root { - min-width: ${({ theme, localProps: { size } }) => + min-width: ${({ theme, $localProps: { size } }) => theme.buttons.size[size].minWidth}; - padding: ${({ theme, localProps: { size } }) => + padding: ${({ theme, $localProps: { size } }) => theme.buttons.size[size].padding}; font-family: ${theme.fonts.fontFamily}; - font-size: ${({ theme, localProps }) => - theme.text.size[localProps.textSize ?? 'xl'].fontSize}; - line-height: ${({ theme, localProps }) => - theme.text.size[localProps.textSize ?? 'xl'].lineHeight}; + font-size: ${({ theme, $localProps }) => + theme.text.size[$localProps.textSize ?? 'xl'].fontSize}; + line-height: ${({ theme, $localProps }) => + theme.text.size[$localProps.textSize ?? 'xl'].lineHeight}; text-transform: none; border-radius: 8px; letter-spacing: 0; @@ -244,9 +244,12 @@ const StyledButton = styled(ButtonMUI)<{ localProps: LocalProps }>` opacity: ${({ theme }) => theme.colors.disabled.opacity}; } - ${({ localProps }) => { - if (localProps.color !== undefined && localProps.variant !== undefined) { - return customStyles[localProps.color][localProps.variant]; + ${({ $localProps }) => { + if ( + $localProps.color !== undefined && + $localProps.variant !== undefined + ) { + return customStyles[$localProps.color][$localProps.variant]; } }} } @@ -267,7 +270,7 @@ export const Button = ({ + $localProps={{ color, variant, size, textSize }}> {iconType && } {children}