727654ff3b
* Add first pass + demo of updated SummaryNumber * Add new larger screen breakpoint * Remove the max-width from the content wrapper * Update previous label text * Fix the border colors/sizing * Create a mixin to generate the grid template pattern * Add green/red colors based on trend, with prop to reverse In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green * Move selected number containers up to avoid the double-border * Document className logic, and apply 10-item layout to all cases of 10+ items * Remove layout notes * Update component docs, clean up optional displays * Update style of SummaryNumbers inside cards * Filter out any `false` or otherwise unrenderable children * Fix card borders * Update dashboard component to use new props * Check that prevValue is defined a prevValue of 0 was incorrectly outputting `0` for both label and value * Update no-change datapoint style * Update default data values Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders * Change SummaryList & SummaryNumber to a list of links Add active, hover, and focus styles * Add a short help text for screen reader users * Add href to README * Add the href prop to the readme example * Fix border colors The `nth-of-type` rules need to be on the `li` containers * Fix font-weights on value & delta * Wrap the previous label/value when the percentage wraps |
||
|---|---|---|
| .. | ||
| README.md | ||
| _breakpoints.scss | ||
| _colors.scss | ||
| _mixins.scss | ||
| _variables.scss | ||
| _wpadmin-reset.scss | ||
README.md
CSS
Naming: Component classes
To avoid class name collisions between elements of the woo app and to the enclosing WordPress dashboard, class names must adhere to the following guidelines:
Any default export of a folder's index.js must be prefixed with woocommerce- followed by the directory name in which it resides:
.woocommerce-[ directory name ]
(Example: .woocommerce-card from components/card/index.js)
For any descendant of the top-level (index.js) element, prefix using the top-level element's class name separated by two underscores:
.woocommerce-[ directory name ]__[ descendant description ]
(Example: .woocommerce-card__title, or .woocommerce-ellipsis-menu__item)
For optional variations of an element or its descendants, you may use a modifier class, but you must not apply styles to the modifier class directly; only as an additional selector to the element to which the modifier applies:
.woocommerce-[ directory name ].is-[ modifier description ] .woocommerce-[ directory name ]__[ descendant description ].is-[ modifier description ]
(Example: .woocommerce-ellipsis-menu__item.is-active )
In all of the above cases, except in separating the top-level element from its descendants, you must use dash delimiters when expressing multiple terms of a name. You can use .is-* or .has-* to describe element states.
You may observe that these conventions adhere closely to the BEM (Blocks, Elements, Modifiers) CSS methodology, with minor adjustments to the application of modifiers.
Naming: Layout classes
All layout classes use the .woocommerce-layout__ prefix:
.woocommerce-layout__[ section ]
(Example: .woocommerce-layout__activity-panel )
If the section has children elements, prefix a description with the section class name:
.woocommerce-layout__[ section ]-[ descendant description ]
(Example: .woocommerce-layout__activity-panel-title )
Naming: Dashboard classes
All dashboard components use the .woocommerce-dashboard__ prefix:
.woocommerce-dashboard__[ section ]
(Example: .woocommerce-dashboard__widget )
Naming: Analytics classes
All analytics components use the .woocommerce-analytics__ prefix.