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}
- } />
+ }
+ />
);