Skip to content
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

AMP validation - add pointer tooltips for status columns #1448

Merged
merged 5 commits into from Sep 21, 2018

Conversation

Projects
None yet
3 participants
@johnwatkins0
Copy link
Contributor

johnwatkins0 commented Sep 20, 2018

This partially resolves #1400 by adding a tooltip to the headings of "Status" columns on AMP validation screens. It's not fully resolved because (1) we'll need to put in the final text, and (2) the styling and positioning of the tooltips could potentially use a little fine-tuning. Further, the tooltips could easily be created with the Tooltip component from the @wordpress/components package where Gutenberg-derived assets are available -- but I didn't go this route now because that tooltip looks much different from the one that had been decided on for this task.

Edit: Added the tooltip to the "Details" column as well. There's a little bit of conflicting information on this in the tickets/comps. It can easily be removed.

@johnwatkins0 johnwatkins0 changed the title AMP validation - add pointer tooltips for status columns [WIP] AMP validation - add pointer tooltips for status columns Sep 20, 2018

@johnwatkins0 johnwatkins0 referenced this pull request Sep 20, 2018

Open

Tooltips for Compatibility Tool #1400

1 of 4 tasks complete

@johnwatkins0 johnwatkins0 requested review from kienstra and westonruter Sep 20, 2018

@johnwatkins0 johnwatkins0 changed the title [WIP] AMP validation - add pointer tooltips for status columns AMP validation - add pointer tooltips for status columns Sep 20, 2018

@kienstra

This comment has been minimized.

Copy link
Collaborator

kienstra commented Sep 20, 2018

Thanks, @johnwatkins0! If it's alright, I'll defer to Weston for the code review.

AMP__VERSION
);
wp_enqueue_script(
'amp-validation-error-detail-toggle',
amp_get_asset_url( 'js/amp-validation-error-detail-toggle-compiled.js' ),
array(),
array( 'wp-dom-ready', 'amp-validation-tooltips' ),

This comment has been minimized.

Copy link
@kienstra

kienstra Sep 20, 2018

Collaborator

It looks like wp-dom-ready might only be available in Gutenberg (or at least it's merge).

This comment has been minimized.

Copy link
@westonruter

westonruter Sep 21, 2018

Member

It should not be made a script dependency. It is a module dependency.

Update tooltips to open on click instead of hover.
* Ensure tooltip is keyboard accessible.
* Fix importing of domReady module.
* Add escaping translation functions.
* Remove placeholder tooltip titles.
AMP__VERSION
);
wp_enqueue_script(
'amp-validation-error-detail-toggle',
amp_get_asset_url( 'js/amp-validation-error-detail-toggle-compiled.js' ),
array(),
array( 'wp-dom-ready', 'amp-validation-tooltips' ),

This comment has been minimized.

Copy link
@westonruter

westonruter Sep 21, 2018

Member

It should not be made a script dependency. It is a module dependency.


// WIP Pointer function
function sourcesPointer() {
jQuery( '.tooltip' ).on( 'hover', function() {

This comment has been minimized.

Copy link
@westonruter

westonruter Sep 21, 2018

Member

I don't think that hover works. The tooltip really needs to not get in the way. It's too easy to trigger it. The problem could be solved if we switch to showing the tooltip on click rather than on hover. This would also make it keyboard accessible.

AMP_Validation_Error_Taxonomy::ERROR_STATUS => sprintf(
'%s<div class="tooltip dashicons dashicons-editor-help"><h3>%s</h3><p>%s</p></div>',
esc_html__( 'Status', 'amp' ),
__( 'Statuses tooltip title', 'amp' ),

This comment has been minimized.

Copy link
@westonruter

westonruter Sep 21, 2018

Member

Placeholder title?

Should be using esc_html__().

'%s<div class="tooltip dashicons dashicons-editor-help"><h3>%s</h3><p>%s</p></div>',
esc_html__( 'Status', 'amp' ),
__( 'Statuses tooltip title', 'amp' ),
__( 'An accepted validation error is one that will not block a URL from being served as AMP; the validation error will be sanitized, normally resulting in the offending markup being stripped from the response to ensure AMP validity.', 'amp' )

This comment has been minimized.

Copy link
@westonruter

westonruter Sep 21, 2018

Member

Should be using esc_html__().

'%s<div class="tooltip dashicons dashicons-editor-help"><h3>%s</h3><p>%s</p></div>',
__( 'Status', 'amp' ),
__( 'Statuses tooltip title', 'amp' ),
__( 'An accepted validation error is one that will not block a URL from being served as AMP; the validation error will be sanitized, normally resulting in the offending markup being stripped from the response to ensure AMP validity.', 'amp' )

This comment has been minimized.

Copy link
@westonruter

westonruter Sep 21, 2018

Member

Should be using esc_html__().

'%s<div class="tooltip dashicons dashicons-editor-help"><h3>%s</h3><p>%s</p></div>',
__( 'Details', 'amp' ),
__( 'Details tooltip title', 'amp' ),
__( 'An accepted validation error is one that will not block a URL from being served as AMP; the validation error will be sanitized, normally resulting in the offending markup being stripped from the response to ensure AMP validity.', 'amp' )

This comment has been minimized.

Copy link
@westonruter

westonruter Sep 21, 2018

Member

Should be using esc_html__().

@@ -702,7 +700,12 @@ public static function add_post_columns( $columns ) {
$columns = array_merge(
$columns,
array(
AMP_Validation_Error_Taxonomy::ERROR_STATUS => sprintf( '%s<span class="dashicons dashicons-editor-help"></span>', esc_html__( 'Status', 'amp' ) ), // @todo Create actual tooltip.
AMP_Validation_Error_Taxonomy::ERROR_STATUS => sprintf(
'%s<div class="tooltip dashicons dashicons-editor-help"><h3>%s</h3><p>%s</p></div>',

This comment has been minimized.

Copy link
@westonruter

westonruter Sep 21, 2018

Member

The div needs tabindex=0 so that it can be focused with the keyboard.

}

.wp-pointer--tooltip {
transform: translateX(-52px);

This comment has been minimized.

Copy link
@westonruter

westonruter Sep 21, 2018

Member

This transform seems to be causing jumpiness.

@westonruter westonruter merged commit 4c00595 into develop Sep 21, 2018

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

@westonruter westonruter deleted the add/1400-tooltips branch Sep 21, 2018

@westonruter westonruter added this to the v1.0 milestone Sep 21, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.