Skip to content

Commit

Permalink
Merge pull request #2621 from epam/fix/border-radius-with-focus
Browse files Browse the repository at this point in the history 
Fixed wrong border radius in focus state for components
  • Loading branch information
@AlekseyManetov
AlekseyManetov authored Nov 12, 2024
2 parents b73cda9 + 7e7d676 commit b5d19c4
Show file tree
Hide file tree
Showing 19 changed files with 26 additions and 18 deletions.
1 change: 1 addition & 0 deletions app/src/docs/_examples/linkButton/DefaultExample.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
align-items: flex-end;
margin-right: 12px;
min-width: 120px;
overflow: unset;
}

.descriptions {
Expand Down
3 changes: 1 addition & 2 deletions uui/assets/styles/effects.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@mixin dnd-ghost-shadow() { box-shadow: var(--uui-shadow-level-3); }

@mixin focus-visible-effect($offset: var(--uui-focus-outline-offset), $radius: var(--uui-focus-radius)) {
@mixin focus-visible-effect($offset: var(--uui-focus-outline-offset)) {
outline: var(--uui-focus-outline-width) solid var(--uui-outline-focus);
outline-offset: $offset;
border-radius: $radius;
}
3 changes: 2 additions & 1 deletion uui/assets/styles/typography.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,8 @@
text-decoration: underline;

&:focus-visible {
@include focus-visible-effect(2px, 2px);
@include focus-visible-effect(2px);
border-radius: var(--uui-focus-radius);
}

&:visited {
Expand Down
3 changes: 3 additions & 0 deletions uui/components/buttons/IconButton.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
--uui-icon_btn-hover: var(--uui-color-60);
--uui-icon_btn-active: var(--uui-color-70);
--uui-icon_btn-disabled: var(--uui-icon-disabled); // from core or color class? Current - from core

--uui-icon_btn-focus-radius: var(--uui-focus-radius);
//
fill: var(--uui-icon_btn);

Expand All @@ -25,6 +27,7 @@

&:focus-visible {
@include focus-visible-effect();
border-radius: var(--uui-icon_btn-focus-radius);
}
}

Expand Down
4 changes: 3 additions & 1 deletion uui/components/buttons/LinkButton.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
--uui-link-button-icon-height: var(--uui-icon-size);
--uui-link-button-line-height: var(--uui-line-height);
--uui-link-button-font-size: var(--uui-font-size);
--uui-link-button-focus-radius: var(--uui-focus-radius);
//
min-width: var(--uui-link-button-min-width);

Expand Down Expand Up @@ -48,7 +49,8 @@
}

&:focus-visible {
@include focus-visible-effect(2px, 2px);
@include focus-visible-effect(2px);
border-radius: var(--uui-link-button-focus-radius);
}
}

Expand Down
2 changes: 1 addition & 1 deletion uui/components/buttons/TabButton.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
}

&:global(.-clickable):focus-visible {
@include focus-visible-effect(calc(0 - var(--uui-focus-outline-width)), 0);
@include focus-visible-effect(calc(0 - var(--uui-focus-outline-width)));
}

&:global(.uui-disabled) {
Expand Down
3 changes: 2 additions & 1 deletion uui/components/inputs/Switch.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,8 @@
box-sizing: border-box;

:global(input[type='checkbox']):focus-visible {
@include focus-visible-effect(var(--uui-focus-outline-offset), inherit);
@include focus-visible-effect(var(--uui-focus-outline-offset));
border-radius: var(--uui-switch-min-height);
width: inherit;
height: inherit;
position: absolute;
Expand Down
2 changes: 1 addition & 1 deletion uui/components/layout/Accordion.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
cursor: pointer;

&:focus-visible {
@include focus-visible-effect(-2px, 0);
@include focus-visible-effect(-2px);
}
}

Expand Down
3 changes: 2 additions & 1 deletion uui/components/navigation/Anchor.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

.root {
&:global(.-clickable):focus-visible {
@include focus-visible-effect(2px, 2px);
@include focus-visible-effect(2px);
border-radius: var(--uui-focus-radius);
}
}
2 changes: 1 addition & 1 deletion uui/components/navigation/MainMenu/Burger/Burger.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
}

&:focus-visible {
@include focus-visible-effect(-2px, 0);
@include focus-visible-effect(-2px);
}

:global(.uui-icon) svg {
Expand Down
2 changes: 1 addition & 1 deletion uui/components/navigation/MainMenu/Burger/BurgerButton.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
}

&:focus-visible {
@include focus-visible-effect(-2px, null);
@include focus-visible-effect(-2px);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion uui/components/navigation/MainMenu/GlobalMenu.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
}

&:focus-visible {
@include focus-visible-effect(-2px, 0);
@include focus-visible-effect(-2px);
}
}

Expand Down
2 changes: 1 addition & 1 deletion uui/components/navigation/MainMenu/MainMenu.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,6 @@
}

:global(.-clickable):focus-visible {
@include focus-visible-effect(-2px, 0);
@include focus-visible-effect(-2px);
}
}
2 changes: 1 addition & 1 deletion uui/components/navigation/MainMenu/MainMenuAvatar.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
}

&:focus-visible {
@include focus-visible-effect(-2px, 0);
@include focus-visible-effect(-2px);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion uui/components/navigation/MainMenu/MainMenuDropdown.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
}

&:focus-visible {
@include focus-visible-effect(-2px, null);
@include focus-visible-effect(-2px);
}
}

Expand Down
2 changes: 1 addition & 1 deletion uui/components/overlays/DropdownMenu.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@
}

&:focus-visible {
@include focus-visible-effect(-2px, null);
@include focus-visible-effect(-2px);
}
}

Expand Down
2 changes: 1 addition & 1 deletion uui/components/tables/columnsConfigurationModal/ColumnsConfigurationModal.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@

.subgroup-accordion {
:global(.uui-accordion-toggler):focus-visible {
@include focus-visible-effect(-2px, 0);
@include focus-visible-effect(-2px);
}

.subgroup {
Expand Down
2 changes: 1 addition & 1 deletion uui/components/widgets/AvatarStack.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

:global(.-clickable) {
&:focus-visible {
@include focus-visible-effect(2px, 50%);
@include focus-visible-effect(2px);
}

&:focus-visible, &:hover {
Expand Down
2 changes: 1 addition & 1 deletion uui/components/widgets/Badge.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
}

&:global(.-clickable):focus-visible {
@include focus-visible-effect(2px, null); // todo
@include focus-visible-effect(2px);
}

&:global(.uui-fill-solid) {
Expand Down

0 comments on commit b5d19c4

Please sign in to comment.