Change #1139140 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[design/codex@main] Accordion: Use flexbox instead of positioning for action button

https://gerrit.wikimedia.org/r/1139140

• The height of the button would ideally be 32px, the typical size of our buttons. Whether or not a token is used for the height or it's set some other way, doesn't matter to me as much.
• Ideally, the button should remain its original size and position, i.e. square, when the title and/or description become long.
• If we could make the button flush to the edges (mainly top and right for LTR) that would be ideal. If not, and if that requires an unreasonable amount of code or effort, then I think having the same padding as the Accordion header is okay.
• Similarly to our buttons currently, the size of the button should not change with the changing in font modes.

Would like to see a demo to design review this after changes are made.

Assuming this task is about the Codex code project, hence adding that project tag so other people who don't know or don't care about team tags can also find this task when searching via projects or looking at workboards. Please set appropriate project tags when possible. Thanks.

I think we need some updated design mockups to cover the various scenarios – multi-line title and multi-line description with button, etc.

Okay, here are some revised designs with the proposed design solution. The button should be square, and the ultimate goal is that the button is ideally flush with the edges of the accordion header, and the icon should stay centered with the first line of the header text, just as the chevron icon at the start does. So the height (and therefore width) of the button should remain the size of the header height with one line of text whether or not there is one line of text. Now, with font modes, the height of the accordion/header with one line of text changes, so that's something to keep in mind.

Hey @DTorsani-WMF, I updated the existing patch to apply flexbox to the Accordion (demo). The chevron indicator icon, header, and action button are aligned to the beginning of a flex container (flex-start). The action button is square and maintains 32x32 dimensions in different font modes. To align the action button flush to the top-right corner, the button is offset relative to itself (https://developer.mozilla.org/en-US/docs/Web/CSS/position).

// Action button is flush to the edge of the parent container by offsetting it relative to itself.
position: relative;
bottom: @spacing-75; // same as parent container's padding 12px
left: @spacing-75;

Notes:

• The alignment is slightly off in larger font modes (large and extra-large) when the buttons are flush to the edge. It could just be that it's more apparent in the larger font modes 🤔 [I'll send a video via Slack because the file is too large]
• Chevron icon, header, and action button are aligned to the beginning of the container in patchsets 3 and 4. To download a specific patchset of a change, use git review -d 1139140,3 to download patchset 3 of change 1139140.
  • Patchset 3: Button is not flush to the edge ("basic" approach)
  • Patchset 4: Button is flush to the edge

What are your thoughts on this approach?

Thanks for providing this update @lwatson. A couple thoughts:

• For patchset 3, when the action button is applied, it changes the height of the overall accordion, which is not intended. The action button is centered, which is right, but it means the text and chevron become misaligned with the overall accordion. The action button should not change the height of the accordion header.

• For patchset 4, if the button is flush to the edges, it should be the height of the accordion with one line of text, that way it is centered with the first line of text.

That being said, I prefer patchset 3, the more basic approach. Can you move forward with this and fix the height issue?

Thanks @DTorsani-WMF, I'll share an update later today

@DTorsani-WMF I updated the patch.

Updates:

• Fixed the alignment issue by positioning the action button to the top of the flex container (align-self: flex-start).
• Applied negative margins to the top and bottom of the action button to offset the 4px extra height (2px padding + 2px border). Now, the Accordion's 52px height (for single-line header titles) is consistent whether the action button is present or not.

Thanks @lwatson! However, I'm not seeing that anything has changed in the demo. I see your code reflects your comment here, but the height issue and misalignment still exists. Am I lookin at something wrong?

@DTorsani-WMF It may take some time to publish the changes to Netlify. I just checked and the Netlify link reflects the new changes. Can you try the link again?
https://1139140--wikimedia-codex.netlify.app/components/demos/accordion.html

Edit: According to Gerrit, the main test build succeeded at 1:37 pm EST, so I assume it was a bit too early to view the Netlify link before that time.

before:

after patchset 5:

I think this fits pretty well!

Change #1139140 merged by jenkins-bot:

[design/codex@main] Accordion: Use flexbox instead of positioning for action button

https://gerrit.wikimedia.org/r/1139140

Change #1191541 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update Codex from v2.3.1 to v2.3.2

https://gerrit.wikimedia.org/r/1191541

Change #1191541 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v2.3.1 to v2.3.2

https://gerrit.wikimedia.org/r/1191541

@lwatson Is this ready to be resolved, or does Reader Growth need to continue to work with this ticket?

@Volker_E Yes, this task is ready to be resolved. The merged patch uses negative margins, and there was a suggestion to investigate an alternative approach to negative margins as a follow-up task.

Follow-up task: T405956: Accordion: investigate alternative approach to negative margins