Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(components): update dropdown id #86

Merged
merged 4 commits into from
Jun 10, 2024
Merged

fix(components): update dropdown id #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
14410e5
fix(components): update dropdown to require id
joshuagraber Jun 10, 2024
cf41914
docs(components): update dropdown docs
joshuagraber Jun 10, 2024
879e445
refactor(scripts): update docs script output copy
joshuagraber Jun 10, 2024
ed96d86
style(scripts): remove white space in docs output
joshuagraber Jun 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions scripts/update-docs.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
5 changes: 5 additions & 0 deletions src/components/Dropdown/PdapDropdown.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>',
Expand Down Expand Up @@ -48,6 +51,7 @@ describe('PdapDropdown', () => {
wrapper = shallowMount(PdapDropdown, {
props: {
disabled: true,
dropdownId: 'test-dropdown',
},
slots: {
trigger: 'Toggle Dropdown',
Expand All @@ -67,6 +71,7 @@ describe('PdapDropdown', () => {
it('should respect the triggerOn prop', async () => {
wrapper = shallowMount(PdapDropdown, {
props: {
dropdownId: 'test-dropdown',
triggerOn: PdapDropdownTriggerType.HOVER,
},
slots: {
Expand Down
1 change: 0 additions & 1 deletion src/components/Dropdown/PdapDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
11 changes: 6 additions & 5 deletions src/components/Dropdown/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
16 changes: 8 additions & 8 deletions src/components/Dropdown/__snapshots__/PdapDropdown.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
1 change: 1 addition & 0 deletions src/components/Dropdown/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,6 @@ export enum PdapDropdownTriggerType {
export interface PdapDropdownProps {
defaultOpen?: boolean;
disabled?: boolean;
dropdownId: string;
triggerOn?: PdapDropdownTriggerType;
}
2 changes: 2 additions & 0 deletions src/demo/pages/ComponentDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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')"
Expand Down
Loading