Skip to content

Commit

Permalink
fix: IE11 enhancements for #checkbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujoworker
tujoworker committed Jul 6, 2019
1 parent 9529a3c commit 07b2772
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 73 deletions.
14 changes: 13 additions & 1 deletion packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -481,6 +481,8 @@ legend.dnb-form-label {
transform: translateY(-0.0625rem); }
.dnb-checkbox__focus, .dnb-checkbox__button, .dnb-checkbox__gfx {
position: absolute;
top: auto;
left: auto;
z-index: 4;
border-radius: 0.25rem; }
.dnb-checkbox__button {
Expand All @@ -496,14 +498,17 @@ legend.dnb-form-label {
height: calc(var(--checkbox-height) - 0.25rem); }
.dnb-checkbox__gfx {
position: absolute;
top: auto;
left: auto;
width: var(--checkbox-height);
height: var(--checkbox-height);
fill: currentColor;
shape-rendering: geometricPrecision; }
.dnb-checkbox__input {
opacity: 0;
position: absolute;
left: 0;
top: auto;
left: auto;
z-index: 5;
width: var(--checkbox-width);
height: var(--checkbox-height);
Expand Down Expand Up @@ -532,5 +537,12 @@ legend.dnb-form-label {
.dnb-checkbox--label-position-right + .dnb-form-status {
vertical-align: top;
margin-top: 0.5rem; }
@media all and (-ms-high-contrast: none) {
.dnb-checkbox__shell, .dnb-checkbox__input, .dnb-checkbox__button {
top: 0.125rem;
left: 0.125rem; }
.dnb-checkbox__gfx, .dnb-checkbox__focus {
top: 0;
left: 0; } }
"
`;
22 changes: 21 additions & 1 deletion packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@
&__button,
&__gfx {
position: absolute;
top: auto;
left: auto;
z-index: 4;

border-radius: 0.25rem;
Expand All @@ -57,6 +59,8 @@
}
&__gfx {
position: absolute;
top: auto;
left: auto;
width: var(--checkbox-height);
height: var(--checkbox-height);

Expand All @@ -68,7 +72,8 @@
opacity: 0;

position: absolute;
left: 0;
top: auto;
left: auto;
z-index: 5;

width: var(--checkbox-width);
Expand Down Expand Up @@ -121,4 +126,19 @@
margin-top: 0.5rem;
}
}

// IE fix
@media all and (-ms-high-contrast: none) {
&__shell,
&__input,
&__button {
top: 0.125rem;
left: 0.125rem;
}
&__gfx,
&__focus {
top: 0;
left: 0;
}
}
}
14 changes: 13 additions & 1 deletion ...dnb-ui-lib/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1149,6 +1149,8 @@ a.dnb-button .dnb-button__text {
transform: translateY(-0.0625rem); }
.dnb-checkbox__focus, .dnb-checkbox__button, .dnb-checkbox__gfx {
position: absolute;
top: auto;
left: auto;
z-index: 4;
border-radius: 0.25rem; }
.dnb-checkbox__button {
Expand All @@ -1164,14 +1166,17 @@ a.dnb-button .dnb-button__text {
height: calc(var(--checkbox-height) - 0.25rem); }
.dnb-checkbox__gfx {
position: absolute;
top: auto;
left: auto;
width: var(--checkbox-height);
height: var(--checkbox-height);
fill: currentColor;
shape-rendering: geometricPrecision; }
.dnb-checkbox__input {
opacity: 0;
position: absolute;
left: 0;
top: auto;
left: auto;
z-index: 5;
width: var(--checkbox-width);
height: var(--checkbox-height);
Expand Down Expand Up @@ -1200,6 +1205,13 @@ a.dnb-button .dnb-button__text {
.dnb-checkbox--label-position-right + .dnb-form-status {
vertical-align: top;
margin-top: 0.5rem; }
@media all and (-ms-high-contrast: none) {
.dnb-checkbox__shell, .dnb-checkbox__input, .dnb-checkbox__button {
top: 0.125rem;
left: 0.125rem; }
.dnb-checkbox__gfx, .dnb-checkbox__focus {
top: 0;
left: 0; } }
/*
* DNB Radio
Expand Down
146 changes: 76 additions & 70 deletions packages/dnb-ui-lib/stories/components/Checkbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,90 +9,96 @@ import { Wrapper, Box } from '../helpers'
import styled from '@emotion/styled'

import { Checkbox, FormLabel, FormRow } from '../../src/components'
// import { Checkbox, FormLabel, FormRow } from '../../components'

const CustomRow = styled(FormRow)`
> .dnb-form-label {
color: blue;
}
`

const CustomStyle = styled.div``

export default [
'Checkbox',
() => (
<Wrapper>
<Box>
<FormRow vertical disabled label="Without for_id (select me)">
<CustomStyle>
<Wrapper>
<Box>
<FormRow vertical disabled label="Without for_id (select me)">
<Checkbox label="Checkbox" />
</FormRow>
</Box>
<Box>
<Checkbox label="Checkbox" />
</FormRow>
</Box>
<Box>
<Checkbox label="Checkbox" />
</Box>
<Box>
<p className="dnb-p">
Text: <FormLabel for_id="checkbox">Unchecked:</FormLabel>
<Checkbox id="checkbox" />
</p>
</Box>
<Box>
<p className="dnb-p">
Text:{' '}
</Box>
<Box>
<p className="dnb-p">
Text: <FormLabel for_id="checkbox">Unchecked:</FormLabel>
<Checkbox id="checkbox" />
</p>
</Box>
<Box>
<p className="dnb-p">
Text:{' '}
<Checkbox
label="Checked"
checked
on_change={({ checked }) => {
console.log('on_change', checked)
}}
/>
</p>
</Box>
<Box>
<CustomRow size>
<FormLabel for_id="checkbox-2">
Vertical FormLabel for a Checkbox component Sapien rhoncus
sagittis pharetra ornare platea feugiat cras senectus
viverra:
</FormLabel>
<Checkbox
id="checkbox-2"
label="Unchecked"
on_change={({ checked }) => {
console.log('on_change', checked)
}}
/>
</CustomRow>
</Box>
<Box>
<FormLabel for_id="checkbox-1" direction="vertical" vertical>
Vertical FormLabel for a Checkbox component:
</FormLabel>
<Checkbox id="checkbox-1" label="Unchecked disabled" disabled />
</Box>
<Box>
<Checkbox label="Checked disabled" checked disabled />
</Box>
<Box>
<Checkbox
label="Checked"
checked
on_change={({ checked }) => {
console.log('on_change', checked)
}}
label="Potenti viverra facilisi blandit sodales lorem est fusce pulvinar a imperdiet quis mi parturient mattis feugiat tellus ipsum magnis rutrum"
status="Potenti viverra facilisi blandit sodales lorem est fusce pulvinar a imperdiet quis mi parturient mattis feugiat tellus ipsum magnis rutrum"
/>
</p>
</Box>
<Box>
<CustomRow size>
<FormLabel for_id="checkbox-2">
Vertical FormLabel for a Checkbox component Sapien rhoncus
sagittis pharetra ornare platea feugiat cras senectus viverra:
</FormLabel>
</Box>
<Box>
<Checkbox
id="checkbox-2"
label="Unchecked"
on_change={({ checked }) => {
console.log('on_change', checked)
}}
// label="Unchecked status error:"
label="Unchecked:"
label_position="left"
// status="Potenti viverra facilisi blandit sodales lorem est fusce pulvinar a imperdiet quis mi parturient mattis feugiat tellus ipsum magnis rutrum"
status="Potenti viverra facilisi blandit sodales lorem est fusce"
status_state="info"
/>
</Box>
<Box>
<Checkbox
label="Checked status message"
checked
status="Potenti viverra ft quis mi parturient mattis feugiat tellus ipsum magnis rutrum"
/>
</CustomRow>
</Box>
<Box>
<FormLabel for_id="checkbox-1" direction="vertical" vertical>
Vertical FormLabel for a Checkbox component:
</FormLabel>
<Checkbox id="checkbox-1" label="Unchecked disabled" disabled />
</Box>
<Box>
<Checkbox label="Checked disabled" checked disabled />
</Box>
<Box>
<Checkbox
label="Potenti viverra facilisi blandit sodales lorem est fusce pulvinar a imperdiet quis mi parturient mattis feugiat tellus ipsum magnis rutrum"
status="Potenti viverra facilisi blandit sodales lorem est fusce pulvinar a imperdiet quis mi parturient mattis feugiat tellus ipsum magnis rutrum"
/>
</Box>
<Box>
<Checkbox
// label="Unchecked status error:"
label="Unchecked:"
label_position="left"
// status="Potenti viverra facilisi blandit sodales lorem est fusce pulvinar a imperdiet quis mi parturient mattis feugiat tellus ipsum magnis rutrum"
status="Potenti viverra facilisi blandit sodales lorem est fusce"
status_state="info"
/>
</Box>
<Box>
<Checkbox
label="Checked status message"
checked
status="Potenti viverra ft quis mi parturient mattis feugiat tellus ipsum magnis rutrum"
/>
</Box>
</Wrapper>
</Box>
</Wrapper>
</CustomStyle>
)
]

0 comments on commit 07b2772

Please sign in to comment.