-
Notifications
You must be signed in to change notification settings - Fork 55
Conversation
Codecov Report
@@ Coverage Diff @@
## master #1269 +/- ##
==========================================
- Coverage 72.55% 72.36% -0.19%
==========================================
Files 754 756 +2
Lines 5647 5678 +31
Branches 1677 1662 -15
==========================================
+ Hits 4097 4109 +12
- Misses 1544 1563 +19
Partials 6 6
Continue to review full report at Codecov.
|
4160d18
to
e1e81cd
Compare
e1e81cd
to
208b974
Compare
packages/react/src/themes/teams-high-contrast/components/Alert/alertStyles.ts
Show resolved
Hide resolved
The focus border as originally implemented appears around the item, but in this PR it looks like it is within the item. Has the design changed to be more easily implemented? This is pretty subtle in normal themes, but in contrast the "focus border" was much thicker and would look distinctly different if drawn "inside" the button. |
f9e2feb
to
b83cc4c
Compare
@bcalvery these changes are all part of the new design indeed |
5ba6650
to
ee1120d
Compare
packages/react/src/themes/teams-high-contrast/components/Button/buttonVariables.ts
Outdated
Show resolved
Hide resolved
packages/react/src/themes/teams-high-contrast/components/Button/buttonVariables.ts
Show resolved
Hide resolved
c1f8c4d
to
998a609
Compare
packages/react/src/themes/teams-high-contrast/components/Attachment/attachmentStyles.ts
Show resolved
Hide resolved
packages/react/src/themes/teams/components/Alert/alertStyles.ts
Outdated
Show resolved
Hide resolved
71c726d
to
851d06a
Compare
packages/react/src/themes/teams/components/Alert/alertStyles.ts
Outdated
Show resolved
Hide resolved
packages/react/src/themes/teams/components/Attachment/attachmentStyles.ts
Show resolved
Hide resolved
5d97b4e
to
bc1ef5b
Compare
I had to squash my commits into one in order to be able to merge more easily the big amount of changes that got to master recently via #1069 |
* changelog * - removed side effects from getBorderFocusStyles by not applying any styles to the element directly (only when focused from keyboard); * - reverted changes to ':active' selector and refactored for readability * aligned alert focus styles with new approach * aligned border colors to latest design * aligned border colors to latest design v2 * fix outline * changelog update * addressed PR comments: * - optimized attachment dom structure (removed 2 redundant DOM elements); * - boxShadow consistency fixes; * - fixed wrong casting; * - improved comments. * added consistency in icon styles outline vs filled * chose better name for getIconFillOrOutlineStyles * addressed PR comments
407376b
to
f78512f
Compare
feat(border): focus styles mechanism
BREAKING CHANGES MIGRATION STEPS
The following component variables have been removed from:
Attachment
:focusInnerBorderColor
,focusOuterBorderColor
Button
:circularRadius
,colorActive
,borderColorActive
,borderColorFocus
,borderColorFocusIndicator
,borderColorDisabled
,borderWidth
,primaryColorActive
,primaryBorderColorActive
,primaryBorderColorHover
,primaryBorderColorFocus
,primaryBorderColorFocusIndicator
,primaryBorderWidth
,primaryCircularBorderColorFocusIndicator
,circularBorderColorActive
,circularBorderColorFocusIndicator
,borderRadiusFocused
RadioGroupItem
:focusInnerBorderColor
,focusOuterBorderColor
These variables are deprecated and should not be used.
For the variables related to borders, Teams now have a unified way of displaying it that is consistent with the whole Teams theme => border styles should be unified, no custom border appearances.
For the other variables, they were either used in dead style objects or they do not match redline requirements => NO IMPACT
Description
This PR covers:
implementation of utility function that will be used for styling components on focus state (from keyboard):
getBorderFocusStyles
fromgetBorderFocusStyles.ts
integration of
getBorderFocusStyles
for border focus styles for following components:Button
Attachment
RadioGroupItem
Screenshots for
Button
:Regular Theme
Dark Theme
High Contrast Theme
We will adopt this mechanism for all other components in separate PR.
siteVariables.ts
getBorderFocusStyles
and generic border styles fromsiteVariables.ts
Button
outline styles overlapping issue inGrid
:BEFORE
AFTER