Admin Reskin: Primary disabled button should have visible border

[wildworks]

This is the primary variation, and disabled buttons have no visual border, making it difficult to tell that they're buttons.

One way to check for this problem:

1. Users > Add User
2. Set a simple password
3. Make sure the "Add User" button has no border

[wildworks]

Comparison of WordPress 7.0 and 6.9. Primary, Primary disabled, Secondary, and Secondary disabled.

Trac ticket: https://core.trac.wordpress.org/ticket/64797

• Have used the same border color which is used for secondary button disabled border color.
• Compared to 6.9, both primary and secondary disabled color uses the same border color.

## Use of AI Tools

• None

[wildworks]

To be safe, it's a good idea to check all button variations.

Below is the code to add a menu page to test as many variations as possible.

function test_add_button_variations() {
        add_menu_page(
                'Button Variations',
                'Button Variations',
                'manage_options',
                'test-button-variations',
                'test_render_button_variations_page',
                'dashicons-editor-table',
                61
        );
}
add_action( 'admin_menu', 'test_add_button_variations' );

function test_render_button_variations_page() {
        $variations = array(
                'button button-primary'                  => 'Primary',
                'button button-primary button-compact'   => 'Primary Compact',
                'button button-primary button-small'     => 'Primary Small',
                'button button-primary button-large'     => 'Primary Large',
                'button button-primary button-hero'      => 'Primary Hero',
                'button button-secondary'                => 'Secondary',
                'button button-secondary button-compact' => 'Secondary Compact',
                'button button-secondary button-small'   => 'Secondary Small',
                'button button-secondary button-large'   => 'Secondary Large',
                'button button-secondary button-hero'    => 'Secondary Hero',
                'button-link'                            => 'Link',
                'button-link button-link-delete'         => 'Link Delete',
        );
        $background_colors = array(
                '#f0f0f1' => 'Default',
                '#ffffff' => 'White',
        );
        ?>
        <div class="wrap wp-core-ui">
                <?php foreach ( $background_colors as $background_color => $background_color_label ) : ?>
                        <div style="background-color: <?php echo esc_attr( $background_color ); ?>;">
                                <div style="display:flex;flex-wrap:wrap;gap:1em;align-items:flex-start;padding:3em;">
                                        <?php foreach ( $variations as $variation => $variation_label ) : ?>
                                                <button type="button" class="<?php echo esc_attr( $variation ); ?>">
                                                        <?php echo esc_html( $variation_label ); ?>
                                                </button>
                                        <?php endforeach; ?>
                                </div>
                                <div style="display:flex;flex-wrap:wrap;gap:1em;align-items:flex-start;padding:3em;">
                                        <?php foreach ( $variations as $variation => $variation_label ) : ?>
                                                <button type="button" class="<?php echo esc_attr( $variation ); ?>" disabled>
                                                        <?php echo esc_html( $variation_label ); ?> Disabled
                                                </button>
                                        <?php endforeach; ?>
                                </div>
                        </div>
                <?php endforeach; ?>
        </div>
        <?php
}

[wildworks]

Button variation

[ozgursar]

Patch Testing Report

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/11165

Environment

• WordPress: 7.0-beta2-61752-src
• PHP: 8.2.29
• Server: nginx/1.29.4
• Database: mysqli (Server: 8.4.7 / Client: mysqlnd 8.2.29)
• Browser: Opera
• OS: macOS
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None activated
• Plugins:
  • Code Snippets 3.9.5
  • Test Reports 1.2.1

Steps taken

1. Users > Add User
2. Enter simple password
3. Check disabled button styling. Confirm no border is visible.
4. Apply patch
5. Repeat steps 1-2 and check disabled Add user button again. Confirm border color: #dddddd
6. ✅ Patch is solving the problem

Expected result

• We expect a visible border for disabled buttons.

Screenshots/Screencast with results

Before patch (Add user)

After patch (Add user)

---

Before patch (All buttons)

After patch (All buttons)

[wildworks]

