+ {{> elements-checkbox id=../id }} +
+{{/each }} diff --git a/source/_patterns/01-elements/checkbox/checkbox-sizes.json b/source/_patterns/01-elements/checkbox/checkbox-sizes.json new file mode 100644 index 00000000000..4fe2b47b95e --- /dev/null +++ b/source/_patterns/01-elements/checkbox/checkbox-sizes.json @@ -0,0 +1,18 @@ +{ + "sizes": [ + { + "size": "small", + "label": "Small" + }, + { + "size": "medium", + "label": "Medium (default, data-size attribute is optional)" + }, + { + "size": "large", + "label": "Large" + } + ], + "id": "checkbox05", + "label": "Checkbox" +} diff --git a/source/_patterns/01-elements/checkbox/checkbox.hbs b/source/_patterns/01-elements/checkbox/checkbox.hbs index 0fd79520b0f..23c49c7a64d 100644 --- a/source/_patterns/01-elements/checkbox/checkbox.hbs +++ b/source/_patterns/01-elements/checkbox/checkbox.hbs @@ -1,12 +1,14 @@ - + {{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }} + {{#if size }} data-size="{{ size }}"{{/if }} + {{#if required }} required{{/if }}> + {{#if indeterminate}} {{/if }} diff --git a/source/_patterns/01-elements/checkbox/checkbox.md b/source/_patterns/01-elements/checkbox/checkbox.md deleted file mode 100644 index 7b3ec8b057d..00000000000 --- a/source/_patterns/01-elements/checkbox/checkbox.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Checkbox -state: complete ---- - -[inspirational sources for this page]: # "https://www.uiguideline.com/components/checkbox" diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss index d4d770a23ef..fe37901e445 100644 --- a/source/_patterns/01-elements/checkbox/checkbox.scss +++ b/source/_patterns/01-elements/checkbox/checkbox.scss @@ -4,18 +4,25 @@ @import "checkbox.variables"; .elm-checkbox { - @include icon("\00A0", 24, "outline", $partial: $partial); + // $checkbox-size: 16; + // TODO: Replace this ugly hack as soon as we've got this as an icon font as well + $checkbox-size: 20; + &:before { + font-size: 18px; + } + + @include icon("\00A0", $checkbox-size, "outline", $partial: $partial); appearance: none; background-color: $checkbox---backgroundColor; - border: #{to-rem($pxValue: 1)} solid $checkbox---borderColor; - border-radius: 4px; + border: 1px solid $checkbox---borderColor; + border-radius: 3px; color: $checkbox---color; - height: to-rem($pxValue: 24); + height: to-rem($pxValue: $checkbox-size); &[type="checkbox"] { - vertical-align: top; + vertical-align: middle; } - width: to-rem($pxValue: 24); + width: to-rem($pxValue: $checkbox-size); display: inline-flex; justify-content: center; @@ -45,7 +52,7 @@ } } &:active { - background-color: rgba(40, 45, 55, 0.14); + background-color: rgba(0, 0, 0, 0.24); } } @@ -58,11 +65,57 @@ &:disabled { &, & + label { - opacity: 0.5; + opacity: 0.25; } } & + label { margin-left: $db-spacing-xs; + + font-size: to-rem($pxValue: 12); + } + + // Sizes + &%size-Small { + $checkbox-size: 16; + // TODO: Replace this ugly hack as soon as we've got this as an icon font as well + &:before { + font-size: 14px; + } + + height: to-rem($pxValue: $checkbox-size); + width: to-rem($pxValue: $checkbox-size); + // TODO: Replace this ugly hack as soon as we've got this as an icon font as well + // @include iconMeta($checkbox-size); + @include iconMeta(20); + } + &%size-Large { + $checkbox-size: 24; + &:before { + font-size: 24px; + } + + height: to-rem($pxValue: $checkbox-size); + width: to-rem($pxValue: $checkbox-size); + @include iconMeta($checkbox-size); + + & + label { + font-size: to-rem($pxValue: 16); + } + } + + &[data-size="small"] { + @extend %size-Small; + } + &[data-size="large"] { + @extend %size-Large; + } + + &:required { + & + label { + &::after { + content: " *"; + } + } } } diff --git a/source/_patterns/01-elements/checkbox/checkbox~required.json b/source/_patterns/01-elements/checkbox/checkbox~required.json new file mode 100644 index 00000000000..14cafc4d8bf --- /dev/null +++ b/source/_patterns/01-elements/checkbox/checkbox~required.json @@ -0,0 +1,4 @@ +{ + "id": "checkbox06", + "required": true +} diff --git a/tests/backstop.json b/tests/backstop.json index d71276a0b23..3c222f05211 100644 --- a/tests/backstop.json +++ b/tests/backstop.json @@ -539,48 +539,18 @@ }, { "label": "Checkbox", - "url": "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox/elements-checkbox-checkbox.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox-checkbox/elements-checkbox-checkbox.rendered.html" + "url": "http://127.0.0.1:8080/patterns/elements-checkbox/index.html", + "referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox/index.html" }, { - "label": "Checkbox Checked", - "url": "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-checked/elements-checkbox-checkbox-checked.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox-checkbox-checked/elements-checkbox-checkbox-checked.rendered.html" - }, - { - "label": "Checkbox Disabled", - "url": "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-disabled/elements-checkbox-checkbox-disabled.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox-checkbox-disabled/elements-checkbox-checkbox-disabled.rendered.html" - }, - { - "label": "Checkbox Disabled Checked", - "url": "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-disabled-checked/elements-checkbox-checkbox-disabled-checked.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox-checkbox-disabled-checked/elements-checkbox-checkbox-disabled-checked.rendered.html" - }, - { - "label": "Checkbox Indeterminate", - "url": "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-indeterminate/elements-checkbox-checkbox-indeterminate.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox-checkbox-indeterminate/elements-checkbox-checkbox-indeterminate.rendered.html" - }, - { - "label": "Checkbox Indeterminate Checked", - "url": "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-on-dark-background-indeterminate/elements-checkbox-checkbox-on-dark-background-indeterminate.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox-checkbox-on-dark-background-indeterminate/elements-checkbox-checkbox-on-dark-background-indeterminate.rendered.html" - }, - { - "label": "Checkbox On Dark Background Checked", - "url": "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-on-dark-background-checked/elements-checkbox-checkbox-on-dark-background-checked.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox-checkbox-on-dark-background-checked/elements-checkbox-checkbox-on-dark-background-checked.rendered.html" - }, - { - "label": "Checkbox On Dark Background Disabled", - "url": "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-on-dark-background-disabled/elements-checkbox-checkbox-on-dark-background-disabled.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox-checkbox-on-dark-background-disabled/elements-checkbox-checkbox-on-dark-background-disabled.rendered.html" - }, - { - "label": "Checkbox On Dark Background Disabled Checked", - "url": "http://127.0.0.1:8080/patterns/elements-checkbox-checkbox-on-dark-background-disabled-checked/elements-checkbox-checkbox-on-dark-background-disabled-checked.rendered.html", - "referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox-checkbox-on-dark-background-disabled-checked/elements-checkbox-checkbox-on-dark-background-disabled-checked.rendered.html" + "label": "Checkbox - hovered", + "url": "http://127.0.0.1:8080/patterns/elements-checkbox/index.html", + "referenceUrl": "https://db-ui.github.io/core/patterns/elements-checkbox/index.html", + "hoverSelectors": [ + ".elm-checkbox" + ], + "postInteractionWait": 1000, + "onReadyScript": "puppet/clickAndHoverHelper.js" }, { "label": "Image",