-
Notifications
You must be signed in to change notification settings - Fork 219
Update the incompatible gateways notice design #8365
Update the incompatible gateways notice design #8365
Conversation
The release ZIP for this PR is accessible via:
Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the TypeScript Errors Report
assets/js/editor-components/external-link-card/index.tsx
assets/js/icons/stories/index.tsx |
Size Change: +371 B (0%) Total Size: 1.1 MB
ℹ️ View Unchanged
|
@@ -85,7 +85,7 @@ export function IncompatiblePaymentGatewaysNotice( { | |||
key={ id } | |||
className="wc-blocks-incompatible-extensions-notice__element" | |||
> | |||
{ title } | |||
• { title } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Shouldn't we use list styling instead of a dot? don't feel like you need to change this, just asking.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
By changing the display from the default display: list-item
to flex
, some properties of lists are lost (e.g., list-style-type
). But, we can use the before
CSS property instead! 🙌 I pushed the changes
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Checks out!
We made an API and some design changes:
Alert
component's API. We added the possibility to set astatus
Fixes #8238
Accessibility
prefers-reduced-motion
Other Checks
Screenshots
Testing
Automated Tests
User Facing Testing
Checkout
BlockCheckout
Block. You should see a notice with the list of incompatible gateways in the right sidebar of the editor (i.e.,Settings -> Block
). Ensure the notice's icon has a yellow color, and the list of gateways has bullet points (see image below):WooCommerce Visibility
Performance Impact
Changelog