@spectrum-web-components/field-label - npm Package Compare versions

Comparing version 0.2.0-alpha.1407 to 0.2.0

CHANGELOG.md

@@ -6,2 +6,17 @@ # Change Log
 
+# 0.2.0 (2021-01-21)
+
+### Bug Fixes
+
+-   **field-label:** do not assume a target is available and surface t-shirt sizing ([c5daead](https://github.com/adobe/spectrum-web-components/commit/c5daead76698733ce52878fc50e01cdb640396cc))
+-   allow sp-dropdown to accept focus visibly from sp-field-label ([134bafc](https://github.com/adobe/spectrum-web-components/commit/134bafc9c2e4d06e48107182f82dd7487066b7f1))
+-   update export patterns ([b2da444](https://github.com/adobe/spectrum-web-components/commit/b2da444359b4022ed3f61dedf563b5bacba42103))
+
+### Features
+
+-   **action-button:** add action button pattern ([03ac00a](https://github.com/adobe/spectrum-web-components/commit/03ac00a710290e6a78340f206d88385a4f8ae8c2))
+-   **field-label:** add field label pattern ([2fa7c7e](https://github.com/adobe/spectrum-web-components/commit/2fa7c7e0201a6161d6cc769dc171ae37c70ab136))
+-   **field-label:** update spectrum css input ([80a993d](https://github.com/adobe/spectrum-web-components/commit/80a993d787af98f41a613f053e4c2497d07f07ee))
+-   **icons-workflow:** vend fully registered icon components ([941f3a4](https://github.com/adobe/spectrum-web-components/commit/941f3a41486fbd49eca0805fb63383f63313e71e))
+
 # 0.1.0 (2021-01-13)
@@ -8,0 +23,0 @@

custom-elements.json

@@ -34,4 +34,3 @@ {
           "name": "size",
-          "type": "string",
-          "default": "\"m\""
+          "type": "ElementSize"
         }
@@ -77,4 +76,3 @@ ],
           "attribute": "size",
-          "type": "string",
-          "default": "\"m\""
+          "type": "ElementSize"
         },
@@ -81,0 +79,0 @@ {

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.2.0-alpha.1407+47b96fc6",
+    "version": "0.2.0",
     "description": "",
@@ -53,13 +53,13 @@ "main": "src/index.js",
         "@spectrum-css/fieldlabel": "^3.0.0-beta.7",
-        "@spectrum-web-components/dropdown": "^0.9.0-alpha.40+47b96fc6",
-        "@spectrum-web-components/menu": "^0.5.0-alpha.40+47b96fc6",
-        "@spectrum-web-components/textfield": "^0.6.0-alpha.40+47b96fc6"
+        "@spectrum-web-components/dropdown": "^0.10.0",
+        "@spectrum-web-components/menu": "^0.6.0",
+        "@spectrum-web-components/textfield": "^0.7.0"
     },
     "dependencies": {
-        "@spectrum-web-components/base": "^0.2.0-alpha.40+47b96fc6",
-        "@spectrum-web-components/icons-ui": "^0.4.0-alpha.40+47b96fc6",
-        "@spectrum-web-components/shared": "^0.8.0-alpha.40+47b96fc6",
+        "@spectrum-web-components/base": "^0.3.0",
+        "@spectrum-web-components/icons-ui": "^0.5.0",
+        "@spectrum-web-components/shared": "^0.9.0",
         "tslib": "^2.0.0"
     },
-    "gitHead": "47b96fc63e9b1cee03ba44793cfcd930488a7a17"
+    "gitHead": "a5734426f36555951dc10c5740c9044bbd951315"
 }

README.md

@@ -26,4 +26,61 @@ ## Description
 
-## Example
+## Sizes
 
+<sp-tabs selected="m">
+    <sp-tab value="s">Small</sp-tab>
+    <sp-tab value="m">Medium</sp-tab>
+    <sp-tab value="l">Large</sp-tab>
+    <sp-tab value="xl">Extra Large</sp-tab>
+</sp-tabs>
+
+<div class="tabs--s">
+
+```html demo
+<sp-field-label for="lifestory-0" size="s">Life Story</sp-field-label>
+<sp-textfield
+    placeholder="Enter your life story"
+    id="lifestory-0"
+></sp-textfield>
+```
+
+</div>
+
+<div class="tabs--m">
+
+```html demo
+<sp-field-label for="lifestory-1" size="m">Life Story</sp-field-label>
+<sp-textfield
+    placeholder="Enter your life story"
+    id="lifestory-1"
+></sp-textfield>
+```
+
+</div>
+
+<div class="tabs--l">
+
+```html demo
+<sp-field-label for="lifestory-2" size="l">Life Story</sp-field-label>
+<sp-textfield
+    placeholder="Enter your life story"
+    id="lifestory-2"
+></sp-textfield>
+```
+
+</div>
+
+<div class="tabs--xl">
+
+```html demo
+<sp-field-label for="lifestory-3" size="xl">Life Story</sp-field-label>
+<sp-textfield
+    placeholder="Enter your life story"
+    id="lifestory-3"
+></sp-textfield>
+```
+
+</div>
+
+## Examples
+
 ```html
@@ -33,5 +90,3 @@ <sp-field-label for="lifestory">
 </sp-field-label>
-<sp-textfield placeholder="Enter your life story" id="lifestory">
-    <input />
-</sp-textfield>
+<sp-textfield placeholder="Enter your life story" id="lifestory"></sp-textfield>
 <sp-field-label for="birth-place">
@@ -38,0 +93,0 @@ Birthplace

src/FieldLabel.d.ts

 import { SpectrumElement, CSSResultArray, TemplateResult, PropertyValues } from '@spectrum-web-components/base';
 import '@spectrum-web-components/icon/sp-icon.js';
+declare const FieldLabel_base: typeof SpectrumElement & {
+    new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
+    prototype: import("@spectrum-web-components/base").SizedElementInterface;
+};
 /**
  * @element sp-field-label
  */
-export declare class FieldLabel extends SpectrumElement {
+export declare class FieldLabel extends FieldLabel_base {
     static get styles(): CSSResultArray;
@@ -14,3 +18,2 @@ static instanceCount: number;
     sideAligned?: 'start' | 'end';
-    size: string;
     private target?;
@@ -23,1 +26,2 @@ private handleClick;
 }
+export {};

src/FieldLabel.js

@@ -13,3 +13,3 @@ /*
 import { __decorate } from "tslib";
-import { html, SpectrumElement, property, } from '@spectrum-web-components/base';
+import { html, SpectrumElement, property, SizedMixin, } from '@spectrum-web-components/base';
 import { Asterisk100Icon } from '@spectrum-web-components/icons-ui';
@@ -22,3 +22,3 @@ import '@spectrum-web-components/icon/sp-icon.js';
  */
-export class FieldLabel extends SpectrumElement {
+export class FieldLabel extends SizedMixin(SpectrumElement) {
     constructor() {
@@ -30,3 +30,2 @@ super(...arguments);
         this.required = false;
-        this.size = 'm';
     }
@@ -57,2 +56,5 @@ static get styles() {
         const target = parent.querySelector(`#${this.for}`);
+        if (!target) {
+            return;
+        }
         if (typeof target.updateComplete !== 'undefined') {
@@ -71,2 +73,3 @@ await target.updateComplete;
         }
+        return Promise.resolve();
     }
@@ -119,5 +122,2 @@ render() {
 ], FieldLabel.prototype, "sideAligned", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], FieldLabel.prototype, "size", void 0);
 //# sourceMappingURL=FieldLabel.js.map

src/FieldLabel.ts

@@ -20,2 +20,3 @@ /*
     PropertyValues,
+    SizedMixin,
 } from '@spectrum-web-components/base';
@@ -34,3 +35,3 @@ import type { Focusable } from '@spectrum-web-components/shared';
  */
-export class FieldLabel extends SpectrumElement {
+export class FieldLabel extends SizedMixin(SpectrumElement) {
     public static get styles(): CSSResultArray {
@@ -57,5 +58,2 @@ return [styles, asteriskIconStyles];
 
-    @property({ type: String, reflect: true })
-    public size = 'm';
-
     private target?: HTMLElement;
@@ -83,2 +81,5 @@
         const target = parent.querySelector(`#${this.for}`) as Focusable;
+        if (!target) {
+            return;
+        }
         if (typeof target.updateComplete !== 'undefined') {
@@ -99,2 +100,3 @@ await target.updateComplete;
         }
+        return Promise.resolve();
     }
@@ -101,0 +103,0 @@

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

83921

increased by2.89%

Lines of code

793

increased by0.63%

Number of lines in readme file

185

increased by42.31%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@spectrum-web-components/icon@0.8.3(transitive)

• + Added@spectrum-web-components/icons-ui@0.5.3(transitive)

• + Added@spectrum-web-components/iconset@0.4.3(transitive)

• + Added@spectrum-web-components/shared@0.9.0(transitive)

• - Removed@spectrum-web-components/base@0.2.0(transitive)

• - Removed@spectrum-web-components/icon@0.7.0(transitive)

• - Removed@spectrum-web-components/icons-ui@0.4.0(transitive)

• - Removed@spectrum-web-components/iconset@0.3.0(transitive)

• - Removed@spectrum-web-components/shared@0.8.0(transitive)

• - Removed@spectrum-web-components/styles@0.8.1(transitive)

• - Removed@spectrum-web-components/theme@0.7.4(transitive)

• Updated@spectrum-web-components/base@^0.3.0

• Updated@spectrum-web-components/icons-ui@^0.5.0

• Updated@spectrum-web-components/shared@^0.9.0