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

Data attributes for option select button #3750

Merged
merged 1 commit into from
Dec 11, 2023
Merged

Conversation

andysellick
Copy link
Contributor

@andysellick andysellick commented Dec 5, 2023

What

  • modify the option select component to allow it to accept data attributes to be added to the expand/collapse button
  • the attributes are rendered on the parent element, then read in by JavaScript to be included in the JavaScript generated button, which replaces the title element of the component
  • to be used for GA4 tracking purposes in finder-frontend, in place of an existing solution
  • will be a breaking change, as removes the event listener that was previously being used for this
  • credit to @floehopper

Why

We're currently using a system of event and event listeners between finder-frontend and this component in order to track this button's expand/collapse action. This approach allows us to remove some JavaScript and move most of the heavy lifting to the backend, which should reduce load on the frontend.

This PR in finder-frontend is dependent on this change, and will need to be merged together: alphagov/finder-frontend#3224

Visual Changes

None.

Trello card: https://trello.com/c/OdYXlYqQ/673-finder-frontend-code-optimisations

@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3750 December 5, 2023 14:22 Inactive
andysellick added a commit to alphagov/finder-frontend that referenced this pull request Dec 6, 2023
- allow it to accept data attributes to be applied to the expand/collapse button
- will allow us to add GA4 tracking via a Rails/component approach and remove some JS
- likely to be a breaking change as will depend on some other stuff in a subsequent commit
- brings the component more in line with the option select component changes coming here: alphagov/govuk_publishing_components#3750
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3750 December 6, 2023 13:37 Inactive
@andysellick andysellick changed the title Data attributes for option select button [DO NOT MERGE] Data attributes for option select button Dec 6, 2023
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3750 December 6, 2023 13:38 Inactive
@andysellick andysellick marked this pull request as ready for review December 6, 2023 13:41
Copy link
Contributor

@AshGDS AshGDS left a comment

Choose a reason for hiding this comment

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

Looks good 👍

Do you think it's worth having a try/catch safeguard on the JavaScript in case the value doesn't come through as a JSON? E.g. passing button_data_attributes: "hello" crashes the JS. This is probably an incredibly rare scenario so don't worry about it if you think it's over engineering the code.

@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3750 December 6, 2023 14:12 Inactive
@andysellick
Copy link
Contributor Author

@AshGDS good shout, we do that everywhere else so we should do it here. Have pushed another commit if you've got time to take a look, will squash before merging.

AshGDS
AshGDS previously approved these changes Dec 6, 2023
Copy link
Contributor

@AshGDS AshGDS left a comment

Choose a reason for hiding this comment

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

Nice, thanks @andysellick 👍

@AshGDS AshGDS dismissed their stale review December 6, 2023 14:26

Whoops, didn't mean to approve if further changes are coming

@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3750 December 6, 2023 14:29 Inactive
@andysellick
Copy link
Contributor Author

@AshGDS I'm not intending adding further changes to this PR, so you can approve if you're happy. I'll roll this out as a breaking release and get it into alphagov/finder-frontend#3224

@andysellick andysellick force-pushed the option-select-button branch 2 times, most recently from 3d04ecd to 0ffde2c Compare December 7, 2023 13:59
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3750 December 7, 2023 13:59 Inactive
- modify the option select component to allow it to accept data attributes to be added to the expand/collapse button
- the attributes are rendered on the parent element, then read in by JavaScript to be included in the JavaScript generated button, which replaces the title element of the component
- to be used for GA4 tracking purposes in finder-frontend, in place of an existing solution
- will be a breaking change, as removes the event listener that was previously being used for this
- credit to @floehopper
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-3750 December 7, 2023 15:04 Inactive
@andysellick andysellick changed the title [DO NOT MERGE] Data attributes for option select button Data attributes for option select button Dec 11, 2023
@andysellick andysellick merged commit 550bfb2 into main Dec 11, 2023
10 checks passed
@andysellick andysellick deleted the option-select-button branch December 11, 2023 09:19
@andysellick andysellick mentioned this pull request Dec 11, 2023
@jon-kirwan jon-kirwan mentioned this pull request Dec 12, 2023
andysellick added a commit to alphagov/finder-frontend that referenced this pull request Dec 12, 2023
- allow it to accept data attributes to be applied to the expand/collapse button
- will allow us to add GA4 tracking via a Rails/component approach and remove some JS
- likely to be a breaking change as will depend on some other stuff in a subsequent commit
- brings the component more in line with the option select component changes coming here: alphagov/govuk_publishing_components#3750
andysellick added a commit to alphagov/finder-frontend that referenced this pull request Dec 12, 2023
- allow it to accept data attributes to be applied to the expand/collapse button
- will allow us to add GA4 tracking via a Rails/component approach and remove some JS
- likely to be a breaking change as will depend on some other stuff in a subsequent commit
- brings the component more in line with the option select component changes coming here: alphagov/govuk_publishing_components#3750
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants