fix(components): update dropdown id (#86)

scripts/update-docs.sh

@@ -20,11 +20,11 @@ done
 
 # create a commit, only if there are changes
 if git diff --quiet docs/$output_file; then
- echo "No component documentation changes detected"
+ echo -e "No new component README files detected.\nProceeding with push"
  exit 0
 else
  commit_msg="chore(docs): auto-update to component docs"
 
- echo "Changes detected, committing updated docs/$output_file file..."
+ echo "New README files detected, committing updated docs/$output_file file..."
  git add docs/$output_file && git commit -m "$commit_msg" --no-verify && echo "Commit finished, proceeding with push"
 fi

src/components/Dropdown/PdapDropdown.spec.ts

@@ -10,6 +10,9 @@ let content;
 describe('PdapDropdown', () => {
  beforeEach(() => {
  wrapper = shallowMount(PdapDropdown, {
+ props: {
+ dropdownId: 'test-dropdown',
+ },
  slots: {
  trigger: 'Toggle Dropdown',
  content: '<ul><li>Option 1</li><li>Option 2</li><li>Option 3</li></ul>',
@@ -48,6 +51,7 @@ describe('PdapDropdown', () => {
  wrapper = shallowMount(PdapDropdown, {
  props: {
  disabled: true,
+ dropdownId: 'test-dropdown',
  },
  slots: {
  trigger: 'Toggle Dropdown',
@@ -67,6 +71,7 @@ describe('PdapDropdown', () => {
  it('should respect the triggerOn prop', async () => {
  wrapper = shallowMount(PdapDropdown, {
  props: {
+ dropdownId: 'test-dropdown',
  triggerOn: PdapDropdownTriggerType.HOVER,
  },
  slots: {

src/components/Dropdown/PdapDropdown.vue

@@ -57,7 +57,6 @@ const props = withDefaults(defineProps<PdapDropdownProps>(), {
 const emit = defineEmits(['update:open', 'press']);
 
 // Vars
-const dropdownId = 'pdap-dropdown';
 const contentRef = ref<HTMLElement | null>(null);
 const dropdownRef = ref<HTMLElement | null>(null);
 const open = ref<boolean>(props.defaultOpen);

src/components/Dropdown/README.md

@@ -4,11 +4,12 @@ The Dropdown component is an accessible dropdown menu that can be triggered by c
 
 ## Props
 
-| name | required? | types | description | default |
-| ------------- | --------- | -------------------- | -------------------------------------------------- | --------- |
-| `defaultOpen` | no | `boolean` | Whether the dropdown is initially open | `false` |
-| `disabled` | no | `boolean` | Whether the dropdown should be disabled | `false` |
-| `triggerType` | no | `"press" \| "hover"` | The type of event that should trigger the dropdown | `"press"` |
+| name | required? | types | description | default |
+| ------------- | --------- | -------------------- | -------------------------------------------------- | -------------- |
+| `defaultOpen` | no | `boolean` | Whether the dropdown is initially open | `false` |
+| `disabled` | no | `boolean` | Whether the dropdown should be disabled | `false` |
+| `dropdownId` | yes | `string` | ID of dropdown content, must be unique | none, required |
+| `triggerType` | no | `"press" \| "hover"` | The type of event that should trigger the dropdown | `"press"` |
 
 ## Slots
 

src/components/Dropdown/__snapshots__/PdapDropdown.spec.ts.snap

@@ -2,9 +2,9 @@
 
 exports[`PdapDropdown > should be accessible with keyboard 1`] = `
 <div class="pdap-dropdown">
- <pdap-button-stub aria-controls="pdap-dropdown" aria-expanded="false" aria-haspopup="true" class="pdap-dropdown-trigger" disabled="false" intent="tertiary" isloading="false"></pdap-button-stub>
+ <pdap-button-stub aria-controls="test-dropdown" aria-expanded="false" aria-haspopup="true" class="pdap-dropdown-trigger" disabled="false" intent="tertiary" isloading="false"></pdap-button-stub>
  <transition-stub appear="true" css="true" name="dropdown" persisted="true">
- <div aria-hidden="true" class="pdap-dropdown-content" id="pdap-dropdown" role="menu" style="display: none;">
+ <div aria-hidden="true" class="pdap-dropdown-content" id="test-dropdown" role="menu" style="display: none;">
  <ul>
  <li>Option 1</li>
  <li>Option 2</li>
@@ -17,9 +17,9 @@ exports[`PdapDropdown > should be accessible with keyboard 1`] = `
 
 exports[`PdapDropdown > should open and close dropdown correctly 1`] = `
 <div class="pdap-dropdown">
- <pdap-button-stub aria-controls="pdap-dropdown" aria-expanded="false" aria-haspopup="true" class="pdap-dropdown-trigger" disabled="false" intent="tertiary" isloading="false"></pdap-button-stub>
+ <pdap-button-stub aria-controls="test-dropdown" aria-expanded="false" aria-haspopup="true" class="pdap-dropdown-trigger" disabled="false" intent="tertiary" isloading="false"></pdap-button-stub>
  <transition-stub appear="true" css="true" name="dropdown" persisted="true">
- <div aria-hidden="true" class="pdap-dropdown-content" id="pdap-dropdown" role="menu" style="display: none;">
+ <div aria-hidden="true" class="pdap-dropdown-content" id="test-dropdown" role="menu" style="display: none;">
  <ul>
  <li>Option 1</li>
  <li>Option 2</li>
@@ -32,9 +32,9 @@ exports[`PdapDropdown > should open and close dropdown correctly 1`] = `
 
 exports[`PdapDropdown > should respect disabled prop 1`] = `
 <div class="pdap-dropdown">
- <pdap-button-stub aria-controls="pdap-dropdown" aria-expanded="false" aria-haspopup="true" class="pdap-dropdown-trigger pointer-events-none cursor-not-allowed" disabled="true" intent="tertiary" isloading="false"></pdap-button-stub>
+ <pdap-button-stub aria-controls="test-dropdown" aria-expanded="false" aria-haspopup="true" class="pdap-dropdown-trigger pointer-events-none cursor-not-allowed" disabled="true" intent="tertiary" isloading="false"></pdap-button-stub>
  <transition-stub appear="true" css="true" name="dropdown" persisted="true">
- <div aria-hidden="true" class="pdap-dropdown-content" id="pdap-dropdown" role="menu" style="display: none;">
+ <div aria-hidden="true" class="pdap-dropdown-content" id="test-dropdown" role="menu" style="display: none;">
  <ul>
  <li>Option 1</li>
  <li>Option 2</li>
@@ -47,9 +47,9 @@ exports[`PdapDropdown > should respect disabled prop 1`] = `
 
 exports[`PdapDropdown > should respect the triggerOn prop 1`] = `
 <div class="pdap-dropdown">
- <pdap-button-stub aria-controls="pdap-dropdown" aria-expanded="false" aria-haspopup="true" class="pdap-dropdown-trigger" disabled="false" intent="tertiary" isloading="false"></pdap-button-stub>
+ <pdap-button-stub aria-controls="test-dropdown" aria-expanded="false" aria-haspopup="true" class="pdap-dropdown-trigger" disabled="false" intent="tertiary" isloading="false"></pdap-button-stub>
  <transition-stub appear="true" css="true" name="dropdown" persisted="true">
- <div aria-hidden="true" class="pdap-dropdown-content" id="pdap-dropdown" role="menu" style="display: none;">
+ <div aria-hidden="true" class="pdap-dropdown-content" id="test-dropdown" role="menu" style="display: none;">
  <ul>
  <li>Option 1</li>
  <li>Option 2</li>

src/components/Dropdown/types.ts

@@ -6,5 +6,6 @@ export enum PdapDropdownTriggerType {
 export interface PdapDropdownProps {
  defaultOpen?: boolean;
  disabled?: boolean;
+ dropdownId: string;
  triggerOn?: PdapDropdownTriggerType;
 }

src/demo/pages/ComponentDemo.vue

@@ -112,6 +112,7 @@
  <h2>Dropdown: click or press to open</h2>
  <!-- Dropdown emits an update:open event we can use to apply state-based classes to slot elements... -->
  <Dropdown
+ dropdown-id="demo-press"
  @update:open="(isOpen: boolean) => (dropDownPressIsOpen = isOpen)"
  >
  <template #trigger>
@@ -155,6 +156,7 @@
  </h2>
  <!-- Dropdown emits an update:open event we can use to apply state-based classes to slot elements... -->
  <Dropdown
+ dropdown-id="demo-hover"
  :trigger-on="PdapDropdownTriggerType.HOVER"
  @update:open="(isOpen: boolean) => (dropDownHoverIsOpen = isOpen)"
  @press="() => buttonAlert('Hello from top-level button')"