Pages built with wp-build gave a small border next to "navigation triangle"

[simison]

Description

When pages in WP Admin are built using the new wp-build package, they get a new kind of "frame", for example Fonts page:

There is a small border that looks off:

I would expect the white triangle continue seamlessly to the white contents.

The same happens when building custom pages using plugins:

The border is present with boot-layout__stage so it doesn't require/come from the new admin-ui Page component.

I'd expect something like this instead:

Step-by-step reproduction instructions

Just open Appearance → Fonts.

Screenshots, screen recording, code snippet

No response

Environment info

Gutenberg trunk as of Jan 27th.

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[simison]

Something like this in the browser console gets it closer, but might still need tweaking:

ul#adminmenu a.wp-has-current-submenu::after, 
ul#adminmenu > li.current > a.current::after {
   /* Moves the white triangle over the border. */
    margin-right: -1px;
}

ul#adminmenu a.wp-has-current-submenu:after, 
ul#adminmenu > li.current > a.current:after {
   /* These were 8px, but moving made the arrow look smaller than before. */
    border: solid 9px transparent;
    margin-top: -9px;
}

[simison]

cc @jasmussen do you have advice on if my suggested triangle changes look good? :-)

[jasmussen]

Changes are probably fine to implement. Some aspects of this frame I feel, are still a little bit in flux, so I'm hesitant to overindex on the details of the arrow, it depends a bit on the perspective extending from this. That doesn't mean don't polish the triangle, just that I could see a lot of things changing in relation to this.

[SirLouen]

do you have advice on if my suggested triangle changes look good? :-)

Changes are probably fine to implement. Some aspects of this frame I feel, are still a little bit in flux, so I'm hesitant to overindex on the details of the arrow, it depends a bit on the perspective extending from this. That doesn't mean don't polish the triangle, just that I could see a lot of things changing in relation to this.

Moving the arrow to the right 1px, feels too hacky in my opinion. I'm not really sure why those new admin screens have the border. I have not noticed any visual advantage on such 1px border, so I would rather remove it. I've added the #75036 with some proposals but I would like to see what @youknowriad thinks about this because he has been mainly the one working on these screens.

[simison]

(edit missed @SirLouen 's comment above but we're basically suggesting the same)

I appreciate that the frame will change, but I'd like to help WP 7.0 look polished and the same for our usage of the frame in the plugin. :-)

Instead of touching the triangle, we could also remove the border for the WP build Stage + Inspector. It would not only solve the triangle border issue, but also look a bit cleaner overall? @jasmussen @jameskoster

With border

Without border

Border style here:

gutenberg/packages/boot/src/components/root/style.scss

Line 87 in 2a1b48f

border: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #ddd);

[simison]

Another related problem I saw that the Widgets area has a white arrow against a grey background, because it's using the mixin:

gutenberg/packages/edit-widgets/src/style.scss

Lines 18 to 21 in 2a1b48f

	body.js.appearance_page_gutenberg-widgets,
	body.js.widgets-php {
	@include wp-admin-reset( ".blocks-widgets-container" );
	}

gutenberg/packages/base-styles/_mixins.scss

Lines 489 to 492 in 2a1b48f

	ul#adminmenu a.wp-has-current-submenu::after,
	ul#adminmenu > li.current > a.current::after {
	border-right-color: colors.$white;
	}

I tested Menu section and post editor with the sidebar, and they both look good.

It might make sense to move the white-triangle style to the Boot package, and remove it from the admin reset mixin.

[SirLouen]

It might make sense to move the white-triangle style to the Boot package, and remove it from the admin reset mixin.

If I'm not wrong the write-trinagle style comes from Core. In the mixin they only add the background color of the triangle but ultimately it doesnt fix anything.