diff --git a/src/dropdown/DropdownButton.tsx b/src/dropdown/DropdownButton.tsx index 57921ec7..5f2af1fa 100644 --- a/src/dropdown/DropdownButton.tsx +++ b/src/dropdown/DropdownButton.tsx @@ -53,13 +53,21 @@ const buttonBaseCSS = css` overflow: hidden; color: var(--ac-field-text-color-override, ${theme.textColors.white90}); } - .ac-icon-wrap:not(.ac-dropdown-button__validation-icon) { + .ac-dropdown-button__dropdown-icon { margin: 10px 0 10px 10px; flex: fixed; width: 16px; height: 16px; font-size: 16px; } + + /* Validation styles */ + --ac-validation-icon-width: var(--ac-global-dimension-size-300); + + // prepend some space before the icon + .ac-dropdown-button__validation-icon { + margin: 0 0 0 10px; + } &[disabled] { opacity: ${theme.opacity.disabled}; } @@ -72,6 +80,17 @@ const buttonBaseCSS = css` color: var(--ac-global-color-danger); } } + + // Make room for the invalid icon + &.ac-dropdown-button > .ac-dropdown-button__text { + padding-right: calc(${ + theme.spacing.padding8 + }px + var(--ac-validation-icon-width)); + } + + &.ac-dropdown-button--invalid > .ac-dropdown-button__text { + padding-right: 0; + } `; /** @@ -99,20 +118,12 @@ const quietButtonCSS = css` cursor: default; border-bottom: 1px solid ${theme.components.dropdown.borderColor}; } - &.ac-dropdown-button--invalid { border-bottom-color: var(--ac-global-color-danger); div.ac-dropdown__content { color: var(--ac-global-color-danger); } } - // Make room for the invalid icon - &.ac-dropdown-button > .ac-dropdown-button__text { - padding-right: ${theme.spacing.padding24}px; - } - &.ac-dropdown-button--invalid > .ac-dropdown-button__text { - padding-right: 0; - } `; /** @@ -227,7 +238,10 @@ function DropdownButton( {children} {validationState && validationState === 'invalid' ? validation : null} - } /> + } + /> );