fix(components): anchor pointer styles

Signed-off-by: Cory Rylan <cory@coryrylan.com>
blueprintui · Mar 15, 2023 · 7c16326 · 7c16326
1 parent a96774b
commit 7c16326
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 9 deletions.
diff --git a/packages/components/src/internals/controllers/type-anchor.controller.spec.ts b/packages/components/src/internals/controllers/type-anchor.controller.spec.ts
@@ -1,29 +1,45 @@
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
-import { typeAnchor } from '@blueprintui/components/internals';
+import { attachInternals, typeAnchor } from '@blueprintui/components/internals';
 import { elementIsStable, createFixture, emulateClick, removeFixture } from '@blueprintui/components/test';
 
 @typeAnchor<TypeAnchorTestElement>()
 @customElement('type-anchor-controller-test-element')
 class TypeAnchorTestElement extends LitElement {
   @property({ type: Boolean }) disabled = false;
   @property({ type: Boolean }) readonly = false;
-
   @property({ type: String }) href = '#';
 
+  declare _internals: ElementInternals;
+
   render() {
     return html`<a href=${this.href}>anchor</a>`;
   }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    attachInternals(this);
+  }
 }
 
 describe('type-anchor.controller', () => {
+  let fixture: HTMLElement;
+  let element: TypeAnchorTestElement;
+  let anchor: HTMLElement;
+
+  beforeEach(async () => {
+    fixture = await createFixture(html`<type-anchor-controller-test-element></type-anchor-controller-test-element>`);
+    element = fixture.querySelector<TypeAnchorTestElement>('type-anchor-controller-test-element');
+    anchor = element.shadowRoot.querySelector<HTMLElement>('a');
+    await elementIsStable(element);
+  });
+
+  afterEach(() => {
+    removeFixture(fixture);
+  });
+
   it('should prevent click event if disabled', async () => {
-    const fixture = await createFixture(
-      html`<type-anchor-controller-test-element></type-anchor-controller-test-element>`
-    );
-    const element = fixture.querySelector<TypeAnchorTestElement>('type-anchor-controller-test-element');
-    const anchor = element.shadowRoot.querySelector<HTMLElement>('a');
     let count = 0;
 
     await elementIsStable(element);
@@ -37,6 +53,10 @@ describe('type-anchor.controller', () => {
     emulateClick(anchor);
 
     expect(count).toBe(2);
-    removeFixture(fixture);
+  });
+
+  it('should initialize :--anchor state if anchor exists', async () => {
+    await elementIsStable(element);
+    expect(element.matches(':--anchor')).toBe(true);
   });
 });
diff --git a/packages/components/src/internals/controllers/type-anchor.controller.ts b/packages/components/src/internals/controllers/type-anchor.controller.ts
@@ -3,6 +3,7 @@ import { ReactiveController, ReactiveElement } from 'lit';
 export interface TypeAnchor extends ReactiveElement {
   disabled: boolean;
   readonly: boolean;
+  readonly _internals?: ElementInternals;
 }
 
 export function typeAnchor<T extends TypeAnchor>(): ClassDecorator {
@@ -28,6 +29,9 @@ export class TypeAnchorController<T extends TypeAnchor> implements ReactiveContr
     if (this.#anchor) {
       this.host.readonly = true;
       this.#anchor.style.textDecoration = 'none';
+      this.host._internals.states.add('--anchor');
+    } else {
+      this.host._internals.states.delete('--anchor');
     }
 
     this.#anchor?.addEventListener('click', e => {

diff --git a/packages/components/src/tag/element.css b/packages/components/src/tag/element.css
@@ -51,7 +51,7 @@
   --border: var(--bp-object-border-width-200) solid var(--bp-status-danger-background-200);
 }
 
-:host(:--readonly) {
+:host(:--readonly:not(:--anchor)) {
   --cursor: default;
   filter: brightness(100%);
 }