UX/UI bugs for new course outline and unit page sidebars

[ChrisChV]

Main Content Area

• [init] The expand collapse action is stretched wider than it should be, resulting in a oval click target. (the parent span class is narrower than the svg contained within it)
• [regression?] I'm unable to reorder items on the course outline, I see a "unable to save changes. please try again" page level message
• [question] Selecting a card doesn't open the child object's sidebar view yet - perhaps that is intended / expected and is a future ticket?
• [question?] The metrics icon pulls up the page level alignment mode not the alignment view for that specific element in the outline (this may be a future ticket?)

Sidebar Controls (#2623)

• [init] The padding /spacing around the controls is a bit off relative to Figma, additional space around the controls as well as a left side border even when collapsed would help as well.
• [init] The collapse sidebar icon differs from what I expected, is that also another Google Material icon? The icon in the figma file is a tad simpler, less detail and I think a better fit (looks like a text alignment / justification icon than the current sandbox icon)
• [init] The sidebar when collapsed should not have any of the tabs active, but currently the most recently used tab is shown as active. Even if we store / recall "the tab you had open most recently", we should not show the active styling on the tab when the sidebar is closed.

Sidebar Header Area (#2623)

• [init] There should be a line dividing the header area and the main sidebar content area. This is missing for Help, Align, and Info.
• [init] Similarly the dividing header line should be full width across the sidebar. Currently on the Add sidebar it is separated from the edges of the sidebar by a 16px padding.
• [init] The tabs in this area should be full width in their click targets and hover areas, instead the only area that is acting this way is the width of the text label. The out of the box paragon tabs element should address this so I'm not sure what customization was needed that caused this drift.
• [init] More a comment about the full sidebar not just the header but a left border is missing on the sidebar as well (1px gray line I think)

Info Sidebar (#2623)

• [init] The header of the course outline page level sidebar has a partially broken header, we see the icon for the course level but not the course name.

Add Sidebar (#2629)

• [init] The elements in here need a bit more padding to separate them from the Add New / Add Existing tab elements.
• [init] The box shadow feels like it might be 1 elevation level higher than expected but I wasn't entirely sure how to immediately convert the rem sizing into what is in Figma.
• [question] I wasn't able to add a section to the outline this might be pending other tickets / open issues?

[ChrisChV]

@marcotuts

(1) I believe these issues are already fixed; if not, could you give me a more detailed explanation?

[init] The expand collapse action is stretched wider than it should be, resulting in a oval click target. (the parent span class is narrower than the svg contained within it)

[init] The header of the course outline page level sidebar has a partially broken header, we see the icon for the course level but not the course name.

(2) I think this issues are fixed now in the sandbox. Can you check them?

[regression?] I'm unable to reorder items on the course outline, I see a "unable to save changes. please try again" page level message

[init] More a comment about the full sidebar not just the header but a left border is missing on the sidebar as well (1px gray line I think)

(3) Answers:

Selecting a card doesn't open the child object's sidebar view yet - perhaps that is intended / expected and is a future ticket?

Yes, this is the ticket: #2638, and is ready to AC testing on the sandbox

The metrics icon pulls up the page level alignment mode not the alignment view for that specific element in the outline (this may be a future ticket?)

What is the metrics icon? Could you explain this in more detail?

I wasn't able to add a section to the outline this might be pending other tickets / open issues?

It should be fixed now in the sandbox

[ChrisChV]

Hi @jmakowski1123 @marcotuts @crathbun428 this is ready for AC testing on the sandbox

[marcotuts]

Thanks @ChrisChV !

I reviewed the list above, converted them to numbers so I can reference the numbers again here:

Main Content Area
1 - [nit / very minor] I'm still seeing this issue, here's a screenshot to show the oval sizing of the click target for expand / collapse. The focus ring / circle around the expand / collapse icon is wider than it is tall, and the size of this area is smaller than the equivalent hover / click targets for the overflow menu / drag handles on the right side.

2 - ✅ this looks to be resolved / working!

3 - ✅ this looks to be resolved / working!

4 - This metrics sidebar is something that was added in Teak but may require a feature flag t o be set? I've linked the release notice for this https://docs.openedx.org/en/latest/community/release_notes/teak/aspects_updates.html, and the sidebar updates to the metrics feature (just reall the header area the content of the sidebar is unchanged) can be seen in figma here: https://www.figma.com/design/4wsTUbieYphB2qchIPxm10/%E2%9C%8F%EF%B8%8F-Library---Course-Authoring-v1.0--Open-edX-?m=auto&node-id=19300-284023&t=3wW7gTxJ947tWixB-1

(Stopped here for now, I see the others still haven't been checked off, but I will still do a full review later this week.)

(The two other lone items checked off I confirmed as well ✅ )

[marcotuts]

Sidebar Controls

5 - [nit / very minor] The padding /spacing around the controls is a bit off relative to Figma, additional space around the controls as well as a left side border even when collapsed would help as well.

this first item looks closer now, but there's still less spacing on the top control than expected, here is the current vs figma below.

Current:

Figma:

6 - ✅ DONE --- [nit] The collapse sidebar icon differs from what I expected, is that also another Google Material icon? The icon in the figma file is a tad simpler, less detail and I think a better fit (looks like a text alignment / justification icon than the current sandbox icon)

7 - ✅ DONE -- [nit] The sidebar when collapsed should not have any of the tabs active, but currently the most recently used tab is shown as active. Even if we store / recall "the tab you had open most recently", we should not show the active styling on the tab when the sidebar is closed.

[marcotuts]

Info Sidebar

8 - ✅ DONE -- [nit / very minor] The header of the course outline page level sidebar has a partially broken header, we see the icon for the course level but not the course name.

Add Sidebar

9 - [nit / very minor] The elements in here need a bit more padding to separate them from the Add New / Add Existing tab elements.

Still open, showing the current vs figma below. Primarily, the left and right padding is too large in the current. Also the tabs are underneath the header but I think that's a separate item not specific to what I intended 9 for, I'll add that to the list somewhere else.

Current:

Figma:

10 - [nit] The box shadow feels like it might be 1 elevation level higher than expected but I wasn't entirely sure how to immediately convert the rem sizing into what is in Figma.

Visible in image above

11 - [question] I wasn't able to add a section to the outline this might be pending other tickets / open issues?

This is now mostly resolved, it works but the tooltip needs to be removed:

[MuPp3t33r]

I was considering opening a new issue but I think the context might fit into this issue report as well, something I noticed is the header dropdowns (Content, Settings, Tools) the menus display over the background content making it harder to read the menus, i'm guessing there's probably some kind of colour or opacity config that's wrong/missing but I wasn't able to figure it out myself. If you think this is better suited to it's own issue I can open a new one rather.
Tested on master branch: