fix(vue-actionbar): remove class collisions and stabilize parity hooks

Author: codex

PARITY_REVIEW_CHECKLIST.md

@@ -14,9 +14,10 @@ Use this as a progression checklist for parity re-review. Mark each line when co
   - [x] Story: Accordion.stories.ts
   - [x] Story: Disclosure.stories.ts
   - Evidence: React/Vue story exports and metadata align; targeted story-id parity is zero for `accordion--*` and `disclosure--*`; style-source wiring matches React (`@adobe/spectrum-css-temp/components/accordion/vars.css` with Spectrum selector contract only, no helper-class collisions); fixed RTL indicator parity in `DisclosureTitle` (Vue now renders left-chevron glyph in RTL like React) and added regression coverage in `starters/vue/src/components.spec.ts`; validation rerun passed (`yarn typecheck:vue`, `yarn test:vue`, `yarn build:vue:storybook`).
-- [ ] 1.02 `@vue-spectrum/actionbar`
+- [x] 1.02 `@vue-spectrum/actionbar`
   - Components: ActionBar, ActionBarContainer
-  - [ ] Story: ActionBar.stories.ts
+  - [x] Story: ActionBar.stories.ts
+  - Evidence: React/Vue story export surface and arg metadata align; targeted story-id parity is zero for `actionbar--*`; style-source parity uses shared React Spectrum selectors in `actionbar.css`; class-collision audit found `vs-action-bar*` overlap with `packages/vue-aria-components/src/styles.css`, so Vue Spectrum ActionBar helper classes were renamed to `vs-spectrum-action-bar*` and parity tests moved to stable `data-vs-action-bar*` hooks; validation rerun passed (`yarn typecheck:vue`, `yarn test:vue`, `yarn build:vue:storybook`).
 - [ ] 1.03 `@vue-spectrum/actiongroup`
   - Components: ActionGroup
   - [ ] Story: ActionGroup.stories.ts

packages/@vue-spectrum/actionbar/src/index.ts

@@ -3,10 +3,26 @@ import {ActionButton} from '@vue-spectrum/button';
 import {ActionGroup} from '@vue-spectrum/actiongroup';
 import {computed, defineComponent, h, type PropType} from 'vue';
 
+const ACTION_BAR_CLEAR_ICON_PATH = 'M11.697 10.283L7.414 6l4.283-4.283A1 1 0 1 0 10.283.303L6 4.586 1.717.303A1 1 0 1 0 .303 1.717L4.586 6 .303 10.283a1 1 0 1 0 1.414 1.414L6 7.414l4.283 4.283a1 1 0 1 0 1.414-1.414z';
+
 function normalizeActionKeyForComparison(value: string): string {
   return value.trim().toLowerCase().replace(/\s+/g, '');
 }
 
