Sidenav: remove sidenav button #478
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 27315e0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
chrisjbrown
changed the title
size-limit report 📦
|
chrisjbrown
requested review from
daneah,
SMQuazi and
satya-achanta-venkata
and removed request for
a team
daneah
changed the title
|
I think this one's good to go |
daneah
reviewed
Nov 29, 2023
There was a problem hiding this comment.
We may want to replace what's currently here removing the sidenav button on the Pharos site and stories with the new way of using a regular ol' button to trigger it opening. This might be separable from releasing the next version of the @ithaka/pharos package.
Co-authored-by: Dane Hillard <github@danehillard.com>
daneah
approved these changes
Nov 29, 2023
daneah
added a commit
that referenced
this pull request
Feb 21, 2024
* release/14.0.0: fix(chromatic): reintroduce build-storybook script (#656) Fix broken whitespace in Icon documentation (#616) chore(deps): bump msgpackr from 1.7.2 to 1.10.1 (#654) Loading Spinner, Sidenav, Docs: use is-on-background correctly (#657) a11y revamp: Pharos Buttons (#594) Sidenav: remove sidenav button (#478) Global: update onBackground to isOnBackground (#578) Remove `paint` value from contain properties (#614) Footer: Remove google translate (#586) fix: use public registry chore: update storybook deps fix: update incorrect imports Site: fix site build (#481) Toast: Update Toaster to use internally consistent scoping (#475) Tabs: move selected state management to pharos-tabs (#468) Infra: Bump TypeScript, add main exports (#472)
brentswisher
added a commit
that referenced
this pull request
Mar 7, 2024
* Infra: Bump TypeScript, add main exports (#472) * feat: bump typscript, add main exports * feat: use yarn registry * feat: export style paths * feat: comment mixins to test * feat: export sass files * feat: export react components * feat: expose utils styles * feat: sort out exports and file extensions * feat: remove dupe export * feat: use pattern to export styles * feat: explicitly export pharos.scss * chore: add changeset * Tabs: move selected state management to pharos-tabs (#468) * fix: tab event * fix: update selected tab via parent * fix(tabs): update property and attribute selectors * fix(tabs): default to selected, then selected-tab, then 0 * fix(tabs): selected-tab already defaults to 0 * fix(tabs): select initial tab panel * fix(tabs): only trigger event if tab not selected * fix(tabs): update test * fix(tabs): add pharos-tabs-tab-selected event * fix(tabs): fire tab selected in updated) * chore: add changeset * Update packages/pharos/src/components/tabs/pharos-tabs.ts Co-authored-by: Dane Hillard <github@danehillard.com> Co-authored-by: Mike Iden <mike.iden@ithaka.org> Co-authored-by: Dane Hillard <github@danehillard.com> * Toast: Update Toaster to use internally consistent scoping (#475) * fix(storybook): fix updateable toast stories * fix(toast): update to use internal scoping * chore: add changeset * docs: fix casing of function name in comment * docs: update code comment to reflect scoped registry behavior * Site: fix site build (#481) * fix(pharos-site): revert pharos-site changes for typescript * fix(pharos-site): leave exports in place * fix(pharos-site): add end line * fix: update incorrect imports * chore: update storybook deps * fix: use public registry * Footer: Remove google translate (#586) * feat(footer): remove deprecated Google Translate widget * chore: add changeset * Remove `paint` value from contain properties (#614) * fix: remove `paint` value from contain properties Of all the `contain` property values, `paint` is the most noticeably problematic when overused because it can bite people by cropping off the content they intended to render within a component that has `paint` containment. For components that rely on composition at the consumer, this has caused issues more than a few times. * chore: add changeset * Global: update onBackground to isOnBackground (#578) * feat(global): update onBackground attribute to isOnBackground * feat(global): update tokens import for pharos-site/.../color * feat(global): revert pharos-site onBackground changes * feat(global): remove .js on token import * feat(global): update on-background to is-on-background * feat(global): remove is-on-background from pharos-site * feat(global): change onBackground to isOnBackground * fix(global): change is-on-background to on-background in tokens * Sidenav: remove sidenav button (#478) * refactor(sidenav): remove sidenav button * refactor(sidenav-button): remove sus comma * refactor(sidenav-button): remove test for sidenav button * fix(sidenav): remove automatic sliding behavior * feat(sidenav): render button conditionally and add unit tests * refactor(sidenav-button): add changeset * Remove console log statement Co-authored-by: Dane Hillard <github@danehillard.com> * fix(sidenav): fix storybook --------- Co-authored-by: Evan Shoup <evan.shoup@ithaka.org> Co-authored-by: Jialin He <jialin.he@ithaka.org> Co-authored-by: Jialin He <38861633+jialin-he@users.noreply.github.com> Co-authored-by: Evan Shoup <112417900+shoupeva-ithaka@users.noreply.github.com> Co-authored-by: Dane Hillard <github@danehillard.com> * a11y revamp: Pharos Buttons (#594) * feat(button): add ability to pass down ARIA attributes * feat(button): add reference to new button types Including the ExpandedState type reference for other components that consume the button. These threw errors when initially compiling so there may be other such commponents that eventually need a similar update. * feat(button): attempt at updating storybook example * feat(button): remove test code for popupstate * feat(button): add aria-haspopup * chore(changeset): add changeset * feat(button): update label attr to a11y-label * feat(button): replace property for ButtonVariant * feat(button): allow backwards compatibility Gives warning if using deprecated attributes, updating aria-pressed * feat(button): update storybook aria-pressed * feat(button): remove fallback from major release * feat(button): add a11y attributes typing * test(button): add tests for new aria attributes * feat(button): add ability to pass down ARIA attributes * feat(button): add reference to new button types Including the ExpandedState type reference for other components that consume the button. These threw errors when initially compiling so there may be other such commponents that eventually need a similar update. * feat(button): attempt at updating storybook example * feat(button): remove test code for popupstate * feat(button): add aria-haspopup * chore(changeset): add changeset * feat(button): update label attr to a11y-label * feat(button): replace property for ButtonVariant * feat(button): allow backwards compatibility Gives warning if using deprecated attributes, updating aria-pressed * feat(button): update storybook aria-pressed * feat(button): remove fallback from major release * feat(button): add a11y attributes typing * test(button): add tests for new aria attributes * fix(a11y attributes): update AriaHiddenState name * fix(button): remove ts ignore * feat(button): remove backwards compat * feat(button): add aria-disabled back * test(button): add a11y-label to new components * fix: remove sidenav button from bad merge * test(button): fix aria-pressed in toggle buttons * Update packages/pharos/src/components/sidenav/PharosSidenav.react.stories.jsx Co-authored-by: Dane Hillard <github@danehillard.com> * Update packages/pharos/src/components/toast/pharos-toast-button.ts Co-authored-by: Dane Hillard <github@danehillard.com> * fix(btn): remove aria-description --------- Co-authored-by: Dane Hillard <github@danehillard.com> * Loading Spinner, Sidenav, Docs: use is-on-background correctly (#657) * fix(loading-spinner, sidenav, docs): use is-on-background correctly * chore: add changeset * fix: address linting issues * chore(deps): bump msgpackr from 1.7.2 to 1.10.1 (#654) Bumps [msgpackr](https://github.com/kriszyp/msgpackr) from 1.7.2 to 1.10.1. - [Release notes](https://github.com/kriszyp/msgpackr/releases) - [Commits](https://github.com/kriszyp/msgpackr/commits/v1.10.1) --- updated-dependencies: - dependency-name: msgpackr dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Fix broken whitespace in Icon documentation (#616) * Update icon.docs.mdx added empty space to fix run on from "an" "aria" * Update packages/pharos-site/static/guidelines/icon.docs.mdx --------- Co-authored-by: Dane Hillard <github@danehillard.com> * fix(chromatic): reintroduce build-storybook script (#656) * Remove old onBackground attribute from sidenav storybook story (#671) * fix(sidenav): remove onBackground attribute When merging the latest develop into this release branch the sidenav component ended up with both the old onBackground and new isOnBackground versions of the attribute in its storybook story. This removes the old version so it is correct. * chore: add changeset * Update link, dropdown-menu-nav, and popover to use a11y-label - Breaking (#676) * feat: add & update a11y-label, remove label * feat: update remaining components to use a11y-label * chore: add changeset * fix: update a11yLabel references * fix: update a11y-label descriptions for each component * fix(popover): clean up the aria-labelledby attribute * fix(link): update SB to pass in a11yLabel values (#677) * fix(link): update SB to pass in a11yLabel values * chore: add changeset * DropdownMenu: add nav category to replace links (#479) * refactor(dropdown-menu): add dropdownmenunavheading * refactor(dropdown-menu): rename nav heading to nav category * refactor(dropdown-menu): add slot name * refactor(dropdown-menu): correctly name component * refactor(dropdown-menu): remove hrefs from categories * refactor(dropdown-menu): test stories component rename * refactor(dropdown-menu): add import * chore: merge branch release-v13 * Revert "chore: merge branch release-v13" This reverts commit 617d9be. * chore: add scoping * fix: init storybook category * fix: attribute naming * fix: add is-active property/attribute to category Also, remove pharos-icon from nav-link as it is no longer necessary * refactor: move aria attributes to button * refactor: style dropdown menu button * refactor: add slot category to header test * refactor: remove aria attributes from container * refactor: add scoping * refactor: add category slot * refactor(dropdown-menu): check has hover over attribute * fix: add nothing value from lit * fix: remove unnecessary href from DropdownMenuNavCategory --------- Co-authored-by: Dane Hillard <github@danehillard.com> Co-authored-by: Mat Harris <mat.harris@ithaka.org> * Require icon accessibility attributes (#679) * feat(icon): throw error for inaccessible icons Previously, the a11y-title and a11y-hiddden attributes were added and the description attribute was deprecated. This change removes the description attribute and throws an error if an icon is used without proper accessibility attributes. * fix: remove deprecated attribute from tests There was a default description of "" for icons but now that has been removed. * fix(dropdown-menu-nav): add a11y-hidden to icon Because there will always be a category in the button text and the icon is purely decorative, it should be hidden from screen readers. * hotfix(icon): fix typo in test description Co-authored-by: Mat Harris <mat.harris@ithaka.org> * chore: add changeset --------- Co-authored-by: Mat Harris <mat.harris@ithaka.org> * Combobox: Add default elevation (#683) * feat(combobox): add default elevation Adds elevation token level 3 to the combobox component. * feat(combobox): remove border on combobox list * chore: update changeset --------- Co-authored-by: Markell Torres <markell.torres@ithaka.org> * Modal: Add default elevation (#681) * feat(modal): add elevation token Adds elevation token level 5 to the modal component. * chore: add changeset * feat(modal-elevation): remove border and move elevation to modal__content class --------- Co-authored-by: Markell Torres <markell.torres@ithaka.org> * feat(popover): add elevation token (#682) Adds elevation token level 4 to the popover component. * Dropdown Menu: Add default elevation (#684) * feat(dropdown-menu): add elevation token Adds a default elevation to the dropdown-menu set to elevation level 3. * feat(dropdown-menu): remove border With the new elevation styles, the border is no longer needed. * Tabs: Remove overflow-y from pharos-tabs' tab__panels class (#690) * style(tabs): remove overflow-y * docs(tabs): add changeset * Add ability to use a11y-disabled and maintain default disabled styling (#691) * feat(btn): a11y-disabled remove disabled attr, checks to see if aria-disabled is being used and if so removes the disabled attribute * chore: add changeset * Update Storybook stories with new sidenav display logic (#696) * fix(sidenav): update react report storybook example * fix(sidenav): update web component reports storybook example Update the sidenav in the Reports example to handle showing/hiding at a certain window size. This used to be the default behaviors of the sidenav before the v14 release` * fix(layout): default sidenav layouts to open Because the sidnav no longer contains the logic to open and close, the layout stories were broken. Now, the default state is open, although the mobile experience could probably be improved. * fix(sidenav): update storybook mobile breakpoint to match wc version * chore: add changeset * fix(sidenav): default stories to use close button Because the default story a hidden the sidenav, the close button should be enabled by default. * fix(sidenav): update import syntax * refactor: update sidenav stories to use a ResizeObserver * chore: trigger new build * chore(deps-dev): bump vite from 4.3.9 to 4.5.2 (#672) Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.3.9 to 4.5.2. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/v4.5.2/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v4.5.2/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * DropdownMenuNav: Add pharos-elevation-level-3 token (#670) * fix(dropdown-menu-nav): add elevation 3 to dropdown-menu-nav * add changeset * fix(dropdown-menu): add elevation 3 to dropdown-menu * Update link, dropdown-menu-nav, and popover to use a11y-label (#675) * chore: merge upstream Squashed commit of the following: * feat: update label to a11y-label Added the a11y-label attribute to replace the label attribute when needing to update a components aria-label * feat: update references from label to a11y-label For components and tests that referenced the label attribute this updates those to now use the a11y-label attribute * chore: add changeset * fix: update a11y-label descriptions for each component * Fix the all-contributors badge (#680) * fix(docs): update all-contributors badge to show proper count The all-contributors badge was stuck at a count of 20, as we seem to have been using a hard-coded image. This updates the badge to a proper dynamic badge with the right count. * chore(docs): add color parameter to badge * Icon: Add "add to folder" icon (#678) * feat(icon): add add to folder icon * docs(icon): update change log for addin add to folder icon * Update .changeset/good-readers-lay.md --------- Co-authored-by: Dane Hillard <github@danehillard.com> * chore: version packages (#685) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore(deps): bump ip from 1.1.8 to 1.1.9 (#687) Bumps [ip](https://github.com/indutny/node-ip) from 1.1.8 to 1.1.9. - [Commits](indutny/node-ip@v1.1.8...v1.1.9) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(icon): add media query style for WHCM (#689) * fix(icon): add media query style for Windows High Contrast Mode * chore: add changeset * chore(deps): bump es5-ext from 0.10.62 to 0.10.64 (#692) Bumps [es5-ext](https://github.com/medikoo/es5-ext) from 0.10.62 to 0.10.64. - [Release notes](https://github.com/medikoo/es5-ext/releases) - [Changelog](https://github.com/medikoo/es5-ext/blob/main/CHANGELOG.md) - [Commits](medikoo/es5-ext@v0.10.62...v0.10.64) --- updated-dependencies: - dependency-name: es5-ext dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): upgrade to Yarn 4 (#694) * chore(deps): upgrade to Yarn 4 Some recent ecosystem changes no longer support Yarn v1 moving forward. Coupled with a potential desire to use Yarn PnP / Zero installs (#635), this upgrade puts us in good shape to keep moving. * fix(infra): update Yarn cache dir in GitHub Actions * fix(infra): update Yarn cache dir in GitHub Actions * fix(infra): update Yarn installation flags * fix: prevent report example from being tree-shaken Without an actual export of the report example, it was being tree-shaken when storybook was being built. --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Dane Hillard <github@danehillard.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Markell Torres <54967638+mtorres3@users.noreply.github.com> Co-authored-by: Mat Harris <mat.harris@ithaka.org> Co-authored-by: mariadevadoss <132926833+mariadevadoss@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * hotfix: update sidenav button to use a11yLabel Co-authored-by: Mat Harris <mat.harris@ithaka.org> * Require an accessible label be present for icon-only buttons (#699) * feat(button): require a11y-label for icon buttons Because the icon in an icon button is set to aria-hidden="true", it is not visible to screen readers. This change requires an a11y-label for icon buttons to ensure that the button is accessible. * fix: unit test buttons were inaccessible * fix: add accessible label to icon button group stories --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Christopher Brown <christopher.brown@ithaka.org> Co-authored-by: Mike Iden <mike.iden@ithaka.org> Co-authored-by: Dane Hillard <github@danehillard.com> Co-authored-by: Markell Torres <markell.torres@ithaka.org> Co-authored-by: Satya Achanta <satya.achantavenkata@ithaka.org> Co-authored-by: Markell Torres <54967638+mtorres3@users.noreply.github.com> Co-authored-by: Evan Shoup <evan.shoup@ithaka.org> Co-authored-by: Jialin He <jialin.he@ithaka.org> Co-authored-by: Jialin He <38861633+jialin-he@users.noreply.github.com> Co-authored-by: Evan Shoup <112417900+shoupeva-ithaka@users.noreply.github.com> Co-authored-by: Mat Harris <mat.harris@ithaka.org> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: david-corneail <104939119+david-corneail@users.noreply.github.com> Co-authored-by: Yanni Mouzakis <64924035+ymouzakis@users.noreply.github.com> Co-authored-by: mariadevadoss <132926833+mariadevadoss@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This change removes the PharosSidenavButton and automatic sliding behavior of the sidenav. Before, the PharosSidenavButton and the PharosSidenav controlled its visibility automatically, making it difficult for consumers to control its state.
Now, users can control...
openpropertyhasCloseButtonpropertydata-sidenav-idattribute on trigger elements to open the sidenav when clickedThis change: (check at least one)
Is this a breaking change? (check one)
Is the: (complete all)
What does this change address?
Resolves #417
How does this change work?
Removes
PharosSidenavButtonand it's references. Previously the button was being used to maintain the state of theSideNav. This change moves that responsibility to the consumer where it can passslide= [true/false] in order to control the visibility of thePharosSideNav.