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

Show helper text when supplied to survey component #3925

Merged
merged 3 commits into from
Aug 24, 2021
Merged

Conversation

tofumatt
Copy link
Collaborator

@tofumatt tofumatt commented Aug 23, 2021

Summary

Addresses issue #3762.

It turns out we had a subtitle in here but it was being hidden with an odd opacity: 0 rule. This removes it and makes sure the HelperText component isn't rendered if there isn't a subtitle prop.

Checklist

  • My code is tested and passes existing unit tests.
  • My code has an appropriate set of unit tests which all pass.
  • My code is backward-compatible with WordPress 4.7 and PHP 5.6.
  • My code follows the WordPress coding standards.
  • My code has proper inline documentation.
  • I have added a QA Brief on the issue linked above.
  • I have signed the Contributor License Agreement (see https://cla.developers.google.com/).

@google-cla google-cla bot added the cla: yes label Aug 23, 2021
@tofumatt tofumatt changed the title fix-3762 Show helper text when supplied to survey component Aug 23, 2021
@github-actions
Copy link

github-actions bot commented Aug 23, 2021

Size Change: +236 B (0%)

Total Size: 1.11 MB

Filename Size Change
./dist/assets/js/googlesitekit-activation.********************.js 38.1 kB +19 B (0%)
./dist/assets/js/googlesitekit-adminbar.********************.js 30.5 kB +19 B (0%)
./dist/assets/js/googlesitekit-dashboard-details.********************.js 43.9 kB +21 B (0%)
./dist/assets/js/googlesitekit-dashboard-splash.********************.js 51.9 kB +23 B (0%)
./dist/assets/js/googlesitekit-dashboard.********************.js 44.2 kB +20 B (0%)
./dist/assets/js/googlesitekit-idea-hub-post-list.********************.js 23.7 kB +21 B (0%)
./dist/assets/js/googlesitekit-module.********************.js 44 kB +21 B (0%)
./dist/assets/js/googlesitekit-modules-tagmanager.********************.js 30 kB +32 B (0%)
./dist/assets/js/googlesitekit-settings.********************.js 48.3 kB +20 B (0%)
./dist/assets/js/googlesitekit-user-input.********************.js 45.2 kB +19 B (0%)
./dist/assets/js/googlesitekit-wp-dashboard.********************.js 32.5 kB +21 B (0%)
ℹ️ View Unchanged
Filename Size
./dist/assets/css/admin.css 38.4 kB
./dist/assets/css/adminbar.css 7.95 kB
./dist/assets/css/wpdashboard.css 4.55 kB
./dist/assets/js/analytics-advanced-tracking.js 769 B
./dist/assets/js/googlesitekit-api.********************.js 9.14 kB
./dist/assets/js/googlesitekit-base.********************.js 1.59 kB
./dist/assets/js/googlesitekit-data.********************.js 1.65 kB
./dist/assets/js/googlesitekit-datastore-forms.********************.js 8.86 kB
./dist/assets/js/googlesitekit-datastore-location.********************.js 2.03 kB
./dist/assets/js/googlesitekit-datastore-site.********************.js 13.3 kB
./dist/assets/js/googlesitekit-datastore-ui.********************.js 8.83 kB
./dist/assets/js/googlesitekit-datastore-user.********************.js 20.9 kB
./dist/assets/js/googlesitekit-i18n.js 3.92 kB
./dist/assets/js/googlesitekit-idea-hub-notice.********************.js 2.4 kB
./dist/assets/js/googlesitekit-modules-adsense.********************.js 44.7 kB
./dist/assets/js/googlesitekit-modules-analytics-4.********************.js 19 kB
./dist/assets/js/googlesitekit-modules-analytics.********************.js 65.6 kB
./dist/assets/js/googlesitekit-modules-idea-hub.********************.js 23.6 kB
./dist/assets/js/googlesitekit-modules-optimize.********************.js 18.4 kB
./dist/assets/js/googlesitekit-modules-pagespeed-insights.********************.js 16.4 kB
./dist/assets/js/googlesitekit-modules-search-console.********************.js 28.5 kB
./dist/assets/js/googlesitekit-modules.********************.js 16.5 kB
./dist/assets/js/googlesitekit-vendor.********************.js 313 kB
./dist/assets/js/googlesitekit-widgets.********************.js 11.5 kB
./dist/assets/js/runtime.********************.js 763 B

compressed-size-action

Copy link
Collaborator

@aaemnnosttv aaemnnosttv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @tofumatt – we don't actually need to change any styles here (as these come from the component). Instead we're just missing a prop 😄

Comment on lines 64 to 66
.mdc-text-field-helper-text {
opacity: 1;
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This fixes the problem but not quite in the right place.

It turns out the helper text is designed to be conditionally shown and likely uses opacity to avoid a layout shift.

All we need to do is pass the persistent prop to HelperText to indicate that the text is to always be shown as the component is made to also support input validation.

See https://github.com/material-components/material-components-web-react/blob/master/packages/text-field/helper-text/README.md#props

You can also see this work on develop by toggling the prop in React devtools.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Huh, whoops, thanks! 👍🏻

Comment on lines 75 to 79
helperText={
subtitle ? (
<HelperText>{ subtitle }</HelperText>
) : undefined
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
helperText={
subtitle ? (
<HelperText>{ subtitle }</HelperText>
) : undefined
}
helperText={
subtitle ? (
<HelperText persistent>{ subtitle }</HelperText>
) : undefined
}

Copy link
Collaborator

@aaemnnosttv aaemnnosttv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great, thanks!

@aaemnnosttv aaemnnosttv merged commit 04d1762 into main Aug 24, 2021
@aaemnnosttv aaemnnosttv deleted the fix-3762 branch August 24, 2021 17:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants