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

Cleanup popover arrows #28008

Merged
merged 4 commits into from
Jan 14, 2019
Merged

Cleanup popover arrows #28008

merged 4 commits into from
Jan 14, 2019

Conversation

MartijnCuppens
Copy link
Member

I moved and copied the .arrow's pseudos shared border-width: to the pseudo elements themselves. This will generate 4 more properties (oh no 😱), but will remove 16 selectors of which 8 attribute selectors (woohoo! 🎉). As you can see, this made my day.

I've also nested the pseudo's in the scss.

@MartijnCuppens MartijnCuppens requested a review from a team as a code owner January 8, 2019 21:08
@mdo
Copy link
Member

mdo commented Jan 9, 2019

Would we want to wait on this for v5 since this breaks anything for folks who've customized Bootstrap's default popover template? I don't know how worth it is to do now for v4.3 knowing it could be funky for folks. At the very least, it changes where the arrows are generated and folks who remove them via CSS would have a breaking change for their upgrade path.

@mdo
Copy link
Member

mdo commented Jan 9, 2019

Also, whenever we do want this to land, we can probably modify the JS to update that template to remove the extraneous <div>.

@ysds
Copy link
Member

ysds commented Jan 9, 2019

@mdo Don't worry:wink: The CSS diffs are very simple. I don't think this will cause a breaking change.

- .bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before,
- .bs-popover-top > .arrow::after,
- .bs-popover-auto[x-placement^="top"] > .arrow::after {
-   border-width: 0.5rem 0.5rem 0;
- }

  .bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before {
    bottom: 0;
+   border-width: 0.5rem 0.5rem 0;
    border-top-color: rgba(0, 0, 0, 0.25);
  }

  .bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after {
    bottom: 1px;
+   border-width: 0.5rem 0.5rem 0;
    border-top-color: #fff;
  }

x 4 directions

@Johann-S
Copy link
Member

Johann-S commented Jan 9, 2019

it was my CSS sorry 😟
@MartijnCuppens know very well my current level of CSS 😆

@MartijnCuppens
Copy link
Member Author

Hehe no problem, I got your back @Johann-S 😉

@mdo mdo merged commit d546cb8 into v4-dev Jan 14, 2019
@mdo mdo deleted the v4-dev-martijncuppens-popover-arrows branch January 14, 2019 00:29
@mdo mdo mentioned this pull request Jan 14, 2019
bkdotcom added a commit to bkdotcom/bootstrap that referenced this pull request Jan 16, 2019
* v4-dev: (34 commits)
  tests: use jQuery from node_modules. (twbs#28059)
  Fix `js-main` script. (twbs#28057)
  Make progress animation respect `$enable-transitions` and `prefers-reduced-motion` media query
  Examples: add tabindex="-1" and aria-disabled="true" on disabled links
  Clean up .gitignore. (twbs#28050)
  Fix Carousel's touch option to not add touch listeners when set to false (twbs#28046)
  Remove map-merge (twbs#28033)
  Cleanup popover arrows (twbs#28008)
  Sync dropdown font size to base font size
  Sync dropdown font size with btn font size
  Remove background from nested tables
  Add some margin below the buttons
  Fix background size y
  Minify background property
  Combine background properties into one
  Prevent useless property rendering
  Don't render a background by default
  Prevent rendering of color property by default
  Change comment heading title to `Typography` (twbs#28032)
  Align toast variables (twbs#28041)
  ...

# Conflicts:
#	package.json
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.

5 participants