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

Add dropright and dropleft (right and left placements for our dropdown) #23860

Merged
merged 3 commits into from
Oct 29, 2017

Conversation

Johann-S
Copy link
Member

@Johann-S Johann-S commented Sep 7, 2017

image

  • documentation

Related to this issue : #22962

@XhmikosR
Copy link
Member

XhmikosR commented Sep 7, 2017

How does this behave when the screen is small and the output wouldn't fit?

@Johann-S
Copy link
Member Author

Johann-S commented Sep 7, 2017

that's handle by Popper.js, so Popper.js will find an other place with enough space

@Johann-S
Copy link
Member Author

Johann-S commented Sep 7, 2017

if you want to play a bit with this feature : https://codepen.io/Johann-S/pen/LjoKvg

Edit :
/CC @andresgalante if you have feedbacks about my CSS 😄

@andresgalante
Copy link
Collaborator

andresgalante commented Sep 7, 2017

Hi @Johann-S I just build your branch and the CSS looks great. I am not getting the same results though, the dropmenu doesn't open on the right like your codepen example:

screen shot 2017-09-07 at 9 45 59 am
screen shot 2017-09-07 at 9 45 54 am

Since we are adding drop right, should we consider adding a drop left to?

I know that we call it dropdown for backwards compatibility but maybe we can consider changing the name to dropmenu for future versions.

Also, I am a huge 👍 on adding dropleft and right, we did have a usecase of drop right and we ended up building ourselves. Thanks a lot for adding it!

@Johann-S
Copy link
Member Author

Johann-S commented Sep 7, 2017

And with my Codepen ? Did you get the same result ?
It's possible it's due to a small viewport and the position of our Dropdown are handled by Popper.js

Yes, dropleft will be added later 👍

@andresgalante
Copy link
Collaborator

andresgalante commented Sep 7, 2017

The codepen looks as it should
screen shot 2017-09-07 at 9 58 25 am

I am on a mac, Chrome 60. I'll build a standalone instance based on your branch later today and test it in different browsers.

@Johann-S
Copy link
Member Author

Johann-S commented Sep 7, 2017

I don't know why you get that on your fork but in my codepen I built our dist files and that's all 😄 but you must be sure you built our JS files too

@andresgalante
Copy link
Collaborator

@Johann-S sorry :p I forgot to build the js. Rookie mistake, my bad
👍 It works great now!


.dropdown-toggle {
&::after {
vertical-align: 0;

Choose a reason for hiding this comment

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

Properties should be ordered border-bottom, border-left, border-top, vertical-align

@@ -22,6 +22,22 @@
}
}