First, we'll need to consider how the primary/disabled button should be styled. If we follow ​this figma, the background color of the Primary/Disabled button should remain the brand color, but the text should be lighter.

cc @fabiankaegy @joedolson @joen

[Joen]

Thanks for the ping, thanks for the effort! Ultimately I'll defer to folks involved that are close to the metal, and understand the nuance.

One of the opportunities we have with this initiative, is to sync up, two-ways, with the effort that is going into what we also refer to as the WordPress Design System: all the components, tokens, and patterns created for the React componentry as documented in ​Storybook. In that sense, Storybook is the source of truth, as it represents the shipping code. For the moment, that means a disabled primary button maintains the brand color but ​has lighter text inside. The nuance there is that I believe @jameskoster and @mciampini is working on a new token system that will affect this. ​This PR was a half-step towards that, but it was reverted due to some side-effects with intent to return to it.

That means if we want to follow the path the design system is on, we can either go with the brand-color with reduced-opacity text inside to match what exists today, or we can go with the grayed background (and I believe dark text) where the design system is moving towards. Though note, in none of those situations does the primary button get a border.

[wildworks]

@Joen Thanks for the great feedback!

That means if we want to follow the path the design system is on, we can either go with the brand-color with reduced-opacity text inside to match what exists today, or we can go with the grayed background (and I believe dark text) where the design system is moving towards.

To align with the current design system, let's only reduce the opacity of the text.

@hbhalodia, can you update your PR based on this feedback?

[mciampini]

Design System current button variants

[mciampini]

Agree with Joen re. seeing this an opportunity for alignment with the in-progress work on the WordPress Design System that we're carrying out primarily in Gutenberg.

The current set of button variants (and their associated disabled states) can be seen at ​this Storybook page — I also just attached a screenshot for quick reference.

[ozgursar]

Primary button with brand color reduced opacity to 0.5

[ozgursar]

I think the issue here is with the light gray background of the admin page which cancels out the disabled status of the primary button.

It works well if the background is white. I'm not sure how it aligns with the Storyboard but reducing the opacity for example 0.5 might work.

[wildworks]

Design System current button variants

I was wrong. Based on this new design system, it seems that disabled primary buttons should have a gray background.

I think the issue here is with the light gray background of the admin page which cancels out the disabled status of the primary button.

I think this is the fundamental problem. Perhaps we should change the background color of the button from #f0f0f0 to #e2e2e2 according to the design system? That way it would be distinct from the dashboard background color #f0f0f1.

[hbhalodia]

Thanks @wildworks for the ping! I was not following the ticket and missed the discussions.

can you update your PR based on this feedback?

Yes, I will update the PR with current design system that we are moving forward with.

Can you please share the figma/storybook link to what we go with? Because the figma shared ​https://www.figma.com/design/804HN2REV2iap2ytjRQ055/WordPress-Design-System?node-id=13637-33748&t=3wObqi1ZIxSURKXN-0, does have same brand color.

While based on this image shared, Design System current button variants it have grayed background.

For now I am going with what is shared here in storybook - ​https://wordpress.github.io/gutenberg/?path=/story/design-system-components-button--all-tones-and-variants

Thanks,

[wildworks]

While based on this image shared, Design System current button variants it have grayed background.

Sorry for the confusion. I think this is correct.

[hbhalodia]

Hi @wildworks, I have updated the PR and added the colors in this commit -- ​https://github.com/WordPress/wordpress-develop/pull/11165/changes/73b3d089f7147a9e08c421e3cbf56e41d68db718,

Changes I did is updated the text color as well to match what currently in story book. I did it for both secondary and primary variants.

Let me know if we need to revert/update any change on the PR.

Thanks,

[wildworks]

In 61840:

Admin: Update button color to align with the design system.

Updates the disabled state colors for the primary and secondary buttons to align with the WordPress Design System.

Props hbhalodia, huzaifaalmesbah, Joen, mciampini, ozgursar, wildworks.
Fixes #64797.