Skip to content

Commit

Permalink
refactor(NumberInput): remove pseudo elements and use box-shadow (#15128
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@tw15egan
tw15egan authored Nov 9, 2023
1 parent 7e1982e commit b95c679
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 184 deletions.
101 changes: 42 additions & 59 deletions packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,93 +71,76 @@
transform: translate(0);
}

.#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn,
.#{$prefix}--number-input--fluid
input[type='number']:focus
~ .#{$prefix}--number__controls
.#{$prefix}--number__control-btn {
border-block-end: 1px solid transparent;
}

.#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
.#{$prefix}--number {
@include focus-outline('outline');
border-block-end-color: $focus;
box-shadow: inset 0 -1px $focus;
}

// Weird overrides (needed to override focus borders on stepper buttons when hovered while input has focus)
.#{$prefix}--number-input--fluid:not(
.#{$prefix}--number-input--fluid--invalid
)
.#{$prefix}--number
.#{$prefix}--number__input-wrapper:not(
.#{$prefix}--number__input-wrapper--warning
)
.#{$prefix}--number-input--fluid
input[type='number']:focus
~ .#{$prefix}--number__controls
.#{$prefix}--number__control-btn:hover {
outline: 2px solid transparent;
.#{$prefix}--number__control-btn:last-of-type {
box-shadow: inset 0 -1px $focus, inset -2px 0 $focus;
}

.#{$prefix}--number-input--fluid:not(
.#{$prefix}--number-input--fluid--invalid
)
.#{$prefix}--number
.#{$prefix}--number__input-wrapper:not(
.#{$prefix}--number__input-wrapper--warning
)
.#{$prefix}--number-input--fluid
.#{$prefix}--number__input-wrapper--warning
input[type='number']:focus
~ .#{$prefix}--number__controls
.#{$prefix}--number__control-btn:hover::before {
background: $focus;
block-size: 1px;
inline-size: 100%;
inset-block-end: 0;
inset-block-start: auto;
inset-inline-start: 0;
}
// End weirdness

.#{$prefix}--number-input--fluid:not(
.#{$prefix}--number-input--fluid--invalid
)
.#{$prefix}--number-input-wrapper:not(
.#{$prefix}--number-input-wrapper__warning
)
.#{$prefix}--number__control-btn,
.#{$prefix}--number-input--fluid--invalid
input[type='number']:focus
~ .#{$prefix}--number__controls
.#{$prefix}--number__control-btn:hover {
border-block-end: 1px solid $focus;
outline: none;
.#{$prefix}--number__control-btn {
border-block-end-color: transparent;
box-shadow: none;
}

.#{$prefix}--number-input--fluid
input[type='number']
.#{$prefix}--number__input-wrapper--warning
input[type='number']:focus
~ .#{$prefix}--number__controls
.#{$prefix}--number__control-btn:last-of-type,
.#{$prefix}--number-input--fluid--invalid
input[type='number'][data-invalid]:focus
~ .#{$prefix}--number__controls
.#{$prefix}--number__control-btn::after {
block-size: calc(100% - convert.to-rem(1px));
inset-block-start: 0;
.#{$prefix}--number__control-btn:last-of-type {
box-shadow: inset -2px 0 $focus;
}

.#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
input[type='number']
.#{$prefix}--number-input--fluid--invalid
input[type='number'][data-invalid]:not(:focus)
~ .#{$prefix}--number__controls
.#{$prefix}--number__control-btn.up-icon::after {
background: $focus;
.#{$prefix}--number__control-btn:last-of-type:hover {
box-shadow: inset -2px 0 $support-error;
}

.#{$prefix}--number-input--fluid
input[type='number']
.#{$prefix}--number-input--fluid--invalid
input[type='number'][data-invalid]:not(:focus)
~ .#{$prefix}--number__controls
.#{$prefix}--number__control-btn.up-icon::after {
block-size: calc(100%);
.#{$prefix}--number__control-btn:hover {
box-shadow: none;
}