+function renderActionBarClearIcon() {
+  return h('svg', {
+    class: ['spectrum-Icon', 'spectrum-UIIcon-CrossLarge'],
+    focusable: 'false',
+    'aria-hidden': 'true',
+    role: 'img',
+    viewBox: '0 0 12 12'
+  }, [
+    h('path', {
+      d: ACTION_BAR_CLEAR_ICON_PATH
+    })
+  ]);
+}
+
 export const ActionBar = defineComponent({
   name: 'VueActionBar',
   inheritAttrs: false,
@@ -95,7 +111,8 @@ export const ActionBar = defineComponent({
       let actions = slots.default
         ? slots.default()
         : h(ActionGroup, {
-          class: ['react-spectrum-ActionBar-actionGroup', 'vs-action-bar__actions'],
+          class: ['react-spectrum-ActionBar-actionGroup', 'vs-spectrum-action-bar__actions'],
+          'data-vs-action-bar-actions': 'true',
           'aria-label': 'Actions',
           items: props.items,
           selectionMode: 'none',
@@ -114,11 +131,12 @@ export const ActionBar = defineComponent({
         ...attrs,
         class: [
           actionBarClassName.value,
-          'vs-action-bar',
+          'vs-spectrum-action-bar',
           isEmphasized.value ? 'is-emphasized' : null,
           isOpen.value ? 'is-open' : null,
           attrs.class
         ],
+        'data-vs-action-bar': 'true',
         tabindex: 0,
         'data-vac': '',
         onKeydown: (event: KeyboardEvent) => {
@@ -128,20 +146,22 @@ export const ActionBar = defineComponent({
           }
         }
       }, [
-        h('div', {class: ['react-spectrum-ActionBar-bar', 'vs-action-bar__bar']}, [
+        h('div', {class: ['react-spectrum-ActionBar-bar', 'vs-spectrum-action-bar__bar']}, [
           actions,
           h(ActionButton, {
-            class: 'vs-action-bar__clear',
+            class: 'vs-spectrum-action-bar__clear',
             isQuiet: true,
             staticColor: isEmphasized.value ? 'white' : undefined,
             'aria-label': props.clearLabel,
+            'data-vs-action-bar-clear': 'true',
             style: {
               gridArea: 'clear'
             },
             onClick: () => emit('clearSelection')
-          }, () => '\u00d7'),
+          }, () => renderActionBarClearIcon()),
           h('p', {
-            class: ['react-spectrum-ActionBar-selectedCount', 'vs-action-bar__count']
+            class: ['react-spectrum-ActionBar-selectedCount', 'vs-spectrum-action-bar__count'],
+            'data-vs-action-bar-count': 'true'
           }, selectedLabel.value)
         ])
       ]);
@@ -155,7 +175,8 @@ export const ActionBarContainer = defineComponent({
   setup(_props, {attrs, slots}) {
     return () => h('div', {
       ...attrs,
-      class: ['ActionBarContainer', 'vs-action-bar-container', attrs.class],
+      class: ['ActionBarContainer', 'vs-spectrum-action-bar-container', attrs.class],
+      'data-vs-action-bar-container': 'true',
       'data-vac': ''
     }, slots.default ? slots.default() : []);
   }

starters/vue/src/components.spec.ts

@@ -1513,7 +1513,7 @@ describe('Vue migration primitives', () => {
       }
     });
 
-    expect(wrapper.find('button.vs-action-bar__clear svg path').exists()).toBe(true);
+    expect(wrapper.find('button[data-vs-action-bar-clear="true"] svg path').exists()).toBe(true);
 
     let actionButtons = wrapper.findAll('button[data-vs-action-group-item="true"]');
     expect(actionButtons).toHaveLength(2);

starters/vue/src/composition.spec.ts

@@ -17054,7 +17054,7 @@ describe('Vue migration composition components', () => {
     expect(wrapper.text()).toContain('2 selected');
 
     await actionButtons[1].trigger('click');
-    await wrapper.get('button.vs-action-bar__clear').trigger('click');
+    await wrapper.get('button[data-vs-action-bar-clear="true"]').trigger('click');
     expect(wrapper.emitted('action')?.[0]).toEqual(['Archive']);
     expect(wrapper.emitted('clearSelection')).toHaveLength(1);
   });

starters/vue/src/storybook-parity.spec.ts

@@ -1570,22 +1570,22 @@ describe('Vue storybook helper parity', () => {
       let wrapper = mount(story);
       wrappers.push(wrapper);
 
-      expect(wrapper.find('.vs-action-bar').exists()).toBe(false);
+      expect(wrapper.find('[data-vs-action-bar="true"]').exists()).toBe(false);
 
       let rowSelection = wrapper.findAll('tbody.vs-table__body input.vs-table__selection-checkbox');
       await rowSelection[0].setValue(true);
       await nextTick();
-      expect(wrapper.get('.vs-action-bar').exists()).toBe(true);
-      expect(wrapper.get('.vs-action-bar__count').text()).toContain('1 selected');
-      expect(wrapper.find('button.vs-action-bar__clear svg path').exists()).toBe(true);
+      expect(wrapper.get('[data-vs-action-bar="true"]').exists()).toBe(true);
+      expect(wrapper.get('[data-vs-action-bar-count="true"]').text()).toContain('1 selected');
+      expect(wrapper.find('button[data-vs-action-bar-clear="true"] svg path').exists()).toBe(true);
 
       await rowSelection[1].setValue(true);
       await nextTick();
-      expect(wrapper.get('.vs-action-bar__count').text()).toContain('2 selected');
+      expect(wrapper.get('[data-vs-action-bar-count="true"]').text()).toContain('2 selected');
 
-      await wrapper.get('button.vs-action-bar__clear').trigger('click');
+      await wrapper.get('button[data-vs-action-bar-clear="true"]').trigger('click');
       await nextTick();
-      expect(wrapper.find('.vs-action-bar').exists()).toBe(false);
+      expect(wrapper.find('[data-vs-action-bar="true"]').exists()).toBe(false);
     } finally {
       for (let wrapper of wrappers) {
         wrapper.unmount();
@@ -2867,19 +2867,19 @@ describe('Vue storybook helper parity', () => {
       let actionBarStory = ListViewWithActionBarStory.render?.({}) as ReturnType<Exclude<typeof ListViewWithActionBarStory.render, undefined>>;
       let actionBarWrapper = mount(actionBarStory);
       wrappers.push(actionBarWrapper);
-      expect(actionBarWrapper.get('.vs-action-bar__count').text()).toContain('1 selected');
+      expect(actionBarWrapper.get('[data-vs-action-bar-count="true"]').text()).toContain('1 selected');
 
       let actionBarListView = actionBarWrapper.getComponent({name: 'VueListView'});
       let actionBarSelectionHandler = (actionBarListView.vm.$.vnode.props as {'onUpdate:modelValue'?: (value: unknown) => void} | undefined)?.['onUpdate:modelValue'];
       expect(actionBarSelectionHandler).toBeTypeOf('function');
       actionBarSelectionHandler?.(new Set(['a', 'b']));
       await nextTick();
-      expect(actionBarWrapper.get('.vs-action-bar__count').text()).toContain('2 selected');
+      expect(actionBarWrapper.get('[data-vs-action-bar-count="true"]').text()).toContain('2 selected');
 
-      await actionBarWrapper.get('button.vs-action-bar__clear').trigger('click');
+      await actionBarWrapper.get('button[data-vs-action-bar-clear="true"]').trigger('click');
       await nextTick();
       expect(actionBarWrapper.findAll('button.vs-listbox__item.is-selected')).toHaveLength(0);
-      expect(actionBarWrapper.find('.vs-action-bar').exists()).toBe(false);
+      expect(actionBarWrapper.find('[data-vs-action-bar="true"]').exists()).toBe(false);
     } finally {
       for (let wrapper of wrappers) {
         wrapper.unmount();