Skip to content

Commit

Permalink
fix(picker): use correct spacing between icons and label text
Browse files Browse the repository at this point in the history
The spacing between alert icon and disclosure icon was incorrect
because it was being overridden by a selector that shouldn't have been
affecting this scenario. The selector was matching because it was using
the subsequent-sibling combinator (~) instead of the next-sibling
combinator (+) -- that CSS was meant only for the case of the spacing
between label text and disclosure icon, when there is no invalid icon
or progress circle.
  • Loading branch information
jawinn committed May 3, 2024
1 parent cfa0583 commit ded1555
Showing 1 changed file with 4 additions and 2 deletions.
6 changes: 4 additions & 2 deletions components/picker/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -343,12 +343,13 @@ governing permissions and limitations under the License.
&.is-loading,
&.is-invalid {
.spectrum-Picker-label {
/* Spacing after label text when there is an invalid icon or progress circle. */
margin-inline-end: var(--mod-picker-spacing-text-to-icon-inline-end, var(--spectrum-picker-spacing-text-to-icon-inline-end));
}
}
}

/* Optional icon that appears before the text within the picker. */
/* Optional workflow icon that appears before the text within the picker. */
.spectrum-Picker .spectrum-Picker-icon {
flex-shrink: 0;
margin-inline-end: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon));
Expand Down Expand Up @@ -435,7 +436,8 @@ governing permissions and limitations under the License.
margin-block-end: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
}

.spectrum-Picker-label ~ .spectrum-Picker-menuIcon {
.spectrum-Picker-label + .spectrum-Picker-menuIcon {
/* Spacing after label text when there is no invalid icon or progress circle (to disclosure icon). */
margin-inline-start: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon));
}

Expand Down

0 comments on commit ded1555

Please sign in to comment.