.#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
input[type='number']
.#{$prefix}--number {
@include focus-outline('outline');
}

.#{$prefix}--number-input--fluid:not(
.#{$prefix}--number-input--fluid--invalid
)
.#{$prefix}--number-input-wrapper:not(
.#{$prefix}--number-input-wrapper__warning
)
input[type='number']:focus
~ .#{$prefix}--number__controls
.#{$prefix}--number__control-btn.up-icon:hover::after {
background-color: $focus;
block-size: calc(100%);
.#{$prefix}--number__control-btn:hover {
border-block-end: 1px solid $focus;
outline: none;
}

.#{$prefix}--number-input--fluid--invalid
Expand Down
158 changes: 33 additions & 125 deletions packages/styles/scss/components/number-input/_number-input.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,26 +159,6 @@
border-block-end: convert.to-rem(1px) solid $border-strong;
color: $icon-primary;

&::before,
&::after {
position: absolute;
display: block;
background-color: $field;
// block-size: calc(100% - 4px) is calculated differently in Safari
block-size: convert.to-rem(36px);
content: '';
inline-size: convert.to-rem(2px);
inset-block-start: convert.to-rem(2px);
}

&::before {
inset-inline-start: 0;
}

&::after {
inset-inline-end: 0;
}

svg {
fill: currentColor;
}
Expand All @@ -195,18 +175,6 @@
background-color: $field-hover;
color: $icon-primary;
cursor: pointer;

&::before,
&::after {
background-color: $field-hover;
}
}

&:focus::before,
&:focus::after,
&:hover:focus::before,
&:hover:focus::after {
background-color: transparent;
}

&:disabled {
Expand All @@ -225,56 +193,50 @@
order: 2;
}

// add top and bottom outlines to number controls when input is focused
.#{$prefix}--number
input[type='number']:focus
input[type='number'][data-invalid]
~ .#{$prefix}--number__controls
.#{$prefix}--number__control-btn {
border-block-end-color: transparent;

&:hover {
@include focus-outline('outline');
}
border-block-end-color: $support-error;
}

// add top and bottom outlines to number controls when input is focused
.#{$prefix}--number
input[type='number'][data-invalid]
input[type='number']:focus
~ .#{$prefix}--number__controls
.#{$prefix}--number__control-btn {
border-block-end-color: transparent;
border-block-end-color: $focus;
box-shadow: inset 0 2px $focus, inset 0 -1px $focus;
}

// add invalid outline to number controls only when invalid input is not focused
.#{$prefix}--number
input[type='number'][data-invalid]:not(:focus)
input[type='number']:focus
~ .#{$prefix}--number__controls
.#{$prefix}--number__control-btn:hover {
@include focus-outline('invalid');
.#{$prefix}--number__control-btn:last-of-type {
box-shadow: inset 0 2px $focus, inset 0 -1px $focus, inset -2px 0 $focus;
}

// add invalid box-shadow to number controls only when invalid input is not focused
.#{$prefix}--number
input[type='number']:focus
input[type='number'][data-invalid]:not(:focus)
~ .#{$prefix}--number__controls
.#{$prefix}--number__control-btn.up-icon::after {
background-color: transparent;
.#{$prefix}--number__control-btn:last-of-type:hover {
box-shadow: inset 0 2px $support-error, inset 0 -1px $support-error,
inset -2px 0 $support-error;
}

.#{$prefix}--number
input[type='number'][data-invalid]
input[type='number'][data-invalid]:not(:focus)
~ .#{$prefix}--number__controls
.#{$prefix}--number__control-btn.up-icon::after {
background-color: $support-error;
.#{$prefix}--number__control-btn:hover {
box-shadow: inset 0 2px $support-error, inset 0 -1px $support-error;
}

