Merge pull request #238 from qualcomm/refactor/data-scope

refactor/data-scope

Author: R-Bower

.gitignore

@@ -100,6 +100,7 @@ tsconfig.*.tsbuildinfo
 .react-router/
 **/*\wsl.*
 **/coverage
+packages/**/.vitest-attachments
 
 ###############################################################################
 # OS / editor / IDE files

package.json

@@ -81,8 +81,8 @@
     "npm-check-updates": "^19.6.3",
     "npm-run-all2": "^8.0.4",
     "playwright": "1.56.1",
-    "prettier": "^3.6.2",
-    "prettier-plugin-tailwindcss": "^0.7.1",
+    "prettier": "^3.8.3",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "pretty-ms": "^9.3.0",
     "shx": "^0.4.0",
     "stylelint": "^16.23.1",
@@ -101,6 +101,7 @@
     "eslint": "catalog:",
     "lodash": "4.17.23",
     "playwright": "1.56.1",
+    "prettier": "3.8.3",
     "typescript": "5.9.3"
   },
   "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be"

packages/common/core/src/accordion/accordion.anatomy.ts

@@ -0,0 +1,19 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import {type Anatomy, createAnatomy} from "@qualcomm-ui/utils/anatomy"
+
+export const accordionParts = [
+  "root",
+  "item",
+  "itemTrigger",
+  "itemText",
+  "itemSecondaryText",
+  "itemIndicator",
+  "itemContent",
+] as const
+
+export const accordionAnatomy: Anatomy<
+  "accordion",
+  (typeof accordionParts)[number]
+> = createAnatomy("accordion").parts(...accordionParts)

packages/common/core/src/accordion/accordion.api.ts

@@ -6,9 +6,9 @@
 
 import {getEventKey, isSafari} from "@qualcomm-ui/dom/query"
 import {booleanAriaAttr, booleanDataAttr} from "@qualcomm-ui/utils/attributes"
-import type {Direction} from "@qualcomm-ui/utils/direction"
 import type {Machine, PropNormalizer} from "@qualcomm-ui/utils/machine"
 
