Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(inputs): updating focus styles [WIP] #14

Closed
wants to merge 2 commits into from
Closed

refactor(inputs): updating focus styles [WIP] #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
49ee9b7
refactor(inputs): updating focus styles
gavin-everett-genesys Oct 13, 2023
fea76e2
test(inputs): update focus stylings
gavin-everett-genesys Oct 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions ...acy/gux-pagination-buttons-legacy/tests/__snapshots__/gux-pagination-buttons.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ exports[`gux-pagination-item-counts-legacy #render should render as expected (1)
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input">
<div class="gux-input" tabindex="1">
<div class="gux-input-container">
<slot name="prefix"></slot>
<slot name="input"></slot>
Expand Down Expand Up @@ -101,7 +101,7 @@ exports[`gux-pagination-item-counts-legacy #render should render as expected (2)
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input">
<div class="gux-input" tabindex="1">
<div class="gux-input-container">
<slot name="prefix"></slot>
<slot name="input"></slot>
Expand Down Expand Up @@ -175,7 +175,7 @@ exports[`gux-pagination-item-counts-legacy #render should render as expected (3)
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input">
<div class="gux-input" tabindex="1">
<div class="gux-input-container">
<slot name="prefix"></slot>
<slot name="input"></slot>
Expand Down
14 changes: 10 additions & 4 deletions ...ponents/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,16 @@ $gux-form-field-number-step-button-size: 14px;
align-items: center;
width: 100%;

&:focus-visible {
border: var(--gse-ui-formControl-input-default-border-width)
var(--gse-ui-formControl-input-default-border-style)
var(--gse-ui-formControl-input-default-border-color);
border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
outline: var(--gse-ui-formControl-input-focus-border-width)
var(--gse-ui-formControl-input-focus-border-style)
var(--gse-ui-formControl-input-focus-border-color);
}

.gux-input-container {
box-sizing: border-box;
display: flex;
Expand Down Expand Up @@ -87,10 +97,6 @@ $gux-form-field-number-step-button-size: 14px;
border: var(--gse-ui-formControl-input-active-border-width)
var(--gse-ui-formControl-input-active-border-style)
var(--gse-ui-formControl-input-active-border-color);
border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
outline: var(--gse-ui-formControl-input-focus-border-width)
var(--gse-ui-formControl-input-focus-border-style)
var(--gse-ui-formControl-input-focus-border-color);
}
}

Expand Down
1 change: 1 addition & 0 deletions ...mponents/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@ export class GuxFormFieldNumber {
</GuxFormFieldLabel>
<div class="gux-input-and-error-container">
<div
tabIndex={1}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like a bad idea to me. Why do you need to make this change?

https://whattrainisitnow.com/calendar/ looks like we have to wait until next October to use the :has selector :(

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

UX want to have the focus-ring around the component when a keyboard user is navigating to the component and not when the user has clicked the component via a mouse click. So my thought was if I use :focus-visible on the container div and then use :focus-within in the inner div to apply the active styling. So that if the user was to mouse click it will only show active styling.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From what I read on the mozilla form it should be released in firefox 120 as its already in the 119.0a1 beta. So potentially this November 🙌
https://www.mozilla.org/en-US/firefox/119.0a1/releasenotes/

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AFAIK we support Firefox Extended Support Release which is currently v115 and won't change until v128.

class={{
'gux-input': true,
'gux-input-error': this.hasError
Expand Down
26 changes: 13 additions & 13 deletions ...ld/components/gux-form-field-number/tests/__snapshots__/gux-form-field-number.e2e.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -44,7 +44,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-clear gux-input-container">
<slot name="input"></slot>
<gux-form-field-input-clear-button hydrated=""></gux-form-field-input-clear-button>
Expand Down Expand Up @@ -81,7 +81,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-clear gux-input-container">
<slot name="input"></slot>
<gux-form-field-input-clear-button hydrated=""></gux-form-field-input-clear-button>
Expand Down Expand Up @@ -118,7 +118,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -154,7 +154,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-disabled gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -190,7 +190,7 @@ exports[`gux-form-field-number #render help should render component as expected
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -226,7 +226,7 @@ exports[`gux-form-field-number #render input attributes should render component
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -262,7 +262,7 @@ exports[`gux-form-field-number #render input attributes should render component
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-disabled gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -298,7 +298,7 @@ exports[`gux-form-field-number #render input attributes should render component
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -334,7 +334,7 @@ exports[`gux-form-field-number #render label-position should render component as
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -370,7 +370,7 @@ exports[`gux-form-field-number #render label-position should render component as
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -406,7 +406,7 @@ exports[`gux-form-field-number #render label-position should render component as
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -442,7 +442,7 @@ exports[`gux-form-field-number #render label-position should render component as
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-input-container">
<slot name="input"></slot>
</div>
Expand Down
26 changes: 13 additions & 13 deletions ...d/components/gux-form-field-number/tests/__snapshots__/gux-form-field-number.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -50,7 +50,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-clear gux-input-container">
<slot name="input"></slot>
<gux-form-field-input-clear-button></gux-form-field-input-clear-button>
Expand Down Expand Up @@ -93,7 +93,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-clear gux-input-container">
<slot name="input"></slot>
<gux-form-field-input-clear-button></gux-form-field-input-clear-button>
Expand Down Expand Up @@ -136,7 +136,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -178,7 +178,7 @@ exports[`gux-form-field-number #render clearable should render component as expe
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-disabled gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -220,7 +220,7 @@ exports[`gux-form-field-number #render help should render component as expected
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -265,7 +265,7 @@ exports[`gux-form-field-number #render input attributes should render component
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -307,7 +307,7 @@ exports[`gux-form-field-number #render input attributes should render component
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-disabled gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -349,7 +349,7 @@ exports[`gux-form-field-number #render input attributes should render component
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -391,7 +391,7 @@ exports[`gux-form-field-number #render label-position should render component as
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -433,7 +433,7 @@ exports[`gux-form-field-number #render label-position should render component as
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -475,7 +475,7 @@ exports[`gux-form-field-number #render label-position should render component as
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-input-container">
<slot name="input"></slot>
</div>
Expand Down Expand Up @@ -517,7 +517,7 @@ exports[`gux-form-field-number #render label-position should render component as
<slot name="label"></slot>
</div>
<div class="gux-input-and-error-container">
<div class="gux-input" part="input-section">
<div class="gux-input" part="input-section" tabindex="1">
<div class="gux-input-container">
<slot name="input"></slot>
</div>
Expand Down
13 changes: 9 additions & 4 deletions ...s/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,15 @@ slot[name='suffix'] {
flex-grow: 1;

.gux-input {
&:focus-visible {
border: var(--gse-ui-formControl-input-default-border-width)
var(--gse-ui-formControl-input-default-border-style)
var(--gse-ui-formControl-input-default-border-color);
border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
outline: var(--gse-ui-formControl-input-focus-border-width)
var(--gse-ui-formControl-input-focus-border-style)
var(--gse-ui-formControl-input-focus-border-color);
}
.gux-input-container {
box-sizing: border-box;
display: flex;
Expand Down Expand Up @@ -88,10 +97,6 @@ slot[name='suffix'] {
border: var(--gse-ui-formControl-input-active-border-width)
var(--gse-ui-formControl-input-active-border-style)
var(--gse-ui-formControl-input-active-border-color);
border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
outline: var(--gse-ui-formControl-input-focus-border-width)
var(--gse-ui-formControl-input-focus-border-style)
var(--gse-ui-formControl-input-focus-border-color);
}

&:hover:not(.gux-disabled) {
Expand Down
1 change: 1 addition & 0 deletions ...ts/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ export class GuxFormFieldTextLike {
</GuxFormFieldLabel>
<div class="gux-input-and-error-container">
<div
tabIndex={1}
class={{
'gux-input': true,
'gux-input-error': this.hasError
Expand Down
Loading
Loading