.#{$prefix}--number
input[type='number'][data-invalid]:focus
~ .#{$prefix}--number__controls
.#{$prefix}--number__control-btn.up-icon::after,
.#{$prefix}--number
input[type='number'][data-invalid]
input[type='number'][data-invalid]:not(:focus)
~ .#{$prefix}--number__controls
.#{$prefix}--number__control-btn.up-icon:focus::after {
background-color: $focus;
.#{$prefix}--number__control-btn:focus:hover {
@include focus-outline('outline');
}

.#{$prefix}--number__rule-divider {
Expand Down Expand Up @@ -380,38 +342,6 @@
opacity: 1;
}

// V11: Possibly deprecate
.#{$prefix}--number--light input[type='number'] {
background-color: $field-02;
}

// V11: Possibly deprecate
.#{$prefix}--number--light input[type='number']:disabled {
background-color: $field-02;
}

// V11: Possibly deprecate
.#{$prefix}--number--light .#{$prefix}--number__control-btn::before,
.#{$prefix}--number--light .#{$prefix}--number__control-btn::after {
background-color: $field-02;
}

.#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::before,
.#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::after {
background-color: transparent;
}

// V11: Possibly deprecate
// We include `:not(:focus)` here because the pseudo elements will overlap the
// focus outline on the button if we set their background-color on focus
.#{$prefix}--number--light .#{$prefix}--number__control-btn:hover,
.#{$prefix}--number--light
.#{$prefix}--number__control-btn:not(:focus):hover::before,
.#{$prefix}--number--light
.#{$prefix}--number__control-btn:not(:focus):hover::after {
background-color: $layer-hover-02;
}

// Size Variant styles
.#{$prefix}--number--lg input[type='number'] {
block-size: convert.to-rem(48px);
Expand All @@ -423,12 +353,6 @@

.#{$prefix}--number--lg .#{$prefix}--number__control-btn {
inline-size: convert.to-rem(48px);

&::before,
&::after {
// block-size: calc(100% - 4px) is calculated differently in Safari
block-size: convert.to-rem(44px);
}
}

.#{$prefix}--number--sm input[type='number'] {
Expand All @@ -441,12 +365,6 @@

.#{$prefix}--number--sm .#{$prefix}--number__control-btn {
inline-size: convert.to-rem(32px);

&::before,
&::after {
// block-size: calc(100% - 4px) is calculated differently in Safari
block-size: convert.to-rem(28px);
}
}

//No label positioning adjustment
Expand Down Expand Up @@ -478,11 +396,6 @@
&:hover {
background-color: transparent;
cursor: pointer;

&::before,
&::after {
background-color: transparent;
}
}
}

Expand All @@ -493,11 +406,6 @@
outline: none;
}

.#{$prefix}--number--readonly .#{$prefix}--number__control-btn::before,
.#{$prefix}--number--readonly .#{$prefix}--number__control-btn::after {
background: transparent;
}

.#{$prefix}--number--readonly
.#{$prefix}--number__controls:hover
.#{$prefix}--number__rule-divider:not(:first-of-type) {
Expand All @@ -516,19 +424,19 @@
}
}

// // Windows HCM fix
// /* stylelint-disable */
// .#{$prefix}--number__control-btn:hover,
// .#{$prefix}--number__control-btn:focus {
// @include high-contrast-mode('focus');
// }
// Windows HCM fix
/* stylelint-disable */
.#{$prefix}--number__control-btn:hover,
.#{$prefix}--number__control-btn:focus {
@include high-contrast-mode('focus');
}

// .#{$prefix}--number__control-btn {
// @include high-contrast-mode('outline');
// }
.#{$prefix}--number__control-btn {
@include high-contrast-mode('outline');
}

// .#{$prefix}--number__control-btn svg {
// @include high-contrast-mode('icon-fill');
// }
// /* stylelint-enable */
.#{$prefix}--number__control-btn svg {
@include high-contrast-mode('icon-fill');
}
/* stylelint-enable */
}

0 comments on commit b95c679

Please sign in to comment.