fix: apply Focuable styles in class extensions

adobe · Dec 12, 2019 · 38f7afd · 38f7afd
1 parent 4c266e3
commit 38f7afd
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 8 deletions.
diff --git a/packages/link/src/link.ts b/packages/link/src/link.ts
@@ -30,7 +30,7 @@ import linkStyles from './link.css.js';
  */
 export class Link extends Focusable {
     public static get styles(): CSSResultArray {
-        return [linkStyles];
+        return [...super.styles, linkStyles];
     }
 
     @query('#anchor')

diff --git a/packages/radio/src/radio.ts b/packages/radio/src/radio.ts
@@ -36,7 +36,7 @@ import { Focusable } from '@spectrum-web-components/shared/lib/focusable.js';
  */
 export class Radio extends Focusable {
     public static get styles(): CSSResultArray {
-        return [radioStyles];
+        return [...super.styles, radioStyles];
     }
     @property({ type: String, reflect: true })
     public name = '';

diff --git a/packages/shared/README.md b/packages/shared/README.md
@@ -13,6 +13,9 @@ import { Focusable } from '@spectrum-web-components/shared/lib/focusable';
 import { html } from 'lit-element';
 
 class FocusableButton extends Focusable {
+    public static get styles(): CSSResultArray {
+        return [...super.styles];
+    }
     public get focusElement(): HTMLElement {
         /* istanbul ignore if */
         if (!this.shadowRoot) {

diff --git a/packages/slider/src/slider.ts b/packages/slider/src/slider.ts
@@ -27,7 +27,7 @@ export const variants = ['color', 'filled', 'ramp', 'range', 'tick'];
 
 export class Slider extends Focusable {
     public static get styles(): CSSResultArray {
-        return [sliderStyles, spectrumSliderStyles];
+        return [...super.styles, sliderStyles, spectrumSliderStyles];
     }
 
     @property()

diff --git a/packages/textfield/src/textfield.css b/packages/textfield/src/textfield.css
@@ -18,10 +18,6 @@ governing permissions and limitations under the License.
     vertical-align: top;
 }
 
-:host([disabled]) {
-    pointer-events: none;
-}
-
 #input:invalid,
 :host([invalid]) #input {
     background-image: none;

diff --git a/packages/textfield/src/textfield.ts b/packages/textfield/src/textfield.ts
@@ -35,7 +35,12 @@ import { nothing } from 'lit-html';
 
 export class Textfield extends Focusable {
     public static get styles(): CSSResultArray {
-        return [textfieldStyles, checkmarkSmallStyles, alertSmallStyles];
+        return [
+            ...super.styles,
+            textfieldStyles,
+            checkmarkSmallStyles,
+            alertSmallStyles,
+        ];
     }
 
     @query('#input')