Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

[form-single-select] Invalid example foucs and safari browser issue fixes #3902

Merged
merged 9 commits into from
Sep 13, 2023
Merged

[form-single-select] Invalid example foucs and safari browser issue fixes #3902

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f22f2b5
Single select invalid example foucs and safari browser issue fixes
KV106606Viswanath Sep 1, 2023
6aa0f1a
Resolved lint errors
KV106606Viswanath Sep 1, 2023
d3e413b
Wdio snapshots updated
KV106606Viswanath Sep 5, 2023
fd09856
Added focus outline for invalid example
KV106606Viswanath Sep 8, 2023
beb834d
space and return key issue
gt106551 Sep 8, 2023
1b21d26
Wdio snapshots updated for focus issue
KV106606Viswanath Sep 11, 2023
b473135
Reverted few code changes
KV106606Viswanath Sep 12, 2023
b068da7
Jest snapshots updated
KV106606Viswanath Sep 12, 2023
ca7736d
Removed unnecessary braces
KV106606Viswanath Sep 12, 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
4 changes: 4 additions & 0 deletions packages/terra-form-select/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Changelog

* Fixed
* Fixed focus issue of Invalid example `form-single-select`.
* Fixed safari browser minimised issue in `form-single-select` .

## Unreleased

## 6.46.0 - (August 25, 2023)
Expand Down
2 changes: 2 additions & 0 deletions packages/terra-form-select/src/clinical-lowlight-theme/Frame.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@
--terra-form-select-invalid-focus-background-size: 0 0;
--terra-form-select-invalid-focus-border-color: #fb4c4c;
--terra-form-select-invalid-focus-box-shadow: 0 0 0 1px #fb4c4c, 0 0 0 1px #fb4c4c;
--terra-form-select-single-select-invalid-focus-border-color: #004c76;
Copy link
Contributor

Choose a reason for hiding this comment

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

style values are missing for orion-fusion-theme

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Above styles has been removed and added outline around the red colour border. Since there is no red colour border for invalid example in fusion theme, outline is not required so i have removed outline for fusion theme.

--terra-form-select-single-select-invalid-focus-box-shadow: 0 0 1px 3px #004c76, 0 0 7px 4px #004c76;
Copy link
Contributor

Choose a reason for hiding this comment

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

Were inputs from UX taken regarding these. On focus the red color disappears which does not seem correct

Copy link
Contributor Author

Choose a reason for hiding this comment

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

These styles has been removed and added outline around the red colour border when it gets focussed. So that we can see the red colour border as usual with outline.

--terra-form-select-invalid-hover-border-color: #fb4c4c;
--terra-form-select-arrow-height: 0.715rem;
--terra-form-select-arrow-width: 1rem;
Expand Down
3 changes: 2 additions & 1 deletion packages/terra-form-select/src/shared/_Frame.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,8 @@

&.is-invalid.is-focused {
background-size: var(--terra-form-select-invalid-focus-background-size, 0 0);
border-color: var(--terra-form-select-invalid-focus-border-color, #e50000);
border-color: var(--terra-form-select-single-select-invalid-focus-border-color, #4cb2e9);
box-shadow: var(--terra-form-select-single-select-invalid-focus-box-shadow, 0 0 0 2px rgba(76, 178, 233, 0.25));
}

&.is-invalid:hover {
Expand Down
1 change: 1 addition & 0 deletions packages/terra-form-select/src/single/Frame.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,7 @@ class Frame extends React.Component {
event.preventDefault();
this.openDropdown();
} else if (keyCode === KeyCode.KEY_ESCAPE || (this.state.isOpen && keyCode === KeyCode.KEY_TAB)) {
event.preventDefault();
this.select.focus();
this.closeDropdown();
}
Expand Down
Binary file modified ...lowlight-theme/en/chrome_tiny/select-spec/closed_dropdown_with_tabbing_away.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...n-fusion-theme/en/chrome_tiny/select-spec/closed_dropdown_with_tabbing_away.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...-default-theme/en/chrome_tiny/select-spec/closed_dropdown_with_tabbing_away.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading