Skip to content

Commit

Permalink
Update test snapshots impacted by Radio changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sundfjord
Sundfjord committed Nov 13, 2023
1 parent 3de03b3 commit c2e3290
Show file tree
Hide file tree
Showing 2 changed files with 212 additions and 0 deletions.
106 changes: 106 additions & 0 deletions ...s/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2854,10 +2854,39 @@ button .dnb-form-status__text {
--radio-width--large: 2rem;
--radio-height--large: 2rem;
--radio-border-width: 0.125rem;
--radio-color-dot-on: var(--color-sea-green);
--radio-color-background-on: var(--color-white);
--radio-color-border-on: var(--color-sea-green);
--radio-color-background-off: var(--color-white);
--radio-color-border-off: var(--color-sea-green);
--radio-color-dot-on--disabled: var(--color-sea-green-30);
--radio-color-border-on--disabled: var(--color-sea-green-30);
--radio-color-border-off--disabled: var(--color-mint-green-50);
--radio-color-dot-on--active: var(--color-mint-green-50);
--radio-color-border-on--active: var(--color-mint-green-50);
--radio-color-background-off--active: var(--color-mint-green-50);
--radio-color-border-off--active: transparent;
--radio-color-dot-on--hover: var(--color-mint-green-50);
--radio-color-background-off--hover: var(--color-mint-green-50);
--radio-color-background-on--focus: var(--color-white);
--radio-color-background-off--focus: var(--color-mint-green-50);
--radio-color-dot-on--error: var(--color-fire-red);
--radio-color-border-on--error: var(--color-fire-red);
--radio-color-background-off--error: var(--color-fire-red-8);
--radio-color-dot-on--error-hover: var(--color-fire-red-8);
display: inline-flex;
flex-direction: column;
font-size: var(--font-size-small);
line-height: var(--line-height-basis);
/** Color scheme **/
/* stylelint-disable no-descending-specificity */
/** Normal state **/
/** Disabled state **/
/** Active state **/
/** Hover state **/
/** Focus state **/
/** Error state **/
/* stylelint-enable no-descending-specificity */
}
.dnb-radio__inner {
display: inline-flex;
Expand Down Expand Up @@ -2904,6 +2933,8 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
width: calc(var(--radio-width--medium) - 0.75rem);
height: calc(var(--radio-height--medium) - 0.75rem);
border-radius: 50%;
background-color: var(--radio-color-dot-on);
transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.dnb-radio--large .dnb-radio__dot {
width: calc(var(--radio-width--large) - 0.875rem);
Expand Down Expand Up @@ -2989,6 +3020,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
.dnb-radio > .dnb-form-status {
transform: translateY(0.25rem); /* 4/16 */
}
.dnb-radio-group {
--radio-group-margin-bottom: 0.5rem;
--radio-group-margin-right: 1rem;
Expand Down Expand Up @@ -3030,6 +3064,78 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
.dnb-skeleton .dnb-radio__input[disabled] ~ .dnb-radio__button {
border-color: var(--skeleton-color);
}
.dnb-radio__input:checked ~ .dnb-radio__button, .dnb-radio__input[data-checked=true] ~ .dnb-radio__button {
background-color: var(--radio-color-background-on);
border-color: var(--radio-color-border-on);
}
.dnb-radio__input:checked ~ .dnb-radio__dot, .dnb-radio__input[data-checked=true] ~ .dnb-radio__dot {
opacity: 1;
transform: scale(1);
}
.dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__dot {
opacity: 0;
transform: scale(0.8);
}
.dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
background-color: var(--radio-color-background-off);
border-color: var(--radio-color-border-off);
}
.dnb-radio__input[disabled]:checked ~ .dnb-radio__button, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__button {
border-color: var(--radio-color-border-on--disabled);
}
.dnb-radio__input[disabled]:checked ~ .dnb-radio__dot, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__dot {
background-color: var(--radio-color-dot-on--disabled);
}
.dnb-radio__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
border-color: var(--radio-color-border-off--disabled);
}
.dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__button, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__button {
border-color: var(--radio-color-border-on--active);
}
.dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__dot, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__dot {
background-color: var(--radio-color-dot-on--active);
}
.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active ~ .dnb-radio__button {
background-color: var(--radio-color-background-off--active);
border-color: var(--radio-color-border-off--active);
}
.dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__dot, .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__dot {
background-color: var(--radio-color-dot-on--hover);
}
.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
background-color: var(--radio-color-background-off--hover);
}
html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__button {
border: none;
}
.dnb-radio__input:not([disabled]):focus ~ .dnb-radio__focus, .dnb-radio__input:not([disabled]):active ~ .dnb-radio__focus {
display: block;
}
.dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__button {
background-color: var(--radio-color-background-on--focus);
}
html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button {
background-color: var(--radio-color-background-off--focus);
}
.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__button {
border: none;
}
.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__focus {
display: block;
--border-color: var(--radio-color-border-on--error);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true] ~ .dnb-radio__dot {
background-color: var(--radio-color-dot-on--error);
}
.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__dot {
background-color: var(--radio-color-dot-on--error-hover);
}
.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
background-color: var(--radio-color-background-off--error);
}
/*
* Used for snapshot testing
Expand Down
106 changes: 106 additions & 0 deletions ...b-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1036,10 +1036,39 @@ button .dnb-form-status__text {
--radio-width--large: 2rem;
--radio-height--large: 2rem;
--radio-border-width: 0.125rem;
--radio-color-dot-on: var(--color-sea-green);
--radio-color-background-on: var(--color-white);
--radio-color-border-on: var(--color-sea-green);
--radio-color-background-off: var(--color-white);
--radio-color-border-off: var(--color-sea-green);
--radio-color-dot-on--disabled: var(--color-sea-green-30);
--radio-color-border-on--disabled: var(--color-sea-green-30);
--radio-color-border-off--disabled: var(--color-mint-green-50);
--radio-color-dot-on--active: var(--color-mint-green-50);
--radio-color-border-on--active: var(--color-mint-green-50);
--radio-color-background-off--active: var(--color-mint-green-50);
--radio-color-border-off--active: transparent;
--radio-color-dot-on--hover: var(--color-mint-green-50);
--radio-color-background-off--hover: var(--color-mint-green-50);
--radio-color-background-on--focus: var(--color-white);
--radio-color-background-off--focus: var(--color-mint-green-50);
--radio-color-dot-on--error: var(--color-fire-red);
--radio-color-border-on--error: var(--color-fire-red);
--radio-color-background-off--error: var(--color-fire-red-8);
--radio-color-dot-on--error-hover: var(--color-fire-red-8);
display: inline-flex;
flex-direction: column;
font-size: var(--font-size-small);
line-height: var(--line-height-basis);
/** Color scheme **/
/* stylelint-disable no-descending-specificity */
/** Normal state **/
/** Disabled state **/
/** Active state **/
/** Hover state **/
/** Focus state **/
/** Error state **/
/* stylelint-enable no-descending-specificity */
}
.dnb-radio__inner {
display: inline-flex;
Expand Down Expand Up @@ -1086,6 +1115,8 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
width: calc(var(--radio-width--medium) - 0.75rem);
height: calc(var(--radio-height--medium) - 0.75rem);
border-radius: 50%;
background-color: var(--radio-color-dot-on);
transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.dnb-radio--large .dnb-radio__dot {
width: calc(var(--radio-width--large) - 0.875rem);
Expand Down Expand Up @@ -1171,6 +1202,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
.dnb-radio > .dnb-form-status {
transform: translateY(0.25rem); /* 4/16 */
}
.dnb-radio-group {
--radio-group-margin-bottom: 0.5rem;
--radio-group-margin-right: 1rem;
Expand Down Expand Up @@ -1212,6 +1246,78 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
.dnb-skeleton .dnb-radio__input[disabled] ~ .dnb-radio__button {
border-color: var(--skeleton-color);
}
.dnb-radio__input:checked ~ .dnb-radio__button, .dnb-radio__input[data-checked=true] ~ .dnb-radio__button {
background-color: var(--radio-color-background-on);
border-color: var(--radio-color-border-on);
}
.dnb-radio__input:checked ~ .dnb-radio__dot, .dnb-radio__input[data-checked=true] ~ .dnb-radio__dot {
opacity: 1;
transform: scale(1);
}
.dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__dot {
opacity: 0;
transform: scale(0.8);
}
.dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
background-color: var(--radio-color-background-off);
border-color: var(--radio-color-border-off);
}
.dnb-radio__input[disabled]:checked ~ .dnb-radio__button, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__button {
border-color: var(--radio-color-border-on--disabled);
}
.dnb-radio__input[disabled]:checked ~ .dnb-radio__dot, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__dot {
background-color: var(--radio-color-dot-on--disabled);
}
.dnb-radio__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
border-color: var(--radio-color-border-off--disabled);
}
.dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__button, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__button {
border-color: var(--radio-color-border-on--active);
}
.dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__dot, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__dot {
background-color: var(--radio-color-dot-on--active);
}
.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active ~ .dnb-radio__button {
background-color: var(--radio-color-background-off--active);
border-color: var(--radio-color-border-off--active);
}
.dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__dot, .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__dot {
background-color: var(--radio-color-dot-on--hover);
}
.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
background-color: var(--radio-color-background-off--hover);
}
html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__button {
border: none;
}
.dnb-radio__input:not([disabled]):focus ~ .dnb-radio__focus, .dnb-radio__input:not([disabled]):active ~ .dnb-radio__focus {
display: block;
}
.dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__button {
background-color: var(--radio-color-background-on--focus);
}
html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button {
background-color: var(--radio-color-background-off--focus);
}
.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__button {
border: none;
}
.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__focus {
display: block;
--border-color: var(--radio-color-border-on--error);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true] ~ .dnb-radio__dot {
background-color: var(--radio-color-dot-on--error);
}
.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__dot {
background-color: var(--radio-color-dot-on--error-hover);
}
.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
background-color: var(--radio-color-background-off--error);
}
/*
* Used for snapshot testing
Expand Down

0 comments on commit c2e3290

Please sign in to comment.