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

Change icons from divs to spans #1857

Merged
merged 9 commits into from
Feb 9, 2024
Merged

Conversation

likimmy
Copy link
Contributor

@likimmy likimmy commented Feb 5, 2024

To address the first issue in this techops, the icons for answers-search-ui should be wrapped in spans, not divs.

@coveralls
Copy link

coveralls commented Feb 5, 2024

Coverage Status

coverage: 62.02%. remained the same
when pulling 0f6f0bb on dev/make-icons-spans
into ff87d8b on hotfix/v1.16.6.

Copy link
Contributor

@nmanu1 nmanu1 left a comment

Choose a reason for hiding this comment

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

just to double check, does all the styling in the test site and acceptance test pages look the same after this change? divs and spans are sometimes styled differently

also, it's probably not a big deal, but we may want to call this change out in the release documentation because any changes to the DOM like this could technically break the styling of an existing implementation if they specifically targeted divs that we're changing to spans

@benmcginnis
Copy link
Member

just to double check, does all the styling in the test site and acceptance test pages look the same after this change? divs and spans are sometimes styled differently

also, it's probably not a big deal, but we may want to call this change out in the release documentation because any changes to the DOM like this could technically break the styling of an existing implementation if they specifically targeted divs that we're changing to spans

The Icon class adds a display: inline-block; to the element it's added to so this shouldn't change anything.

@benmcginnis
Copy link
Member

How do we do the callout in the release documentation, Nidhi?

@nmanu1
Copy link
Contributor

nmanu1 commented Feb 7, 2024

How do we do the callout in the release documentation, Nidhi?

On our side, this would just mean adding an extra note in our GH release notes explaining possible ramifications of the change. But, it would be up to Baigel if he wants it to be documented more widely, such as in a HH post. The likelihood of this breaking someone's styling is small, but technically possible, so I'm not sure how cautious we want to be about it.

As it is right now, if we release this change in a hotfix, all users on v1.16 will get the change automatically without any action on their part (since most implementations pin to a minor version rather than a patch). This could technically mean that styling may suddenly change for them with no action on their part. If we're worried about this possibility, it may be better to release this in a new minor version so implementations wouldn't get the change without deliberately upgrading. If not, then it's probably fine as is

Copy link
Contributor

@nmanu1 nmanu1 left a comment

Choose a reason for hiding this comment

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

for this techops, would we need to address all instances of divs being used within a button anywhere in answers-search-ui and the HH theme? or did they specifically only care about answers-search-ui icons?

@likimmy
Copy link
Contributor Author

likimmy commented Feb 7, 2024

for this techops, would we need to address all instances of divs being used within a button anywhere in answers-search-ui and the HH theme? or did they specifically only care about answers-search-ui icons?

I'm honestly not sure, I was going off of a code link that was included in the techops that was from answers-search-ui. I'm assuming they only care about the icons from that sdk since they didn't link any other relevant code.

@benmcginnis
Copy link
Member

for this techops, would we need to address all instances of divs being used within a button anywhere in answers-search-ui and the HH theme? or did they specifically only care about answers-search-ui icons?

I'm honestly not sure, I was going off of a code link that was included in the techops that was from answers-search-ui. I'm assuming they only care about the icons from that sdk since they didn't link any other relevant code.

I think what's called out in the techops is specifically riven by the the icon component

@likimmy
Copy link
Contributor Author

likimmy commented Feb 9, 2024

to-do item address voiceSearchIcon here

src/ui/sass/modules/_SearchBar.scss Outdated Show resolved Hide resolved
src/ui/templates/icons/voiceSearchIcon.hbs Outdated Show resolved Hide resolved
@nmanu1
Copy link
Contributor

nmanu1 commented Feb 9, 2024

to-do item address voiceSearchIcon here

can we update this item to also include looking into any other usages of a div within a button? if this is not valid html, then we'll want to address all of them

@likimmy likimmy merged commit 2d3c39e into hotfix/v1.16.6 Feb 9, 2024
12 of 14 checks passed
@likimmy likimmy deleted the dev/make-icons-spans branch February 9, 2024 18:07
This was referenced Feb 9, 2024
likimmy added a commit that referenced this pull request Feb 9, 2024
### Fixes
- Address and resolve vulnerabilities (#1855)
- Change search bar icons used within button component from divs to spans (#1857)
nmanu1 added a commit that referenced this pull request Feb 13, 2024
This reverts commit 2d3c39e because it causes some visual regressions in the HH theme. The HH Theme has styling that targets spans directly and changing the icon elements from divs to spans caused the icons to be inadverdently targeted by that styling.
@nmanu1 nmanu1 mentioned this pull request Feb 13, 2024
nmanu1 added a commit that referenced this pull request Feb 13, 2024
### Fixes
- Revert change to icons (#1857) made in v1.16.6
nmanu1 added a commit that referenced this pull request Feb 20, 2024
This reverts commit 67b32df to add back the changes in #1857 now that we have the accompanying HH Theme changes ready to release.
@nmanu1 nmanu1 mentioned this pull request Feb 20, 2024
nmanu1 added a commit that referenced this pull request Feb 20, 2024
### Fixes
- Change search bar icons used within button component from `div`s to `span`s (#1857).
  - Note, any styling that is applied by targeting `div`s or `span`s directly may be impacted by this change. This could result in previously applied styles no longer being applied to these icons, or other styles inadvertently being applied to the icons
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.

5 participants