@vaadin/checkbox - npm Package Compare versions

Comparing version 23.0.0-alpha5 to 23.0.0-beta1

package.json

 {
   "name": "@vaadin/checkbox",
-  "version": "23.0.0-alpha5",
+  "version": "23.0.0-beta1",
   "publishConfig": {
@@ -37,7 +37,7 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.0.0-alpha5",
-    "@vaadin/field-base": "23.0.0-alpha5",
-    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha5",
-    "@vaadin/vaadin-material-styles": "23.0.0-alpha5",
-    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha5"
+    "@vaadin/component-base": "23.0.0-beta1",
+    "@vaadin/field-base": "23.0.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-beta1",
+    "@vaadin/vaadin-material-styles": "23.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-beta1"
   },
@@ -49,3 +49,3 @@ "devDependencies": {
   },
-  "gitHead": "74f9294964eb8552d96578c14af6ad214f5257bc"
+  "gitHead": "467244b76021176c109df675799b07029b293e58"
 }

src/vaadin-checkbox.d.ts

@@ -11,3 +11,3 @@ /**
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
-import { SlotLabelMixin } from '@vaadin/field-base/src/slot-label-mixin.js';
+import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -65,3 +65,3 @@
  */
-declare class Checkbox extends SlotLabelMixin(
+declare class Checkbox extends LabelMixin(
   CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement))))))
@@ -68,0 +68,0 @@ ) {

src/vaadin-checkbox.js

@@ -13,4 +13,5 @@ /**
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
+import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
-import { SlotLabelMixin } from '@vaadin/field-base/src/slot-label-mixin.js';
+import { SlotTargetController } from '@vaadin/field-base/src/slot-target-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -57,5 +58,5 @@
  * @mixes CheckedMixin
- * @mixes SlotLabelMixin
+ * @mixes LabelMixin
  */
-class Checkbox extends SlotLabelMixin(
+class Checkbox extends LabelMixin(
   CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement))))))
@@ -83,3 +84,4 @@ ) {
         .vaadin-checkbox-container {
-          display: inline-flex;
+          display: grid;
+          grid-template-columns: auto 1fr;
           align-items: baseline;
@@ -90,3 +92,3 @@ }
           position: relative;
-          flex: none;
+          height: 100%;
         }
@@ -185,25 +187,14 @@
       this.addController(new LabelledInputController(this.inputElement, this._labelController));
+      this.addController(
+        new SlotTargetController(
+          this.$.noop,
+          () => this._labelController.node,
+          () => this.__warnDeprecated()
+        )
+      );
     }
   }
 
-  /**
-   * A reference to the default slot from which nodes are copied to the label node.
-   *
-   * @override
-   * @protected
-   * @type {HTMLSlotElement}
-   */
-  get _sourceSlot() {
-    return this.$.noop;
-  }
-
-  /**
-   * Override __copyNodesToSlotTarget from SlotTargetMixin to show a warning.
-   * @override
-   * @protected
-   * @param {!Array<!Node>} nodes
-   **/
-  __copyNodesToSlotTarget(nodes) {
-    super.__copyNodesToSlotTarget(nodes);
-
+  /** @private */
+  __warnDeprecated() {
     console.warn(
@@ -210,0 +201,0 @@ `WARNING: Since Vaadin 22, placing the label as a direct child of a <vaadin-checkbox> is deprecated.

theme/lumo/vaadin-checkbox-styles.js

 import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
@@ -55,15 +56,12 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';
     [part='checkbox']::after {
-      content: '';
       pointer-events: none;
-      display: inline-block;
-      width: 0;
-      height: 0;
-      border: 0 solid var(--lumo-primary-contrast-color);
-      border-width: 0.1875em 0 0 0.1875em;
-      box-sizing: border-box;
-      transform-origin: 0 0;
+      font-family: 'lumo-icons';
+      content: var(--lumo-icons-checkmark);
+      color: var(--lumo-primary-contrast-color);
+      font-size: calc(var(--lumo-size-m) / 2 + 2px);
+      line-height: 1;
       position: absolute;
-      top: 0.8125em;
-      left: 0.5em;
-      transform: scale(0.55) rotate(-135deg);
+      top: -1px;
+      left: -1px;
+      contain: content;
       opacity: 0;
@@ -74,4 +72,2 @@ }
       opacity: 1;
-      width: 0.625em;
-      height: 1.0625em;
     }
@@ -81,3 +77,3 @@
     :host([indeterminate]) [part='checkbox']::after {
-      transform: none;
+      content: '';
       opacity: 1;
@@ -91,3 +87,2 @@ top: 45%;
       background-color: var(--lumo-primary-contrast-color);
-      transition: opacity 0.25s;
     }
@@ -115,3 +110,3 @@
     :host([disabled]) [part='checkbox']::after {
-      border-color: var(--lumo-contrast-30pct);
+      color: var(--lumo-contrast-30pct);
     }
@@ -128,7 +123,2 @@
 
-    /* Transition the checkmark if activated with the mouse (disabled for grid select-all this way) */
-    :host(:hover) [part='checkbox']::after {
-      transition: width 0.1s, height 0.25s;
-    }
-
     /* Used for activation "halo" */
@@ -135,0 +125,0 @@ [part='checkbox']::before {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

33099

decreased by-1.29%

Lines of code

562

decreased by-2.77%

Dependency changes

• + Added@vaadin/component-base@23.0.0-beta1(transitive)

• + Added@vaadin/field-base@23.0.0-beta1(transitive)

• + Added@vaadin/icon@23.0.0-beta1(transitive)

• + Added@vaadin/vaadin-lumo-styles@23.0.0-beta1(transitive)

• + Added@vaadin/vaadin-material-styles@23.0.0-beta1(transitive)

• + Added@vaadin/vaadin-themable-mixin@23.0.0-beta1(transitive)

• - Removed@vaadin/component-base@23.0.0-alpha5(transitive)

• - Removed@vaadin/field-base@23.0.0-alpha5(transitive)

• - Removed@vaadin/icon@23.0.0-alpha5(transitive)

• - Removed@vaadin/vaadin-lumo-styles@23.0.0-alpha5(transitive)

• - Removed@vaadin/vaadin-material-styles@23.0.0-alpha5(transitive)

• - Removed@vaadin/vaadin-themable-mixin@23.0.0-alpha5(transitive)

• Updated@vaadin/component-base@23.0.0-beta1

• Updated@vaadin/field-base@23.0.0-beta1

• Updated@vaadin/vaadin-lumo-styles@23.0.0-beta1

• Updated@vaadin/vaadin-material-styles@23.0.0-beta1

• Updated@vaadin/vaadin-themable-mixin@23.0.0-beta1