+import {accordionAnatomy} from "./accordion.anatomy"
 import type {
   AccordionApi,
   AccordionItemApiProps,
@@ -24,6 +24,8 @@ import type {
 } from "./accordion.types"
 import {domIds} from "./internal"
 
+const parts = accordionAnatomy.parts
+
 export function createAccordionApi(
   machine: Machine<AccordionSchema>,
   normalize: PropNormalizer,
@@ -34,11 +36,6 @@ export function createAccordionApi(
   const value = context.get("value")
   const multiple = prop("multiple")
 
-  const commonProps: {"data-scope": "accordion"; dir: Direction | undefined} = {
-    "data-scope": "accordion",
-    dir: prop("dir"),
-  }
-
   function setValue(value: string[]) {
     send({
       type: "VALUE.SET",
@@ -70,10 +67,9 @@ export function createAccordionApi(
       const state = getAccordionItemState(itemProps)
       scope.ids.collection("item").register(state.value, id, onDestroy)
       return normalize.element({
-        ...commonProps,
+        ...parts.item,
         "data-disabled": booleanDataAttr(state.disabled),
         "data-focus": booleanDataAttr(focusedValue === state.value),
-        "data-part": "item",
         "data-state": state.open ? "open" : "closed",
         disabled: state.disabled,
         id,
@@ -89,13 +85,12 @@ export function createAccordionApi(
       scope.ids.collection("content").register(state.value, id, onDestroy)
 
       return normalize.element({
-        ...commonProps,
+        ...parts.itemContent,
         "aria-hidden": booleanAriaAttr(!state.open, null),
         "aria-labelledby": domIds.trigger(scope, state.value)!,
         "data-disabled": booleanDataAttr(state.disabled),
         "data-expanded": booleanDataAttr(state.open),
         "data-focus": booleanDataAttr(focusedValue === state.value),
-        "data-part": "item-content",
         "data-state": state.open ? "open" : "closed",
         id,
         role: "region",
@@ -107,11 +102,10 @@ export function createAccordionApi(
     ): AccordionItemIndicatorBindings {
       const state = getAccordionItemState(itemContext)
       return normalize.element({
-        ...commonProps,
+        ...parts.itemIndicator,
         "aria-hidden": true,
         "data-disabled": booleanDataAttr(state.disabled),
         "data-focus": booleanDataAttr(focusedValue === state.value),
-        "data-part": "item-indicator",
         "data-state": state.open ? "open" : "closed",
       })
     },
@@ -122,10 +116,9 @@ export function createAccordionApi(
       const state = getAccordionItemState(itemContext)
 
       return normalize.element({
-        ...commonProps,
+        ...parts.itemSecondaryText,
         "data-disabled": booleanDataAttr(state.disabled),
         "data-focus": booleanDataAttr(focusedValue === state.value),
-        "data-part": "item-secondary-text",
         "data-state": state.open ? "open" : "closed",
       })
     },
@@ -135,10 +128,9 @@ export function createAccordionApi(
     getAccordionItemTextBindings(itemContext): AccordionItemTextBindings {
       const state = getAccordionItemState(itemContext)
       return normalize.element({
-        ...commonProps,
+        ...parts.itemText,
         "data-disabled": booleanDataAttr(state.disabled),
         "data-focus": booleanDataAttr(focusedValue === state.value),
-        "data-part": "item-text",
         "data-state": state.open ? "open" : "closed",
       })
     },
@@ -151,14 +143,13 @@ export function createAccordionApi(
       const state = getAccordionItemState(itemProps)
       scope.ids.collection("trigger").register(state.value, id, onDestroy)
       return normalize.element({
-        ...commonProps,
+        ...parts.itemTrigger,
         "aria-controls": domIds.content(scope, state.value)!,
         "aria-disabled": booleanAriaAttr(state.disabled),
         "aria-expanded": booleanAriaAttr(state.open),
         "data-disabled": booleanDataAttr(state.disabled),
         "data-focus": booleanDataAttr(focusedValue === state.value),
         "data-ownedby": domIds.root(scope),
-        "data-part": "trigger",
         "data-state": state.open ? "open" : "closed",
         disabled: state.disabled,
         id,
@@ -237,8 +228,8 @@ export function createAccordionApi(
     getRootBindings({id, onDestroy}): AccordionRootBindings {
       scope.ids.register("root", id, onDestroy)
       return normalize.element({
-        ...commonProps,
-        "data-part": "root",
+        ...parts.root,
+        dir: prop("dir"),
         id,
       })
     },

packages/common/core/src/accordion/accordion.types.ts

@@ -4,6 +4,7 @@
 // Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
 // SPDX-License-Identifier: BSD-3-Clause-Clear
 
+import type {AnatomyPart, AnatomyPartName} from "@qualcomm-ui/utils/anatomy"
 import type {
   BooleanAriaAttr,
   BooleanDataAttr,
@@ -18,6 +19,8 @@ import type {
   MachineSchema,
 } from "@qualcomm-ui/utils/machine"
 
+import type {accordionAnatomy} from "./accordion.anatomy"
+
 export interface AccordionApiProps extends DirectionProperty {
   /**
    * Whether sections can be collapsed (in non-multiple mode).
@@ -135,34 +138,31 @@ export interface AccordionSchema extends MachineSchema {
   props: RequiredBy<AccordionApiProps, "dir">
 }
 
-interface CommonBindings extends DirectionProperty {
-  "data-scope": "accordion"
-}
+type PartName = AnatomyPartName<typeof accordionAnatomy>
+interface Part<P extends PartName> extends AnatomyPart<"accordion", P> {}
 
-export interface AccordionRootBindings extends CommonBindings {
-  "data-part": "root"
+export interface AccordionRootBindings extends Part<"root">, DirectionProperty {
   id: string
 }
 
-export interface AccordionItemCommonBindings extends CommonBindings {
+export interface AccordionItemCommonBindings {
   "data-disabled": BooleanDataAttr
   "data-focus": BooleanDataAttr
   "data-state": "open" | "closed"
 }
 
-export interface AccordionItemBindings extends AccordionItemCommonBindings {
-  "data-part": "item"
+export interface AccordionItemBindings
+  extends Part<"item">, AccordionItemCommonBindings {
   disabled?: boolean
   id: string
 }
 
 export interface AccordionItemTriggerBindings
-  extends AccordionItemCommonBindings {
+  extends Part<"itemTrigger">, AccordionItemCommonBindings {
   "aria-controls": string
   "aria-disabled": BooleanAriaAttr
   "aria-expanded": BooleanAriaAttr
   "data-ownedby": string
-  "data-part": "trigger"
   disabled?: boolean
   id: string
   onBlur: JSX.FocusEventHandler<HTMLButtonElement>
@@ -172,27 +172,22 @@ export interface AccordionItemTriggerBindings
   type: "button"
 }
 
-export interface AccordionItemTextBindings extends AccordionItemCommonBindings {
-  "data-part": "item-text"
-}
+export interface AccordionItemTextBindings
+  extends Part<"itemText">, AccordionItemCommonBindings {}
 
 export interface AccordionItemSecondaryTextBindings
-  extends AccordionItemCommonBindings {
-  "data-part": "item-secondary-text"
-}
+  extends Part<"itemSecondaryText">, AccordionItemCommonBindings {}
 
 export interface AccordionItemIndicatorBindings
-  extends AccordionItemCommonBindings {
+  extends Part<"itemIndicator">, AccordionItemCommonBindings {
   "aria-hidden": true
-  "data-part": "item-indicator"
 }
 
 export interface AccordionItemContentBindings
-  extends AccordionItemCommonBindings {
+  extends Part<"itemContent">, AccordionItemCommonBindings {
   "aria-hidden": BooleanAriaAttr
   "aria-labelledby": string
   "data-expanded": BooleanDataAttr
-  "data-part": "item-content"
   id: string
   role: "region"
 }

packages/common/core/src/accordion/index.ts

@@ -1,3 +1,4 @@
+export * from "./accordion.anatomy"
 export * from "./accordion.api"
 export * from "./accordion.machine"
 export * from "./accordion.props"

packages/common/core/src/action-group/action-group.anatomy.ts

@@ -0,0 +1,11 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import {type Anatomy, createAnatomy} from "@qualcomm-ui/utils/anatomy"
+
+export const actionGroupParts = ["root"] as const
+
+export const actionGroupAnatomy: Anatomy<
+  "actionGroup",
+  (typeof actionGroupParts)[number]
+> = createAnatomy("actionGroup").parts(...actionGroupParts)

packages/common/core/src/action-group/action-group.ts

@@ -1,20 +1,21 @@
 // Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
 // SPDX-License-Identifier: BSD-3-Clause-Clear
 
+import type {AnatomyPart} from "@qualcomm-ui/utils/anatomy"
+
+import {actionGroupAnatomy} from "./action-group.anatomy"
+
 /**
  * @deprecated
  */
-export interface ActionGroupRootBindings {
-  "data-part": "root"
-  "data-scope": "action-group"
-}
+export interface ActionGroupRootBindings extends AnatomyPart<
+  "actionGroup",
+  "root"
+> {}
 
 /**
  * @deprecated
  */
 export function getActionGroupRootBindings(): ActionGroupRootBindings {
-  return {
-    "data-part": "root",
-    "data-scope": "action-group",
-  }
+  return actionGroupAnatomy.parts.root
 }

packages/common/core/src/action-group/index.ts

@@ -1 +1,2 @@
 export * from "./action-group"
+export * from "./action-group.anatomy"

packages/common/core/src/avatar/avatar.anatomy.ts

@@ -0,0 +1,9 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import {type Anatomy, createAnatomy} from "@qualcomm-ui/utils/anatomy"
+
+export const avatarParts = ["root", "image", "content", "status"] as const
+
+export const avatarAnatomy: Anatomy<"avatar", (typeof avatarParts)[number]> =
+  createAnatomy("avatar").parts(...avatarParts)