IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated combobutton optional block to work with fillIcon prop

Browse Source
This commit is contained in:
mushka-n 2023-09-23 19:19:34 +03:00
parent 652662653b
commit d236bd9a22
2 changed files with 53 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/components/combobox/sub-components/combo-button.js
View File

@ -12,7 +12,6 @@ import {
import Text from "../../text";
import { ColorTheme, ThemeType } from "@docspace/components/ColorTheme";
import Badge from "@docspace/components/badge";
@ -67,6 +66,7 @@ const ComboButton = (props) => {
isDisabled={isDisabled}
defaultOption={defaultOption}
isLoading={isLoading}
fillIcon={fillIcon}
>
{innerContainer}
</StyledOptionalItem>
@ -78,6 +78,7 @@ const ComboButton = (props) => {
defaultOption={defaultOption}
isSelected={isSelected}
isLoading={isLoading}
fillIcon={fillIcon}
>
<ReactSVG
src={selectedOption.icon}

85
packages/components/combobox/sub-components/styled-combobutton.js
View File

@ -124,16 +124,21 @@ const StyledComboButton = styled.div`
${(props) => props.modernView && modernViewButton}
.optionalBlock {
svg {
path {
fill: ${(props) =>
props.isOpen
? props.theme.iconButton.hoverColor
: props.theme.iconButton.color};
${({ fillIcon }) =>
fillIcon &&
css`
.optionalBlock {
svg {
path {
fill: ${(props) =>
props.isOpen
? props.theme.iconButton.hoverColor
: props.theme.iconButton.color};
}
}
}
}
}
`};
:hover {
border-color: ${(props) =>
props.isOpen
@ -154,13 +159,17 @@ const StyledComboButton = styled.div`
${(props) => props.modernView && hoverModernViewButton}
.optionalBlock {
svg {
path {
fill: ${(props) => props.theme.iconButton.hoverColor};
${({ fillIcon }) =>
fillIcon &&
css`
.optionalBlock {
svg {
path {
fill: ${(props) => props.theme.iconButton.hoverColor};
}
}
}
}
}
`}
}
.combo-button-label {
visibility: ${(props) => (props.isLoading ? "hidden" : "visible")};
@ -201,16 +210,20 @@ const StyledComboButton = styled.div`
? props.theme.comboBox.button.hoverBorderColorOpen
: props.theme.comboBox.button.hoverBorderColor};
.optionalBlock {
svg {
path {
fill: ${(props) =>
props.isOpen
? props.theme.iconButton.hoverColor
: props.theme.iconButton.color};
${({ fillIcon }) =>
fillIcon &&
css`
.optionalBlock {
svg {
path {
fill: ${(props) =>
props.isOpen
? props.theme.iconButton.hoverColor
: props.theme.iconButton.color};
}
}
}
}
}
`}
}
`;
StyledComboButton.defaultProps = { theme: Base };
@ -226,16 +239,20 @@ const StyledOptionalItem = styled.div`
`}
visibility: ${(props) => (props.isLoading ? "hidden" : "visible")};
path {
fill: ${(props) =>
props.defaultOption
? props.isDisabled
? props.theme.comboBox.childrenButton.defaultDisabledColor
: props.theme.comboBox.childrenButton.defaultColor
: props.isDisabled
? props.theme.comboBox.childrenButton.disabledColor
: props.theme.comboBox.childrenButton.color};
}
${({ fillIcon }) =>
fillIcon &&
css`
path {
fill: ${(props) =>
props.defaultOption
? props.isDisabled
? props.theme.comboBox.childrenButton.defaultDisabledColor
: props.theme.comboBox.childrenButton.defaultColor
: props.isDisabled
? props.theme.comboBox.childrenButton.disabledColor
: props.theme.comboBox.childrenButton.color};
}
`}
`;
StyledOptionalItem.defaultProps = { theme: Base };