Closed sarinapadilla closed 2 months ago
Approach: My thought here is that we should create two new display table components.
One will display a required class name, and display an optional value, an optional example, or both. This would be used for border
, border-radius
, and border-width
tables, similar to USWDS.
The other will display color chips preceding the displayed class name as examples of the border colors, as well as an optional color value (like gray-5
) and required hex value. This would be used for the border color
table, showing an example color chip as well as the color value and hex value of the token. Once again, can reference USWDS for look and feel of the table columns.
@dlescarbeau can you please add a note of which utility modules should be added to this page, and which table would be used. Like, be VERY clear about what you are going to do here. e.g., "I could maybe see us abstracting the TextDemonstration table component" is not telling me what you want for that. Also for the "tables" please provide example json.
P.S. Please do not update TextDemonstration to not do something that is not text. Maybe it could share with margin and padding though?
Tasks:
class="usa-grid-col utility-example-class"
class="usa-grid-col utility-example-value"
class="usa-grid-col utility-example"
color_chip
color_chip
should display as it does on the Color utility page, for the bg color.const backgroundColor = utilityClass.class_name?.includes('bg') || false;
stuff.background_color
to output 2 divs like USWDS does.border
as a utility_module_display_params.additional_example_classes
class.border
, border-radius
, border-color
, border-style
, and border-width
utilities from utility-modules.json
utility_module_display_params.additional_example_classes
should include square-8
and bg-base-lightest
utility_module_display_params.additional_example_classes
should include height-8
, width-15
and bg-secondary-light
utility_module_display_params.additional_example_classes
should include square-8
, bg-base-lightest
, and border
.border
in the class nameutility_module_display_params.additional_example_classes
should include border
, square-8
and bg-base-lightest
This ticket should come before Height/Width, Circle, Outline.
Request Description
This change request is update the Border page on the NCIDS from only having basic information about border tokens to using our Utility page template.
What's the expected change?
What's the current functionality?
Related Tickets