-
Notifications
You must be signed in to change notification settings - Fork 286
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add the Full Width Error Banner (Storybook) #8230
Comments
IB ✅ |
Enhance/#8230 - Add the Full Width Error Banner
QA Update ❌Tested on Storybook and documented my issues below: ITEM 1: ITEM 2:
ITEM 3:
ITEM 4: If you look at the current implementation, the overall button size is (33.75+16+16) x (8+24+8) = 65.75 x 40px ITEM 5: ITEM 6: |
Thanks for raising the issues, @kelvinballoo. I've addressed most of the observations in the follow-up PR. Please note that the Figma designs can be a bit out of alignment with the actual plugin implementation. You can see examples in the plugin. We should keep it consistent with the existing styles.
Fixed ✅
Fixed ✅
Fixed ✅
Figma design can be a bit out of alignment with the actual plugin implementation. We should keep it consistent with the existing styles. The current implementation of the button aligns with the existing styles.
Fixed ✅
Fixed ✅ |
@techanvil, back to you to review the follow-up PR. Thanks! |
Enhance - #8230 - Add the Full Width Error Banner (follow-up)
Thanks @hussain-t! Back to you for another pass, @kelvinballoo. |
QA Update
|
Hi @kelvinballoo,
I have addressed this issue in a new follow-up PR. I've also fixed the spacing for the tablet viewport. @techanvil, back to you for another review. |
…w-up Enhance/#8230 - Add the Full Width Error Banner (follow-up)
Thanks @hussain-t, that's merged 👍 Back to you @kelvinballoo! |
Feature Description
Create the Full Width Error Banner component and add it toStorybook.
See full width error banner in the design doc.
Do not alter or remove anything below. The following sections will be managed by moderators only.
Acceptance criteria
Implementation Brief
In the
assets/js/modules/analytics-4/components/dashboard/AudienceSegmentation
directory:AudienceSegmentationErrorWidget.js
, for the Full Width Error Banner component.AudienceSegmentationSetupCTAWidget
component.Widget
component and add thenoPadding
prop to it to layout the SVG graphics.Widget
component, useGrid->Row->Cell
to arrange the error notice and buttons.h3
element for the error notice.isInsufficientPermissionsError
helper function and render theInsufficient permissions
copy.Your visitor groups data loading failed
copy.ReportErrorActions
component with the following props, which will render the error variant-specific buttons appropriately (SeeMetricTileWrapper
) :moduleSlug
- pass theanalytics-4
module slug.error
- pass the errors.hideRetryHelpLink
- a boolean prop to hide theGet help
link if the error is not a permissions error.GetHelpLink
- Create a newGetHelpLink
component that renders theContact your administrator. Trouble getting access?
copy and theGet help
link. It should be similar to theassets/js/components/KeyMetrics/GetHelpLink.js
component.getHelpClassName
- custom class name for theGet help
link.In
assets/js/components/ReportErrorActions.js
:hideRetryHelpLink
.Retry
get help link ifhideRetryHelpLink
is falsy. See:site-kit-wp/assets/js/components/ReportErrorActions.js
Lines 130 to 148 in 7911c0a
Test Coverage
AudienceSegmentationErrorWidget
component.AudienceSegmentationErrorWidget
component, particularly around the retry logic and different conditions for rendering different sets of copy.QA Brief
Changelog entry
The text was updated successfully, but these errors were encountered: