feat: use 3.0.0-beta.* release for styles

adobe · Jul 17, 2020 · 84ff0e1 · 84ff0e1
1 parent 0fad511
commit 84ff0e1
Show file tree

Hide file tree

Showing 15 changed files with 178 additions and 93 deletions.
diff --git a/__snapshots__/Checkbox.md b/__snapshots__/Checkbox.md
@@ -0,0 +1,16 @@
+# `Checkbox`
+
+#### `loads`
+
+```html
+<sp-checkbox
+  data-js-focus-visible=""
+  dir="ltr"
+  id="checkbox0"
+  tabindex="5"
+>
+  Component
+</sp-checkbox>
+
+```
+
diff --git a/__snapshots__/Dropdown.md b/__snapshots__/Dropdown.md
@@ -9,13 +9,15 @@
 >
   <sp-menu-item
     data-js-focus-visible=""
+    dir="ltr"
     role="option"
     tabindex="0"
   >
     Deselect
   </sp-menu-item>
   <sp-menu-item
     data-js-focus-visible=""
+    dir="ltr"
     role="option"
     tabindex="-1"
     value="option-2"
@@ -24,13 +26,15 @@
   </sp-menu-item>
   <sp-menu-item
     data-js-focus-visible=""
+    dir="ltr"
     role="option"
     tabindex="-1"
   >
     Feather...
   </sp-menu-item>
   <sp-menu-item
     data-js-focus-visible=""
+    dir="ltr"
     role="option"
     tabindex="-1"
   >
@@ -40,6 +44,7 @@
   </sp-menu-divider>
   <sp-menu-item
     data-js-focus-visible=""
+    dir="ltr"
     role="option"
     tabindex="-1"
   >
@@ -48,6 +53,7 @@
   <sp-menu-item
     aria-disabled="true"
     data-js-focus-visible=""
+    dir="ltr"
     disabled=""
     role="option"
     tabindex="-1"

diff --git a/__snapshots__/Search.md b/__snapshots__/Search.md
@@ -17,6 +17,7 @@
   </sp-icon>
   <sp-clear-button
     data-js-focus-visible=""
+    dir="ltr"
     id="button"
     label="Reset"
     tabindex="-1"

diff --git a/packages/actionbar/package.json b/packages/actionbar/package.json
@@ -40,9 +40,10 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/actionbar": "^2.1.5"
+        "@spectrum-css/actionbar": "^3.0.0-beta.3"
     },
     "dependencies": {
+        "@spectrum-web-components/base": "^0.0.1",
         "lit-element": "^2.1.0",
         "lit-html": "^1.0.0",
         "tslib": "^2.0.0"

diff --git a/packages/actionbar/src/Actionbar.ts b/packages/actionbar/src/Actionbar.ts
@@ -12,11 +12,11 @@ governing permissions and limitations under the License.
 
 import {
     html,
-    LitElement,
+    SpectrumElement,
     CSSResultArray,
     TemplateResult,
     property,
-} from 'lit-element';
+} from '@spectrum-web-components/base';
 
 import actionbarStyles from './actionbar.css.js';
 
@@ -25,7 +25,7 @@ export const actionbarVariants = ['sticky', 'fixed'];
 /**
  * Actionbar component
  */
-export class Actionbar extends LitElement {
+export class Actionbar extends SpectrumElement {
     public static get styles(): CSSResultArray {
         return [actionbarStyles];
     }

diff --git a/packages/actionbar/src/spectrum-actionbar.css b/packages/actionbar/src/spectrum-actionbar.css
@@ -34,10 +34,22 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     );
     opacity: 1;
 }
-:host([variant='sticky']) {
-    /* .spectrum-ActionBar--sticky */
+:host([dir='ltr'][variant='sticky']) {
+    /* [dir=ltr] .spectrum-ActionBar--sticky */
     left: 0;
+}
+:host([dir='ltr'][variant='sticky']),
+:host([dir='rtl'][variant='sticky']) {
+    /* [dir=ltr] .spectrum-ActionBar--sticky,
+   * [dir=rtl] .spectrum-ActionBar--sticky */
     right: 0;
+}
+:host([dir='rtl'][variant='sticky']) {
+    /* [dir=rtl] .spectrum-ActionBar--sticky */
+    left: 0;
+}
+:host([variant='sticky']) {
+    /* .spectrum-ActionBar--sticky */
     position: -webkit-sticky;
     position: sticky;
 }

diff --git a/packages/base/src/Base.ts b/packages/base/src/Base.ts
@@ -22,11 +22,6 @@ type Constructor<T = Record<string, unknown>> = {
     prototype: T;
 };
 
-// export interface SlotTextObservingInterface {
-//     slotHasContent: boolean;
-//     manageObservedSlot(): void;
-// }
-
 export function SpectrumMixin<T extends Constructor<UpdatingElement>>(
     constructor: T
 ): T & Constructor<UpdatingElement> {

diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
@@ -40,7 +40,7 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/checkbox": "^2.1.0"
+        "@spectrum-css/checkbox": "^3.0.0-beta.3"
     },
     "dependencies": {
         "@spectrum-web-components/icon": "^0.4.8",

diff --git a/packages/checkbox/src/Checkbox.ts b/packages/checkbox/src/Checkbox.ts
@@ -45,18 +45,16 @@ export class Checkbox extends CheckboxBase {
 
     protected render(): TemplateResult {
         return html`
-            <label id="root">
-                ${super.render()}
-                <span id="box">
-                    <sp-icon id="checkmark" size="s" class="checkmark-small">
-                        ${CheckmarkSmallIcon({ hidden: true })}
-                    </sp-icon>
-                    <sp-icon id="partialCheckmark" size="s" class="dash-small">
-                        ${DashSmallIcon({ hidden: true })}
-                    </sp-icon>
-                </span>
-                <span id="label"><slot></slot></span>
-            </label>
+            ${super.render()}
+            <span id="box">
+                <sp-icon id="checkmark" size="s" class="checkmark-small">
+                    ${CheckmarkSmallIcon({ hidden: true })}
+                </sp-icon>
+                <sp-icon id="partialCheckmark" size="s" class="dash-small">
+                    ${DashSmallIcon({ hidden: true })}
+                </sp-icon>
+            </span>
+            <label id="label"><slot></slot></label>
         `;
     }