Skip to content
New issue

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

#

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

Already on GitHub? # to your account

Jump to bottom

Implement description for OnyxSelect #1392

Closed
14 tasks done
larsrickert opened this issue Jun 24, 2024 · 0 comments
Closed
14 tasks done

Implement description for OnyxSelect #1392

larsrickert opened this issue Jun 24, 2024 · 0 comments
Assignees
@MajaZarkova
Labels
dev Requires technical expertise
Milestone
Combo boxes

Comments

@larsrickert
Copy link
Collaborator

larsrickert commented Jun 24, 2024 •
edited by mj-hof
Loading

Why?

To align with the Figma design, we want to support a description for the OnyxSelect flyout.

Design

Figma

Image

Acceptance criteria

  • the select supports an optional listDescription property (or slot) to display additional text at the bottom of the flyout
  • the listDescription behaves like a footer - it is out of the scroll context. the load more is above it.
  • align the prop name with Jannick so Figma matches

Definition of Done

  • The following component requirements are implemented:
    • density
    • example usage added to apps/alpha-test-app/src/views/HomeView.vue
  • covered by component tests
  • screenshot tests are updated
  • follow-up tickets were created if necessary -> Implement OnyxSelect list description without bottom padding #1718
  • updated version + documentation is deployed
  • Storybook can show the feature
  • Storybook code snippet of new/changed examples are checked that they are generated correctly
  • Set task to In Approval

Approval

Implementation Details

  • use aria-description for the listDescription
@larsrickert larsrickert added the dev Requires technical expertise label Jun 24, 2024
@larsrickert larsrickert added this to the Combo boxes milestone Jun 24, 2024
@larsrickert larsrickert mentioned this issue Jun 24, 2024
Closed
9 tasks
@MajaZarkova MajaZarkova self-assigned this Jul 23, 2024
@MajaZarkova MajaZarkova mentioned this issue Jul 26, 2024
Merged
2 tasks
MajaZarkova added a commit that referenced this issue Aug 7, 2024
@MajaZarkova @github-actions @BoppLi
feat(OnyxSelect): Implement description for OnyxSelect (#1633)
244219f 
<!-- Is your PR related to an issue? Then please link it via the
"Relates to #" below. Else, remove it. -->

Relates to #1392 

Added new 'listDescription' property. The description text will be shown
at the end of the flyout

## Checklist

- [x] If a new component is added, at least one [Playwright screenshot
test](https://github.com/SchwarzIT/onyx/actions/workflows/playwright-screenshots.yml)
is added
- [x] A changeset is added with `npx changeset add` if your changes
should be released as npm package (because they affect the library
usage)

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Linda Bopp <151019977+BoppLi@users.noreply.github.com>
@MajaZarkova MajaZarkova mentioned this issue Aug 7, 2024
Merged
MajaZarkova added a commit that referenced this issue Aug 7, 2024
@MajaZarkova
feat(demo-app): Add example in demo app (#1717)
3093223 
<!-- Is your PR related to an issue? Then please link it via the
"Relates to #" below. Else, remove it. -->

Relates to #1392 

Added new example of OnyxSelect with list description in the demo app.
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees

@MajaZarkova MajaZarkova

Labels
dev Requires technical expertise
Projects
onyx
Status: Done
Milestone
Combo boxes
Development

No branches or pull requests
2 participants
@MajaZarkova @larsrickert