Skip to content

Data Views: Add subtle styles to interface components #66486

@jarekmorawski

Description

@jarekmorawski

Hi there! Did we ever consider adding subtle styles to our components? In particular, I'm thinking about dropdowns and input fields. The default styling works well when the interface's primary purpose is to edit data.

However, there are situations where a subtler style could be useful. The primary use case is inline editing in a Data View table or a large form where the user's primary goal is to review the information and edit individual fields rather than whole sections.

A real-world use cases for subtler styles include the product variations list in WooCommerce or a field mapping table in a WordPress plugin I'm working on. Users who interact with these elements are primarily interested in reviewing the information. Displaying it in the editable state adds visual weight that may drive them away from the page.

Image

Components using the subtle style could act as interactive elements in a readOnly mode, with a highlight shown on hover. When clicked, the elements would transform into editable fields, like inputs and dropdowns.

subtle.mov

There are existing implementations of such components in the Atlassian Design System, Greenhouse, and other design systems that require a high degree of accessibility.

Here's an example from Atlassian's design system:

atlassianexample.mov

Is there a way to introduce something similar to the new wp-admin controls? If so, what needs to be done to ensure accessibility?

Metadata

Metadata

Assignees

No one assigned
    No fields configured for Enhancement.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions