Experimental Design [Allow accordion to have a sizable icon]

raquelou commented 2 weeks ago

What

We would like to adjust the way that an icon is applied within the accordion so it is more sizable.

Purpose

The icons that are being displayed in the header of the accordions are small and when there are details within an icon they are sometimes lost.

Usage

Context or task: On the Performance Dashboard we are doing a redesign and using accordions for each service type. We want to provide an icon to be associated with each service type name to provide users with additional visual differentiation.

Behavior

The accordion would function in the same way. The icon would be larger and take up height of two lines of text instead of the current one.

Examples

Include any examples you have of this component or pattern. These can be screenshots, links to a Sketch file, or links to staging or production.

Accessibility

The icons could provide context to those who have difficulty reading

Guidance

Including the larger icon would have enhanced visual hierarchy.

Collaboration Cycle Ticket

Link to your collaboration cycle ticket

Your team

Iterate, Innovate, Run (IIR)

Research (optional)

Include any research you have already conducted, or plan to conduct, on this component or pattern.

Code (optional)

Include any existing code.

Next steps

You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.

Submit requests to join an upcoming Design System Council meeting in #platform-design-system.

During the meeting, the Design System Council Working Group will evaluate the request and make a decision.

If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.

caw310 commented 2 weeks ago

@raquelou The next available DSC meetings is Thursday, June 27 at 11:05am ET. Let me know if you can attend and I will add you to the meeting invite.

caw310 commented 2 weeks ago

@raquelou we think you should be able to do this yourself.

@Andrew565 would you be able to provide guidance on this?

Andrew565 commented 2 weeks ago

@raquelou In theory (haven't tried this myself yet), when you're defining the icon for the icon slot, you should be able to set the icon size using the size prop on the va-icon component. We haven't updated the storybook example with va-icon yet, but it should look something like this:

<va-accordion>
  <va-accordion-item
    header="First Amendment"
    id="first"
    subheader="Subheader"
  >
    <va-icon
      icon="check"
      size="4"
      className="vads-u-color--green"
      slot="icon"
    />
    <p>
      Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.
    </p>
  </va-accordion-item>
  ...etc.

raquelou commented 5 days ago

In a discussion I had with members of the collab team it sounded like the way the accordion was built any icon that was added would be placed next to the accordion header. If that is the case I am assuming that the supplementary copy would be moved down to adjust for the height of the icon. Please let me know if I am incorrect in my understanding of how the accordion component is built.

department-of-veterans-affairs / vets-design-system-documentation