.dropright {
.dropdown-menu {
margin-top: -1px;

Choose a reason for hiding this comment

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

Properties should be ordered margin-left, margin-top

Copy link
Member Author

Choose a reason for hiding this comment

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

And stylelint said to me the opposite :
image

/CC @XhmikosR

@Johann-S Johann-S force-pushed the dropright branch 4 times, most recently from 3cba14e to 550f5c5 Compare October 4, 2017 08:56
@mdo
Copy link
Member

mdo commented Oct 17, 2017

What about .dropleft? 😆

@twbs twbs deleted a comment from Johann-S Oct 17, 2017
@Johann-S
Copy link
Member Author

Yep why not 😄 but I wasn't sure if you'll accept this feature @mdo 👍

@Johann-S
Copy link
Member Author

I added .dropleft you can see it here : https://codepen.io/Johann-S/pen/LjoKvg

image

but for me the arrow should be on the left

@Johann-S Johann-S changed the title Add dropright (right placement for our dropdown) Add dropright and dropleft (right and left placements for our dropdown) Oct 18, 2017
@andresgalante
Copy link
Collaborator

andresgalante commented Oct 18, 2017

Hi @Johann-S I've moved the dropleft arrow to the left and updated the docs 😄

screen shot 2017-10-18 at 10 54 09 am

@Johann-S
Copy link
Member Author

Oh nice thank you very much @andresgalante 👍

@Johann-S
Copy link
Member Author

before my last commit if folks did a .btn-group with a dropdown inside by default they will see a down arrow but that was leading us to some issues with .dropleft (by default we had ::after and ::before so two arrows)

that's why now they will have to specify which one they want to use (dropdown, dropup, dropleft, dropright)

@mdo mdo merged commit e454c8e into v4-dev Oct 29, 2017
@mdo mdo deleted the dropright branch October 29, 2017 22:29
@mdo mdo mentioned this pull request Oct 29, 2017
gijsbotje added a commit to gijsbotje/bootstrap that referenced this pull request Dec 30, 2017
* append btn-* and input-* variables and extends their from input-btn-* variables

* Update _variables.scss

* edit code comments

* dist

* Add unit tests for util.js

* update new focus and shadow properties to use vars

* dist

* dist

* dist

* Add `table-row` in documentation (twbs#24551)

* form y space in doc

* Dropdown handle keydown on input and textarea.

* Fix unit tests.

* fixes twbs#24574

* dist

* Revamp docs About section (twbs#24589)

- Drops the Team page for privacy and accuracy. I don't want to pressure folks into feeling committed to the project through a page like this, and it also doesn't allow folks any privacy option (as you can hide org membership on your GitHub profile).
- Moves the History page into an Overview page, which includes an updated history page and a quick team blurb at the top.
- Added redirects to the new Overview page from Team and History

* Add fallback border-radius to .btn (twbs#24505)

Fixes twbs#24503 by manually calling the border-radius instead of using the mixin.

* Remove invalid bower.json (twbs#24584) (twbs#24590)

* Add information about the fact we do not use Popper.js for Dropdown c… (twbs#24571)

* Add information about the fact we do not use Popper.js for Dropdown contained in navbars

* Update dropdowns.md

* Update dropdowns.md

* Remove the now unused _data/core-team.yml and the relevant scss. (twbs#24593)

* dist

* Add `.modal-dialog-centered` for optional vertically centered modal (twbs#24510)

* Add .modal-dialog-centered for optional vertically cenetered modal

Fixes twbs#23638

* adds modal-dialog-centered class to docs and removes margin to avoid generating a vertical scrolling

* mention limitations

* fix aria attr

* Add `width: 100%` to the .modal-content for the centered version. Adding it here to avoid adding another selector by limiting it to the centered modal modifier.

* Add dropright and dropleft (right and left placements for our dropdown) (twbs#23860)

* Add dropright (right placement for our dropdown)

* Add dropleft

* moves drop left arrow to the left

* Throw error about Popper.js only when it's needed because some of our plugins don't use it (twbs#24573)

* tweak spacing

* nuke container class for consistency while we're here

* dist

* Clean up package.json scripts. (twbs#24583)

* rename build/htmllint.js to build/vnu-jar.js
* remove the unused `bash` script
* split the `docs-lint` scripts
* fix watch-js script to run only the parent `js-compile` script

* Do not create a Popper.js instance when we don't need it

* Explain contents of bundled JS files in docs (twbs#23735)

* Fix bad title for our dispose method in our documentation

* Add missing trailing slashes to URLs in docs

* dist

* redesign these tables, fix headings, add intro paragraphs

* changes colors references on variables.scss from hardcoded to variables on the theme

* adds variables for the hr element margin

* Minor Markdown consistency cleanup. (twbs#24605)

* Update docsearch.js links (twbs#24613)

* Remove bower.json from _config.yml. (twbs#24609)

* build/*.js: es6ify. (twbs#24611)

* Add display utilities link in 'Utilities for layout' docs page (twbs#24615)

* Re-enable vnu-jar's warnings and suppress the ones we don't need now.

* vnu-jar.js: pass `-Xss512k` for 32-bit Java to avoid a StackOverflowError error.

* Remove the redundant `role=navigation` from `nav`s.

* Add comments to clarify why we ignore a couple of vnu's errors.

* "autocomplete" attribute errors
* "legend" is not allowed as child of "div"

* Remove invalid example of `title` attribute in an SVG and related vnu error suppression

* Remove `datetime-local` warning from vnu ignore list, change reboot example.

* Shorten ignores - add more comments.

* More wording tweaks

* Fix invalid `<nav ... role="tablist">` in docs.

* Fix broken footer link after the about page revamp. (twbs#24612)

* Update devDependencies and gems. (twbs#24610)

* Create CODE_OF_CONDUCT.md (twbs#24629)

* Convert modal's px units to rem (twbs#23782)

* Update our Webpack documentation for Webpack 3 (twbs#24656)

* Update Jekyll excludes to ignore more files.

* Add svg files in workbox and remove jpg.

* getting-started/introduction.md: move title below the retired meta tags.

* Highlight snippet as CSS.

* Remove a few extra newlines.

* Remove whitespace in SVG includes.

* Update package-lock.json. (twbs#24666)

* Minor Sass consistency changes. (twbs#24677)

* use `background-color` instead of the shorthand
* use `outline: 0` consistently
* fix transform order
* remove quotes from `SFMono-Regular`

* changes list-inline-padding from 5px to .5rem

* Convert px values to rem on tooltip variables (twbs#23468)

* converts px valures to rem on tooltip variables

* keep as px to match popover changes

* fixing label cutoff at 0% (twbs#24544)

* Restore .progress-bar transition (twbs#24694)

Unintentionally removed in twbs#22703. Fixes twbs#24643.

* fixes twbs#24553: override border-color on focus of custom select with form validation (twbs#24695)

* getting-started.md: Redirect from `/getting-started/` too. (twbs#24669)

* dist

* Move hardcoded opacity value in `.btn:disabled` to variable `$btn-disabled-opacity` (twbs#24680)

* Nav Tabs use single variable to style `$nav-tabs-link-hover-border-color` and `$nav-tabs-link-active-border-color` (twbs#24639)

* dist

* descriptive docs variable naming (twbs#24521)

* use descriptive docs btn naming

* rename `btn-bd-yellow` to `btn-bd-download`

* sort state vars

* sort state vars
  * info, warning, danger

* rename btn-bd-purple

* rename `.btn-bd-purple` to `.btn-bd-primary`

* align docs color variables

* generate $bd-purple-light color

* with http://razorltd.github.io/sasscolourfunctioncalculator/

* allow overide of docs variables

* fixes twbs#24642

* Reduce custom file z-index (twbs#24633)

* dist

* Popover - call `content` once if it's a function. (twbs#24690)

* Escape ID in Util.getSelectorFromElement (twbs#24700)

* Fix test failure with jQuery 1.9.1 (twbs#24706)

* Update to babel beta 5

* Update devDependencies.

* Use correct jQuery name in docs (twbs#24712)

* upgrade to node 8.9.x and dist

* Adds underline back to `btn-link` on focus

* Update devDependencies (twbs#24722)

* Use native pseudo-selectors instead of jQuery selectors (twbs#24713)

* Add missing `role="button"` in collapse examples. (twbs#24725)

* Make styling of grouped option buttons class-based

Referencing twbs#23728, styling grouped radio and checkbox buttons should not require the data-toggle attribute.

* Update gems. (twbs#24732)

* fix typo grid.md (twbs#24757)

fixes twbs#24744

* Update Hound config.

1. Explicitly disable ESLint in Hound for now; it was disabled all this time. Temporarily disabled until the ESLint plugins are updated upstream
2. Remove unneeded ignore from .houndignore

* Remove .hound.yml.

We might revisit this later, but currently we get too many FP with our current setup.

* Update devDependencies. (twbs#24762)

* Object spread : less jQuery more ES6 (twbs#24665)

* Adds variables for form validation messages (twbs#24767)

* Removed .col-form-label from vertical form example (twbs#24771)

Fixes twbs#24739

* Simplify spread (twbs#24774)

* Correct spelling mistakes. (twbs#24778)

* Use UMD and fix build to properly load deps (twbs#24783)

* Remove the now unused .houndignore file. (twbs#24776)

* Fix installing deps in our webpack docs

* Fix nested cards on card group (twbs#24766)

* Update popper.js to v1.12.9. (twbs#24797)

* Don't run postcss for `dist/css/*.min.css` files. (twbs#24676)

* Change the text color to dark on bg color warning examples (twbs#24805)

* Remove unused file and bundle ie-emulation-modes-warning.js with docs.min.js (twbs#24825)

* Remove the unused assets/js/ie10-viewport-bug-workaround.js.

* Combine ie-emulation-modes-warning.js with docs.min.js.

* Typos in grid.md (twbs#24828)

Fixed typos in offsetting section of grid.md

* Fix dropup example code

* Update devDependencies. (twbs#24829)

* Add support for fractional viewport widths (zoom/high-dpi displays) (twbs#24299)

* Change breakpoint  max- calculation to fractional values
* Update docs to reflect fractional max-width breakpoint values
* Add fractional max-width to offcanvas example
* Add documentation and SCSS comment for fractional viewport support

* Add a simple script to generate SRI hashes for our assets. (twbs#24814)

* Allow us to run our unit test on differents jquery version

* Run karma tests in parallel.

* Update typography docs (twbs#24863)

* closes twbs#24450

* Rewrite custom form check backgrounds (twbs#24697)

* Rewrite custom form check backgrounds

Previously, this was all just a background-color and background-image. When we restored the gradients though, we had two background-images competing on the same element, causing rendering glitches. This refactors that code, creating a mixin to simplify things, so we can we easily use two background-images (SVG icon and gradient) when -gradients is set to true.

Fixes twbs#24598

* restore default vars

* Revamp custom check and radio backgrounds

Instead of applying multiple background-image's to the same element, we're adding a new ::before pseudo-element to layer the background-images. Gradients go on the .custom-control-indicator while their icons go on the ::before element. This allows us to shave some bytes from when we compile and we previously needed to redeclare the background-image for the icon if you changed the gradient.

* remove now unused mixin

* mention change in migration docs

* lets the centered modal have any height (twbs#24803)

* Custom select updates (twbs#24699)

* Add support for size attribute on custom selects

* Add large custom select, document it and the small variant

* fix custom select focus state

* fix custom file input focus styles

* remove empty line

* Update package.json. (twbs#24582)

1. Use the same jQuery version in jspm
2. Update the files to only include the source and dist folders

* Use Jekyll's `smartify` filter when possible. (twbs#24866)

* Darken outline hover color to match default button hover (twbs#24150)

* Fix Issue twbs#24144

Alter button-outline-variant mixin to darken hover and active background in same fashion as filled button.

* Fix Issue twbs#24144

Filled button on hover should utilize the same color-yiq mixin so that theme buttons match

* default values, fix mixin

* rename it

* document it

* add migration note

* fixes twbs#24728

* Remove unused CSS. (twbs#24872)

* tab.js: do not remove fade class if there's no initial active pane

* Restore currently unused variables (twbs#24891)

* Replace lint-vars.sh with a Node.js script. (twbs#24860)

Also, include it in the `css` npm script since it's instant.

* Fix docs horizontal scrollbar (twbs#24878)

* Fix docs horizontal scrollbar in Components > Modal

* Add overflow to docs example class

* Drop the handleUpdate() variant

While I understand the variant covers the "get a particular plugin instance" case from http://getbootstrap.com/docs/4.0/getting-started/javascript/#programmatic-api it seems weird that we do it here but not everywhere else in the docs (randomly checking other pages, we seem to stick to the documented methods as written on those pages). As this isn't properly explained as is, and as it adds nothing (more of a preference for authors), it would be easier to just drop the variant and stick with the documented method as outlined later on in the same page (avoids having to go off on a "why should you use this instead of that" tangent here).

* Combine path and remove variable used in one place. (twbs#24873)

* Update devDependencies and gems. (twbs#24876)

* Override padding on radio input label (twbs#24899)

We could tell folks to nix the class, we could tell them to override it, or we could add another modifier of some kind to address this. None of them seem particularly useful, but the padding override feels the most approachable and clearly documentable. Added this here to close twbs#24844.

* Update README.md (twbs#24912)

* Work around Travis failures.

Note that we should revert this when the issue is fixed.

* Revert the Travis workaround. (twbs#24926)

The issue has been fixed.

* Adds variable for color yiq threshold (twbs#24886)

* Remove .col-form-legend in favor of .col-form-label (twbs#24932)

* chore: sync with twbs (#1)

* Make styling of grouped option buttons class-based

Referencing twbs#23728, styling grouped radio and checkbox buttons should not require the data-toggle attribute.

* Fix installing deps in our webpack docs

* Fix nested cards on card group (twbs#24766)

* Update popper.js to v1.12.9. (twbs#24797)

* Don't run postcss for `dist/css/*.min.css` files. (twbs#24676)

* Change the text color to dark on bg color warning examples (twbs#24805)

* Remove unused file and bundle ie-emulation-modes-warning.js with docs.min.js (twbs#24825)

* Remove the unused assets/js/ie10-viewport-bug-workaround.js.

* Combine ie-emulation-modes-warning.js with docs.min.js.

* Typos in grid.md (twbs#24828)

Fixed typos in offsetting section of grid.md

* Fix dropup example code

* Update devDependencies. (twbs#24829)

* Add support for fractional viewport widths (zoom/high-dpi displays) (twbs#24299)

* Change breakpoint  max- calculation to fractional values
* Update docs to reflect fractional max-width breakpoint values
* Add fractional max-width to offcanvas example
* Add documentation and SCSS comment for fractional viewport support

* Add a simple script to generate SRI hashes for our assets. (twbs#24814)

* Allow us to run our unit test on differents jquery version

* Run karma tests in parallel.

* Update typography docs (twbs#24863)

* closes twbs#24450

* Rewrite custom form check backgrounds (twbs#24697)

* Rewrite custom form check backgrounds

Previously, this was all just a background-color and background-image. When we restored the gradients though, we had two background-images competing on the same element, causing rendering glitches. This refactors that code, creating a mixin to simplify things, so we can we easily use two background-images (SVG icon and gradient) when -gradients is set to true.

Fixes twbs#24598

* restore default vars

* Revamp custom check and radio backgrounds

Instead of applying multiple background-image's to the same element, we're adding a new ::before pseudo-element to layer the background-images. Gradients go on the .custom-control-indicator while their icons go on the ::before element. This allows us to shave some bytes from when we compile and we previously needed to redeclare the background-image for the icon if you changed the gradient.

* remove now unused mixin

* mention change in migration docs

* lets the centered modal have any height (twbs#24803)

* Custom select updates (twbs#24699)

* Add support for size attribute on custom selects

* Add large custom select, document it and the small variant

* fix custom select focus state

* fix custom file input focus styles

* remove empty line

* Update package.json. (twbs#24582)

1. Use the same jQuery version in jspm
2. Update the files to only include the source and dist folders

* Use Jekyll's `smartify` filter when possible. (twbs#24866)

* Darken outline hover color to match default button hover (twbs#24150)

* Fix Issue twbs#24144

Alter button-outline-variant mixin to darken hover and active background in same fashion as filled button.

* Fix Issue twbs#24144

Filled button on hover should utilize the same color-yiq mixin so that theme buttons match

* default values, fix mixin

* rename it

* document it

* add migration note

* fixes twbs#24728

* Remove unused CSS. (twbs#24872)

* tab.js: do not remove fade class if there's no initial active pane

* Restore currently unused variables (twbs#24891)

* Replace lint-vars.sh with a Node.js script. (twbs#24860)

Also, include it in the `css` npm script since it's instant.

* Fix docs horizontal scrollbar (twbs#24878)

* Fix docs horizontal scrollbar in Components > Modal

* Add overflow to docs example class

* Drop the handleUpdate() variant

While I understand the variant covers the "get a particular plugin instance" case from http://getbootstrap.com/docs/4.0/getting-started/javascript/#programmatic-api it seems weird that we do it here but not everywhere else in the docs (randomly checking other pages, we seem to stick to the documented methods as written on those pages). As this isn't properly explained as is, and as it adds nothing (more of a preference for authors), it would be easier to just drop the variant and stick with the documented method as outlined later on in the same page (avoids having to go off on a "why should you use this instead of that" tangent here).

* Combine path and remove variable used in one place. (twbs#24873)

* Update devDependencies and gems. (twbs#24876)

* Override padding on radio input label (twbs#24899)

We could tell folks to nix the class, we could tell them to override it, or we could add another modifier of some kind to address this. None of them seem particularly useful, but the padding override feels the most approachable and clearly documentable. Added this here to close twbs#24844.

* Update README.md (twbs#24912)

* Work around Travis failures.

Note that we should revert this when the issue is fixed.

* Revert the Travis workaround. (twbs#24926)

The issue has been fixed.

* add .col-form-legend-lg and .col-form-legend-sm classes

* document .col-form-legend-{size}

* trash .col-form-legend completely

One class fits all

* Update forms.md

* consolidate copy

* property order

* Document breaking change from twbs#24932

* Update devDependencies and gems. (twbs#24940)

* Remove page reload in pwa.js. (twbs#24923)

* Use only transitionend event (twbs#24962)

* Update link to Font Awesome 

They have a shiny new site for v5 - https://fontawesome.com/

* Specify host 0.0.0.0 for Jekyll (twbs#24974)

Allows for remote connections on same network (as Jekyll now seems to default to 127.0.0.1 which means it does not react to incoming external requests)

* dropdown: add boundary config option (twbs#24976)

* tooltip+popover: add boundary config option (twbs#24979)

* Link to BootstrapCDN and fix its name. (twbs#24987)

* dist

* Update devDependencies and gems. (twbs#25023)

* Rewrite input group component (twbs#25020)

* Rewrite input group component

* Set the feedback to 100% width for input group

* Move from .row to .form-row for tighter layout

* no need for custom feedback here, we're using browser messaging

* add input group to validation examples

* add note about validating multiple

* migration note added

* Form check markup v2 (twbs#25050)

* match layout behaviors

* ditch the indicator as separate element for psuedo-elements on the label

* move disabled to attribute only on input

* redo default inline check to support new markup

* redo inline forms

* clean up vars

* update validation mixin to new structure

* update checks in docs

* linting for for/id attributes

* dist

* dist

* Restyle code element, remove docs example overflow, improve docs examples (twbs#25054)

* Restyle code element, clean up variables

- Removes the padding and background-color
- Changes the color to a brand color ()
- Add new variables to kbd element styles to account for removing the code ones
- Remove overrides that were needed previously

* only break between words, and override it in the pre

* make file inputs 100% wide

* scope custom file changes in input group for sizing

* shorter button labels for responsive

* narrower cards

* button was too wide

* downsize

* fewer links in pagination

* redo cell text

* improve overflow docs

* Updated Quick Start Link (twbs#25001)

* Updated Link For Getting started Page

* Change URL scheme of previous commit

From http to https

* dist

* adds hover state to the `button` element for background color utilities (twbs#24813)

* adds a hover state to the button element on the backrgound color utitility

* Adjust z-index to fix hover/focus overlaps

* Move .table-responsive to a parent class instead of a modifier

* dist

* Update our browserslist. (twbs#24919)

Update our browserslist.

* Add `last 1 major version` and `>= 1%`.
* Add Firefox.

Firefox v38 is older than the ESR, so basically replace ESR with v38.

* Fix tooltip/popover arrow size and position

* further clarify z-index docs, fix twbs#24999

* change heading

* prefix those

* closes twbs#24973

* Make custom select and file inputs 100% wide

Matches browser default inputs and swaps some max-width properties for a regular width

* space custom select sizing examples

* remove input group overrides since they're defaults now

* Move from h4s and misc to h5s so headings from example snippets don't show in our table of contents

* Update SCSS import order to have print styles last

* Closes twbs#25039

Adds some additional context on `.form-group` usage

* dist

* dist

* Darken table border-color

Fixes twbs#25016 which noticed a .thead-light and border-color of the .table-border are the same color.

* dist

* Fix input group border radius issue (twbs#25075) (twbs#25076)

* Fix input group border radius issue (twbs#25075)

* Remove migration note

- All buttons In input group do not have to be the same element now.

* lint

* Clean up button group  (twbs#25073)

* Remove unnecessary float

- since parent btn-group is displayed as inline-flex, the child elements are placed left to right by default.

* Cleanup of reset rounded corners

- Remove `border-radius :0` since it is enough by each reset of left and right side
- A `.dropdown-toggle` selector should not be used for reset rounded corner since it does not have border-radius property. Instead use .dropdown-toggle as negation pseudo-class.

* Rewrite custom file input

- Changes the wrapping label to a div so we can style the label instead of another element while also supporting form validation.
- Fixes form validation styles for custom file input (closes twbs#24831).
- Updates docs with validation styles (also adding example feedback text while I was there) and new how it works section.

* remove broken static demo

* remove popover static example

* smaller popover arrows for more reasonable visuals and more ideal pixel rounding

* consolidate content properties, un-nest

* un-nest and un-chain popover classes

* linting

* dist

* dist

* improve docs tables

* closes twbs#24929

* extra space

* dist

* Opinionated: reintroduce `cursor:pointer`

Explicitly re-adds the "hand" `cursor:pointer` for non-disabled `.btn`, `.close`, `.navbar-toggler` elements, as well as forcing `page-link` pagination controls to always have the "hand" cursor (even if an author uses it on, say, `<button>` elements for a dynamically updating in-page pagination).

Controversial, as everybody jumped on the bandwagon following this article https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b - which does have its merits of course, but there are also counter-arguments like http://kizu.ru/en/issues/cursor-pointer/

And seeing the amount of issues we've seen following the change, and the potential complexity needed to consistently address the cursor issue (see twbs#24156 where i explore how the cursor needs to be based on "intent", and how that's tough to determine), I'm favouring an opinionated take here of just reintroducing the `cursor:pointer`.

* dist

* Only apply the active and focus shadow on the focus state for :active

* fix mixin include

* line break

* apply same active/focus shadow styling to button variants

* Set `cursor:pointer` for `<summary>`

* npm dist

* Update version to 4.0.0-beta.3

* Allow customizing Popover and Tooltip `font-size` outside of `$font-size-sm`

* Allow customizing Popover and Tooltip `border-radius` while I'm at it

* Update JS-powered buttons docs to include single button example

Closes twbs#25067

* add note about single vs group

* Move alert theme-color() levels to variables

Closes twbs#24341

* linting

* Add docs about active menu items (twbs#24993)

* Remove blank line

* Expand border utilities to include top, right, bottom, left

* Improve lint vars output messaging (twbs#25049)

* Add examples of disabled tooltip and popover triggers

* Remove margin-bottom on .bd-example (twbs#25048)

* Darken $gray-600 by 10% for AA contrast (twbs#25123)

Closes twbs#23319. Both `.text-muted` and `.btn-outline-secondary` (and indeed all secondary items) make use of `$gray-600`. New value provides a contrast ratio of 4.69.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants