feat(field-label): add field label pattern

.circleci/config.yml

@@ -8,7 +8,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 2ecdb30466ca9cb15b7850ca9827d6fabf69736f
+        default: bc2b4f3fe51f9edb858dc4c63248cdf0bb06a046
 commands:
     setup:
         steps:

documentation/src/components/layout.css

@@ -93,11 +93,11 @@ header svg {
     justify-content: flex-end;
 }
 
-:host([dir='ltr']) .manage-theme label {
+:host([dir='ltr']) .manage-theme sp-field-label {
     margin-left: var(--spectrum-global-dimension-size-400);
 }
 
-:host([dir='rtl']) .manage-theme label {
+:host([dir='rtl']) .manage-theme sp-field-label {
     margin-right: var(--spectrum-global-dimension-size-400);
 }
 
@@ -107,71 +107,6 @@ header svg {
     }
 }
 
-/**
- * TODO: Remove this manual copy of the Spectrum Field Label styles 
- * once https://github.com/adobe/spectrum-web-components/issues/475
- * has been addressed and this element is natively part of the library
- **/
-label {
-    /* .spectrum-FieldLabel,
-    * .spectrum-Form-itemLabel */
-    display: block;
-
-    box-sizing: border-box;
-
-    padding-top: var(
-        --spectrum-fieldlabel-padding-top,
-        var(--spectrum-global-dimension-size-50)
-    );
-
-    padding-bottom: var(
-        --spectrum-fieldlabel-padding-bottom,
-        var(--spectrum-global-dimension-size-65)
-    );
-    padding-left: 0;
-    padding-right: 0;
-
-    font-size: var(
-        --spectrum-fieldlabel-text-size,
-        var(--spectrum-global-dimension-font-size-75)
-    );
-    font-weight: var(
-        --spectrum-fieldlabel-text-font-weight,
-        var(--spectrum-global-font-weight-regular)
-    );
-    line-height: var(
-        --spectrum-fieldlabel-text-line-height,
-        var(--spectrum-global-font-line-height-small)
-    );
-
-    -webkit-font-smoothing: subpixel-antialiased;
-    -moz-osx-font-smoothing: auto;
-    font-smoothing: subpixel-antialiased;
-
-    display: inline-block;
-    padding-top: var(
-        --spectrum-fieldlabel-side-padding-top,
-        var(--spectrum-global-dimension-size-100)
-    );
-    padding-bottom: 0;
-}
-
-:host([dir='ltr']) label {
-    padding-left: 0;
-    padding-right: var(
-        --spectrum-fieldlabel-side-padding-x,
-        var(--spectrum-global-dimension-size-100)
-    );
-}
-
-:host([dir='rtl']) label {
-    padding-right: 0;
-    padding-left: var(
-        --spectrum-fieldlabel-side-padding-x,
-        var(--spectrum-global-dimension-size-100)
-    );
-}
-
 .alerts {
     width: 100vw;
     text-align: center;

documentation/src/components/layout.ts

@@ -23,6 +23,7 @@ import layoutStyles from './layout.css';
 import '@spectrum-web-components/theme/sp-theme.js';
 import '@spectrum-web-components/theme/src/themes.js';
 import { Color, Scale } from '@spectrum-web-components/theme';
+import '@spectrum-web-components/field-label/sp-field-label.js';
 import { Dropdown } from '@spectrum-web-components/dropdown';
 import '@spectrum-web-components/dropdown/sp-dropdown.js';
 import '@spectrum-web-components/menu/sp-menu.js';
@@ -105,25 +106,6 @@ export class LayoutElement extends SpectrumElement {
         this.dir = dir === 'rtl' ? dir : 'ltr';
     }
 
-    // TODO: remove this manual link relationship when
-    // https://github.com/adobe/spectrum-web-components/issues/475
-    // has been completed and links are natively part of the library
-    private onClickLabel(event: { target: HTMLElement }) {
-        const { target } = event;
-        const next = target.nextElementSibling as Dropdown;
-        if (!next || next.open) return;
-        next.click();
-    }
-
-    private onKeypressLabel(event: KeyboardEvent & { target: HTMLElement }) {
-        const { code, target } = event;
-        if (code === 'Space' || code === 'Enter') {
-            const next = target.nextElementSibling as Dropdown;
-            if (!next || next.open) return;
-            next.click();
-        }
-    }
-
     private addAlert(event: CustomEvent<{ message: string }>): void {
         const target = event.composedPath()[0] as HTMLElement;
         if (!this.alerts.has(target)) {
@@ -232,13 +214,14 @@ export class LayoutElement extends SpectrumElement {
                     >
                         <div id="page" @alert=${this.addAlert}>
                             <div class="manage-theme">
-                                <label
-                                    @click=${this.onClickLabel}
-                                    @keypress=${this.onKeypressLabel}
+                                <sp-field-label
+                                    for="theme-color"
+                                    side-aligned="start"
                                 >
                                     Theme
-                                </label>
+                                </sp-field-label>
                                 <sp-dropdown
+                                    id="theme-color"
                                     placement="bottom"
                                     quiet
                                     value=${this.color}
@@ -259,13 +242,14 @@ export class LayoutElement extends SpectrumElement {
                                         </sp-menu-item>
                                     </sp-menu>
                                 </sp-dropdown>
-                                <label
-                                    @click=${this.onClickLabel}
-                                    @keypress=${this.onKeypressLabel}
+                                <sp-field-label
+                                    for="theme-scale"
+                                    side-aligned="start"
                                 >
                                     Scale
-                                </label>
+                                </sp-field-label>
                                 <sp-dropdown
+                                    id="theme-scale"
                                     label="Scale"
                                     placement="bottom"
                                     quiet
@@ -281,13 +265,14 @@ export class LayoutElement extends SpectrumElement {
                                         </sp-menu-item>
                                     </sp-menu>
                                 </sp-dropdown>
-                                <label
-                                    @click=${this.onClickLabel}
-                                    @keypress=${this.onKeypressLabel}
+                                <sp-field-label
+                                    for="theme-direction"
+                                    side-aligned="start"
                                 >
                                     Direction
-                                </label>
+                                </sp-field-label>
                                 <sp-dropdown
+                                    id="theme-direction"
                                     label="Direction"
                                     placement="bottom"
                                     quiet

packages/bundle/elements.ts

@@ -31,6 +31,7 @@ import '@spectrum-web-components/dialog/sp-dialog-wrapper.js';
 import '@spectrum-web-components/dropdown/sp-dropdown.js';
 import '@spectrum-web-components/dropzone/sp-dropzone.js';
 import '@spectrum-web-components/field-group/sp-field-group.js';
+import '@spectrum-web-components/field-label/sp-field-label.js';
 import '@spectrum-web-components/icon/sp-icon.js';
 import '@spectrum-web-components/icons/sp-icons-large.js';
 import '@spectrum-web-components/icons/sp-icons-medium.js';

packages/bundle/package.json

@@ -67,6 +67,7 @@
         "@spectrum-web-components/dropdown": "^0.8.5",
         "@spectrum-web-components/dropzone": "^0.4.4",
         "@spectrum-web-components/field-group": "^0.0.1",
+        "@spectrum-web-components/field-label": "^0.0.1",
         "@spectrum-web-components/icon": "^0.6.3",
         "@spectrum-web-components/icons": "^0.4.5",
         "@spectrum-web-components/icons-workflow": "^0.3.6",

packages/bundle/src/index.ts

@@ -27,6 +27,7 @@ export * from '@spectrum-web-components/dialog';
 export * from '@spectrum-web-components/dropdown';
 export * from '@spectrum-web-components/dropzone';
 export * from '@spectrum-web-components/field-group';
+export * from '@spectrum-web-components/field-label';
 export * from '@spectrum-web-components/icon';
 export * from '@spectrum-web-components/icons';
 import * as UIIcons from '@spectrum-web-components/icons-ui';

packages/bundle/tsconfig.json

@@ -25,6 +25,7 @@
         { "path": "../dropdown" },
         { "path": "../dropzone" },
         { "path": "../field-group" },
+        { "path": "../field-label" },
         { "path": "../icon" },
         { "path": "../icons" },
         { "path": "../icons-ui" },

packages/button/src/spectrum-config.js

@@ -47,6 +47,11 @@ const config = {
                     selector: '.spectrum-FieldButton--quiet',
                     name: 'quiet',
                 },
+                {
+                    type: 'boolean',
+                    selector: '.is-focused',
+                    name: 'focused',
+                },
             ],
             classes: [
                 {

packages/button/src/spectrum-fieldbutton.css

@@ -133,7 +133,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     );
 }
 .button:focus-visible,
-.button.is-focused {
+:host([focused]) .button {
     /* .spectrum-FieldButton.focus-ring,
    * .spectrum-FieldButton.is-focused */
     background-color: var(
@@ -156,7 +156,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     );
 }
 .button:focus-visible.is-placeholder,
-.button.is-focused.is-placeholder {
+:host([focused]) .button.is-placeholder {
     /* .spectrum-FieldButton.focus-ring.is-placeholder,
    * .spectrum-FieldButton.is-focused.is-placeholder */
     color: var(
@@ -188,7 +188,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     );
 }
 :host([invalid]) .button:focus-visible,
-:host([invalid]) .button.is-focused {
+:host([invalid][focused]) .button {
     /* .spectrum-FieldButton.is-invalid.focus-ring,
    * .spectrum-FieldButton.is-invalid.is-focused */
     border-color: var(
@@ -251,7 +251,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     );
 }
 :host([quiet]) .button:focus-visible,
-:host([quiet]) .button.is-focused {
+:host([quiet][focused]) .button {
     /* .spectrum-FieldButton--quiet.focus-ring,
    * .spectrum-FieldButton--quiet.is-focused */
     background-color: var(
@@ -265,7 +265,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         );
 }
 :host([quiet]) .button:focus-visible.is-placeholder,
-:host([quiet]) .button.is-focused.is-placeholder {
+:host([quiet][focused]) .button.is-placeholder {
     /* .spectrum-FieldButton--quiet.focus-ring.is-placeholder,
    * .spectrum-FieldButton--quiet.is-focused.is-placeholder */
     color: var(
@@ -287,9 +287,9 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     );
 }
 :host([quiet]) .button.is-selected:focus-visible,
-:host([quiet]) .button.is-selected.is-focused,
+:host([quiet][focused]) .button.is-selected,
 :host([quiet]) .button:active:focus-visible,
-:host([quiet]) .button:active.is-focused {
+:host([quiet][focused]) .button:active {
     /* .spectrum-FieldButton--quiet.is-selected.focus-ring,
    * .spectrum-FieldButton--quiet.is-selected.is-focused,
    * .spectrum-FieldButton--quiet:active.focus-ring,
@@ -305,7 +305,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         );
 }
 :host([quiet][invalid]) .button:focus-visible,
-:host([quiet][invalid]) .button.is-focused {
+:host([quiet][invalid][focused]) .button {
     /* .spectrum-FieldButton--quiet.is-invalid.focus-ring,
    * .spectrum-FieldButton--quiet.is-invalid.is-focused */
     box-shadow: 0 2px 0 0

packages/dropdown/src/Dropdown.ts

@@ -82,6 +82,9 @@ export class DropdownBase extends Focusable {
     @property({ type: Boolean, reflect: true })
     public disabled = false;
 
+    @property({ type: Boolean, reflect: true })
+    public focused = false;
+
     @property({ type: Boolean, reflect: true })
     public invalid = false;
 
@@ -145,11 +148,12 @@ export class DropdownBase extends Focusable {
         return this.button;
     }
 
-    public click(): void {
-        this.focusElement.click();
+    public forceFocusVisible(): void {
+        this.focused = true;
     }
 
     public onButtonBlur(): void {
+        this.focused = false;
         (this.target as HTMLButtonElement).removeEventListener(
             'keydown',
             this.onKeydown

packages/dropdown/src/dropdown.css

@@ -14,3 +14,25 @@ governing permissions and limitations under the License.
 sp-popover {
     display: none;
 }
+
+/**
+ * The accessibility team would prefer that it be possible to override the :focus-visible
+ * heuristics in _some_ cases, like when clicking an `sp-field-label`...
+ *
+ * From Picker
+ **/
+:host([focused]:not([quiet])) #button #label.placeholder {
+    /* .spectrum-Picker-trigger.focus-ring .spectrum-Picker-label.is-placeholder */
+    color: var(
+        --spectrum-picker-placeholder-text-color-key-focus,
+        var(--spectrum-alias-placeholder-text-color-hover)
+    );
+}
+
+:host([focused]:not([quiet])) #button .dropdown {
+    /* .spectrum-Picker-trigger.focus-ring .spectrum-Picker-icon */
+    color: var(
+        --spectrum-picker-icon-color-key-focus,
+        var(--spectrum-alias-icon-color-focus)
+    );
+}