Merge branch 'next'

CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.2.1
+
+### UiSelectOption
+
+- Allow a `Number` as option. See [#472](https://github.com/JosephusPaye/Keen-UI/issues/472).
+
+### UiCheckbox, UiRadio, UiRadioGroup
+
+- Change selected check to use strict equals (`===`) instead of loose equal (`==`). This allows an empty string `''` to be used as the radio or checkbox's value. See [#465](https://github.com/JosephusPaye/Keen-UI/issues/465).
+
+### UiCheckbox
+
+- Apply `border-radius` to checkmark background. Also switch background from `::before` pseudo element to an actual element: `.ui-checkbox__checkmark-background`. This avoids visual artifacts that appear when applying `border-radius` to a pseudo element. See [#471](https://github.com/JosephusPaye/Keen-UI/issues/471).
+
+### UiDatepicker
+
+- Add new prop `defaultView` to set the default datepicker view: `date` or `year`. See [#454](https://github.com/JosephusPaye/Keen-UI/pull/454).
+
+### UiTextbox
+
+- Add new prop `minlength` to set the `minlength` attribute on the textbox input or textarea.
+- Allow a `Number` for `step` prop. See [#460](https://github.com/JosephusPaye/Keen-UI/issues/460).
+- Ensure floating label doesn't overflow parent when scaling up. See [#447](https://github.com/JosephusPaye/Keen-UI/issues/447).
+
 # v1.2.0
 
 ### UiCalendar (new)

build/options.js

@@ -4,7 +4,7 @@ const path = require('path');
 
 // Hardcoding here (and not reading from package.json) as the files are built
 // before the version is updated in package.json
-const version = '1.2.0';
+const version = '1.2.1';
 
 const banner =
   '/*!\n' +

dist/keen-ui.css

@@ -1,5 +1,5 @@
 /*!
- * Keen UI v1.2.0 (https://github.com/JosephusPaye/keen-ui)
+ * Keen UI v1.2.1 (https://github.com/JosephusPaye/keen-ui)
  * (c) 2019 Josephus Paye II
  * Released under the MIT License.
  */
@@ -1831,7 +1831,7 @@ body[modality="keyboard"] .ui-calendar-week--color-accent .ui-calendar-week__dat
   margin-bottom: 0.5rem;
   position: relative;
 }
-.ui-checkbox:not(.is-disabled):not(.is-checked):hover .ui-checkbox__checkmark::before, .ui-checkbox:not(.is-disabled):not(.is-checked).is-active .ui-checkbox__checkmark::before {
+.ui-checkbox:not(.is-disabled):not(.is-checked):hover .ui-checkbox__checkmark-background, .ui-checkbox:not(.is-disabled):not(.is-checked).is-active .ui-checkbox__checkmark-background {
     border-color: rgba(0, 0, 0, 0.6);
 }
 .ui-checkbox.is-checked .ui-checkbox__checkmark::after {
@@ -1844,10 +1844,10 @@ body[modality="keyboard"] .ui-calendar-week--color-accent .ui-calendar-week__dat
     color: rgba(0, 0, 0, 0.38);
     cursor: default;
 }
-.ui-checkbox.is-disabled .ui-checkbox__checkmark::before {
+.ui-checkbox.is-disabled .ui-checkbox__checkmark-background {
     border-color: rgba(0, 0, 0, 0.26);
 }
-.ui-checkbox.is-disabled.is-checked .ui-checkbox__checkmark::before {
+.ui-checkbox.is-disabled.is-checked .ui-checkbox__checkmark-background {
     background-color: rgba(0, 0, 0, 0.26);
     border: none;
 }
@@ -1864,20 +1864,7 @@ body[modality="keyboard"] .ui-calendar-week--color-accent .ui-calendar-week__dat
   height: 1.25rem;
   position: relative;
   width: 1.25rem;
-}
-.ui-checkbox__checkmark::before {
-    border-radius: 0.125rem;
-    border: 0.125rem solid rgba(0, 0, 0, 0.38);
-    box-sizing: border-box;
-    content: "";
-    display: block;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    -webkit-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-    width: 100%;
+  border-radius: 0.125rem;
 }
 .ui-checkbox__checkmark::after {
     bottom: 0.3125rem;
@@ -1896,6 +1883,20 @@ body[modality="keyboard"] .ui-calendar-week--color-accent .ui-calendar-week__dat
     transition: opacity 0.3s ease;
     width: 0.375rem;
 }
+.ui-checkbox__checkmark-background {
+  border-radius: 0.125rem;
+  border: 0.125rem solid rgba(0, 0, 0, 0.38);
+  box-sizing: border-box;
+  content: "";
+  display: block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+  width: 100%;
+}
 .ui-checkbox__input {
   position: absolute;
   opacity: 0;
@@ -1932,22 +1933,22 @@ body[modality="keyboard"] .ui-checkbox__input:focus + .ui-checkbox__checkmark .u
       -ms-flex-order: -1;
           order: -1;
 }
-.ui-checkbox--color-primary:not(.is-disabled).is-checked:hover .ui-checkbox__checkmark::before, .ui-checkbox--color-primary:not(.is-disabled).is-checked.is-active .ui-checkbox__checkmark::before {
+.ui-checkbox--color-primary:not(.is-disabled).is-checked:hover .ui-checkbox__checkmark-background, .ui-checkbox--color-primary:not(.is-disabled).is-checked.is-active .ui-checkbox__checkmark-background {
   background-color: #0d8aee;
   border-color: #0d8aee;
 }
-.ui-checkbox--color-primary.is-checked .ui-checkbox__checkmark::before {
+.ui-checkbox--color-primary.is-checked .ui-checkbox__checkmark-background {
   background-color: #2196f3;
   border-color: #2196f3;
 }
 .ui-checkbox--color-primary.is-checked .ui-checkbox__focus-ring {
   background-color: rgba(33, 150, 243, 0.18);
 }
-.ui-checkbox--color-accent:not(.is-disabled).is-checked:hover .ui-checkbox__checkmark::before, .ui-checkbox--color-accent:not(.is-disabled).is-checked.is-active .ui-checkbox__checkmark::before {
+.ui-checkbox--color-accent:not(.is-disabled).is-checked:hover .ui-checkbox__checkmark-background, .ui-checkbox--color-accent:not(.is-disabled).is-checked.is-active .ui-checkbox__checkmark-background {
   background-color: #bf00e0;
   border-color: #bf00e0;
 }
-.ui-checkbox--color-accent.is-checked .ui-checkbox__checkmark::before {
+.ui-checkbox--color-accent.is-checked .ui-checkbox__checkmark-background {
   background-color: #d500f9;
   border-color: #d500f9;
 }
@@ -4310,6 +4311,9 @@ body[modality="keyboard"] .ui-tabs--background-color-primary .ui-tab-header-item
 }
 .ui-textbox.has-floating-label .ui-textbox__label-text {
     display: table;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
 }
 .ui-textbox.has-floating-label .ui-textbox__label-text.is-inline {
       color: rgba(0, 0, 0, 0.54);