Right now, we have cards with a white background and accessible links in their headers in the main content region, but we have a mixture of divs and details in the right column. Aside from the visual mismatch this creates, @Dmytrii also pointed out that we cannot achieve a consistent edit button appearance for the order details section as is. Consistency would be preferred here over strict adherence to George’s mockups.

I believe these should all be made cards similar to the billing / shipping information elements in the main content region. This would mean white backgrounds and no collapsible “fieldset” style behavior like we have today. Additionally, do we have any options for styling the header of these cards differently? Like using a yellow to match the draft state for warning messages for the draft order actions list?

Finally, would be nice if we could align this right column with the main content region. There’s a margin-block-start on this region dropping it down 2 rem, not sure what the implications are of removing that.

Issue fork commerce-3559778

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rinasek created an issue. See original summary.

majmunbog made their first commit to this issue’s fork.

majmunbog’s picture

Version: 3.0.x-dev » 3.x-dev

majmunbog’s picture

Status: Active » Needs review

I’ve enhanced our commerce-admin-card SDC with optional collapsible behavior using custom JS, so we can use that instead of details. I also added footer and header slots for more flexible styling and a title_tag prop so we could adjust the semantic importance of the card.
All that is applied to the current sidebar cards.

jsacksick made their first commit to this issue’s fork.

  • jsacksick committed cd976ade on 3.x authored by majmunbog
    feat: #3559778 Convert all right column elements to similar cards
    
    By:...
jsacksick’s picture

Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.