Add styled component rule (#1261)

* Add StyledComponent rule

* update doc

* update doc

* update doc
This commit is contained in:
Weiko
2023-08-17 20:58:02 -07:00
committed by GitHub
parent 390e70a196
commit 9b34a0ff3d
70 changed files with 433 additions and 354 deletions

View File

@ -65,11 +65,11 @@ const StyledDropdownItem = styled.button<ButtonProps>`
}
`;
const DropdownContainer = styled.div`
const StyledDropdownContainer = styled.div`
position: relative;
`;
const DropdownMenu = styled.div`
const StyledDropdownMenu = styled.div`
display: flex;
flex-direction: column;
position: absolute;
@ -112,7 +112,7 @@ export function DropdownButton({
return (
<>
{selectedOption && (
<DropdownContainer>
<StyledDropdownContainer>
<StyledButton
onClick={() => setIsOpen(!isOpen)}
{...buttonProps}
@ -123,7 +123,7 @@ export function DropdownButton({
{options.length > 1 && <IconChevronDown />}
</StyledButton>
{isOpen && (
<DropdownMenu>
<StyledDropdownMenu>
{options
.filter((option) => option.label !== selectedOption.label)
.map((option, index) => (
@ -135,9 +135,9 @@ export function DropdownButton({
{option.label}
</StyledDropdownItem>
))}
</DropdownMenu>
</StyledDropdownMenu>
)}
</DropdownContainer>
</StyledDropdownContainer>
)}
</>
);