feat(action-bar): use core tokens

adobe · Jul 19, 2023 · 4e21edf · 4e21edf
1 parent 5076d9c
commit 4e21edf
Show file tree

Hide file tree

Showing 23 changed files with 440 additions and 156 deletions.
diff --git a/packages/action-bar/README.md b/packages/action-bar/README.md
@@ -28,15 +28,29 @@ import { ActionBar } from '@spectrum-web-components/action-bar';
 
 ```html
 <sp-action-bar open>
-    <sp-checkbox indeterminate>228 Selected</sp-checkbox>
-    <sp-action-group quiet>
-        <sp-action-button label="Edit">
-            <sp-icon-edit slot="icon"></sp-icon-edit>
-        </sp-action-button>
-        <sp-action-button label="More">
-            <sp-icon-more slot="icon"></sp-icon-more>
-        </sp-action-button>
-    </sp-action-group>
+    2 selected
+    <sp-action-button slot="buttons" label="Edit">
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+    </sp-action-button>
+    <sp-action-button slot="buttons" label="More">
+        <sp-icon-more slot="icon"></sp-icon-more>
+    </sp-action-button>
+</sp-action-bar>
+```
+
+## Emphasized
+
+Use the `emphasized` attribute to add priority to the information that is delivered within your `<sp-action-bar>` element:
+
+```html
+<sp-action-bar emphasized open>
+    2 selected
+    <sp-action-button slot="buttons" label="Edit">
+        <sp-icon-edit slot="icon"></sp-icon-edit>
+    </sp-action-button>
+    <sp-action-button slot="buttons" label="More">
+        <sp-icon-more slot="icon"></sp-icon-more>
+    </sp-action-button>
 </sp-action-bar>
 ```
 
@@ -48,14 +62,12 @@ When using `[variant="fixed"]`, the `<sp-action-bar>` will display by default at
 
 ```html
 <h4>Look down and to the left when toggling.</h4>
-<sp-action-bar variant="fixed">
-    <sp-checkbox indeterminate>228 Selected</sp-checkbox>
-</sp-action-bar>
 <sp-button
-    onclick="javascript:this.previousElementSibling.open = !this.previousElementSibling.open;"
+    onclick="javascript:this.nextElementSibling.open = !this.nextElementSibling.open;"
 >
     Toggle fixed action bar
 </sp-button>
+<sp-action-bar variant="fixed">2 selected</sp-action-bar>
 ```
 
 ### Sticky
@@ -65,9 +77,6 @@ When using `[variant="sticky"]`, be sure you've spent some time touching up on [
 ```html
 <section style="position: relative; max-height: 6em; overflow: auto;">
     <h4>Scroll down for toggle button</h4>
-    <sp-action-bar variant="sticky" style="top: 0;">
-        <sp-checkbox indeterminate>228 Selected</sp-checkbox>
-    </sp-action-bar>
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
@@ -78,9 +87,18 @@ When using `[variant="sticky"]`, be sure you've spent some time touching up on [
         mollit anim id est laborum.
     </p>
     <sp-button
-        onclick="javascript:this.previousElementSibling.previousElementSibling.open = !this.previousElementSibling.previousElementSibling.open;"
+        onclick="javascript:this.nextElementSibling.open = !this.nextElementSibling.open;"
     >
         Toggle sticky action bar
     </sp-button>
+    <sp-action-bar variant="sticky" style="inset-block: 0px">
+        2 selected
+        <sp-action-button slot="buttons" label="Edit">
+            <sp-icon-edit slot="icon"></sp-icon-edit>
+        </sp-action-button>
+        <sp-action-button slot="buttons" label="More">
+            <sp-icon-more slot="icon"></sp-icon-more>
+        </sp-action-button>
+    </sp-action-bar>
 </section>
 ```
diff --git a/packages/action-bar/package.json b/packages/action-bar/package.json
@@ -57,11 +57,13 @@
         "lit-html"
     ],
     "dependencies": {
+        "@spectrum-web-components/action-group": "^0.34.0",
         "@spectrum-web-components/base": "^0.34.0",
+        "@spectrum-web-components/button": "^0.34.0",
         "@spectrum-web-components/popover": "^0.34.0"
     },
     "devDependencies": {
-        "@spectrum-css/actionbar": "^4.0.1"
+        "@spectrum-css/actionbar": "^6.0.39"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/action-bar/src/ActionBar.ts b/packages/action-bar/src/ActionBar.ts
@@ -18,7 +18,11 @@ import {
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import '@spectrum-web-components/popover/sp-popover.js';
+import '@spectrum-web-components/action-group/sp-action-group.js';
+import '@spectrum-web-components/button/sp-close-button.js';
+import '@spectrum-web-components/field-label/sp-field-label.js';
 import actionBarStyles from './action-bar.css.js';
+import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 export const actionBarVariants = ['sticky', 'fixed'];
 
 /**
@@ -30,6 +34,12 @@ export class ActionBar extends SpectrumElement {
         return [actionBarStyles];
     }
 
+    /**
+     * Deliver the Action Bar with additional visual emphasis.
+     */
+    @property({ type: Boolean, reflect: true })
+    public emphasized = false;
+
     /**
      * When `flexible` the action bar sizes itself to its content
      * rather than a specific width.
@@ -68,10 +78,45 @@ export class ActionBar extends SpectrumElement {
 
     private _variant = '';
 
+    private handleClick(): void {
+        this.open = false;
+
+        const applyDefault = this.dispatchEvent(
+            new Event('close', {
+                bubbles: true,
+            })
+        );
+
+        if (!applyDefault) {
+            this.open = true;
+        }
+    }
+
     public override render(): TemplateResult {
         return html`
             <sp-popover ?open=${this.open} id="popover">
-                <slot></slot>
+                <slot name="override">
+                    <sp-close-button
+                        static=${ifDefined(
+                            this.emphasized ? 'white' : undefined
+                        )}
+                        class="close-button"
+                        label="Clear selection"
+                        @click=${this.handleClick}
+                    ></sp-close-button>
+                    <sp-field-label class="field-label">
+                        <slot></slot>
+                    </sp-field-label>
+                    <sp-action-group
+                        class="action-group"
+                        quiet
+                        static=${ifDefined(
+                            this.emphasized ? 'white' : undefined
+                        )}
+                    >
+                        <slot name="buttons"></slot>
+                    </sp-action-group>
+                </slot>
             </sp-popover>
         `;
     }

diff --git a/packages/action-bar/src/action-bar.css b/packages/action-bar/src/action-bar.css
@@ -11,3 +11,11 @@ governing permissions and limitations under the License.
 */
 
 @import './spectrum-action-bar.css';
+
+:host {
+    display: block;
+}
+
+:host([flexible]) {
+    display: inline-block;
+}