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

Remove hand-cursor on links displayed as button #24156

Closed
tbolon opened this issue Sep 28, 2017 · 22 comments
Closed

Remove hand-cursor on links displayed as button #24156

tbolon opened this issue Sep 28, 2017 · 22 comments

Comments

@tbolon
Copy link

tbolon commented Sep 28, 2017

As explained quite clearly on this article, hand (pointer) cursor should be limited to links on text and images.

The rule seems to be: for a button, there is no need to use a pointer cursor. for a text link, a pointer cursor should be used.

Currently, the underlying element is not altered: if you render a classic link as a button (<a> with class="btn") the cursor is still a hand cursor.
For example, in the documentation for the first button. For this button only, the cursor is a pointer.

Also note that the same is true for button elements rendered as links (<button> with class="btn-link"). The link should be rendered with a hand cursor. See this example on the doc.

A naïve implementation could be:

.btn-link { cursor: pointer; }
a.btn { cursor: default; }

If the solution is as simple as this, I can submit a PR.

Regards,

@patrickhlauke
Copy link
Member

if a link still acts as a link, despite looking like a button visually, it should keep its default cursor. the only way out of that dychotomy would be something like [role="button"].btn { cursor: default; }. similarly, for buttons styled as links (which I personally think is an abomination), we should probably suggest that those, if they indeed act like a link, should be given a role="link" and have a matching [role="link"].btn-link { cursor: pointer; }

@Herst
Copy link
Contributor

Herst commented Sep 28, 2017

Wasn't it removed in 232e86d? Which is why there was a PR to add it back: #23995

@patrickhlauke
Copy link
Member

@Herst these are the two sides of the same argument unfortunately. what really counts is author intent / actual functionality. i.e., if something acts as a button (triggers in-page functionality), it should have cursor: default;. if it acts as a link (navigates to a different page, or to a section within the same page), it should have cursor: pointer;

@patrickhlauke
Copy link
Member

I'll take this on with the above suggested [role="..."] based selectors (and matching change in doc)...that should hopefully satisfy both sides of the debate.

@patrickhlauke patrickhlauke self-assigned this Sep 28, 2017
@Herst
Copy link
Contributor

Herst commented Sep 28, 2017

I have links styled as buttons and proper buttons on my page and I got the feedback from a tester that the cursors are inconsistent. But this was coming from a more technically-oriented person so I attached less importance to it (as opposed to #23853).

The differentiation in-page state change vs. scroll/page-switch largely makes sense IMHO, it could also be added that latter often also allows opening in a new tab (e.g. through a middle-click or the context menu); but what about submit buttons? Always a hand cursor if the page is supposed to be truly submitted?

@patrickhlauke
Copy link
Member

no, be guided by the browser default for the specific situation...submit buttons by default don't get pointer (hand) either

@tbolon
Copy link
Author

tbolon commented Sep 28, 2017

That is an interesting discussion. Reading the original post comments also raise a number of valid concerns.

The fact that a link/button can be altered to act as a button/link make any assumption irrelevant. So the idea of a "role" attribute could allow a developer to force a definitive behavior.

But should the actual default remains ? Or be based on apparence (btn-link=pointer, btn=default) instead of html element (<a>=pointer, <button>=default) ?

@patrickhlauke
Copy link
Member

patrickhlauke commented Sep 28, 2017

the idea of a "role" attribute

note that this isn't just an "idea". it's an actual HTML attribute, which is supported by assistive technologies.

But should the actual default remains ? Or be based on apparence (btn-link=pointer, btn=default) instead of html element (=pointer, =default) ?

it should be based on intent. you have "call to action" type links which visually look like a button, but are links, so they really need the hand cursor. conversely, an author my choose to use btn-link (to make a button appear similar to links adjacent to it) but it actually triggers functionality instead of acting like a real link. there, it should have the default cursor.

@Herst
Copy link
Contributor

Herst commented Sep 28, 2017

Some older discussion can be also found at #21812 and #17542 (necolas/normalize.css#379).

BTW, wasn't there also some discussion advising against styling based on anything but classes whenever possible? I don't remember what the reason was, hopefully something other than performance.

@patrickhlauke
Copy link
Member

BTW, wasn't there also some discussion advising against styling based on anything but classes whenever possible?

In this case, it's not possible to rely purely on class, as the cursor needs to match the intent, and the classes here can be applied for different reasons (e.g. "it's still a link, it just visually looks like a button" vs "i'm using a link, but it acts as a button").

I don't remember what the reason was, hopefully something other than performance.

From memory, the idea was to uncouple styling from underlying markup, so the classes would "just work" even if authors applied them to structures other than those in the bootstrap docs/examples.

@gijsbotje
Copy link
Contributor

i watched this talk a few weeks ago, clarified a lot for me https://www.youtube.com/watch?v=eo4ksG-DLso
if i remember correctly she says exactly what @patrickhlauke is saying

@mdo
Copy link
Member

mdo commented Oct 18, 2017

How do you want to proceed @patrickhlauke?

@patrickhlauke
Copy link
Member

@mdo going to aim for a PR soon (not sure if in time for beta 2 though)

@EugenMayer
Copy link

EugenMayer commented Oct 24, 2017

/ranton
What a horrible design decision based on an article comparing desktop applications with unified styling by the OS with the browser, having a different visual display of buttons on every single page.

Beside that, historically browser come from displaying content, not from being the "application windows" they are going to be used more and more - while desktop applications have exactly the inverse history, they are used as applications only and beside some widgets, they only do exactly that.

The hand cursor was one of this indicators in the web, even for experts, to see if, out of all the thousand items, one item is interactive or not, since you simply cannot guess in the web. Buttons look flat, non flat whatever, colored, with background, transparent and beside ALL that, placed on every possible place possible.

You find call to action buttons on every position in the coordinate system when you are looking at the browser. The article then compares that with a Desktop App-Menu which is placed on the top every single time and does look the same for every single application.

Its repeating again and again, some UX designer forces to invent something new, so muuuch simpler and sleeker and "teaching" other "people in the world" that this will be simpler. Paddling back in the end, since it was nothing more then then a made up invention...much rather just a change for the sake of a change... to "see any kind of progress" without having any kind of useful addition at all.

All that fits perfectly for this PR, all it does is harm without adding any more convenience, without removing any overhead or bloat or being faster.

At least people who really care like http://www.material-ui.com/#/components/flat-button do not just jump on a bangwagon of "i have something new here" and "new is better, always".
/rantoff

And yes of course, we added it back again, wont be a surprise for a lot more people using bootstrap for web-applications.

@tmorehouse
Copy link
Contributor

What about <a href="#" class=".btn .btn-primary"> which could be used to trigger a dropdown menu or popup or modal? (i.e. has a click/keypress handler to open the target element, and not page navigation). Should the cursor be set as pointer or default?

@EugenMayer
Copy link

If you use .btn, it should be clickable thus a cursor. If you use .btn and trigger it on "on hover" you might reconsider both, the styling and the idea it is a button - but still arguable that it could be seen as a button of course.

In you case, if the interaction is already triggered on hover, no need to add the cursor probably ( but i would ) - if you have to click to trigger the drop down, the hand cursor should be mandatory IMHO

@Herst
Copy link
Contributor

Herst commented Nov 2, 2017

What about <a href="#" class=".btn .btn-primary"> which could be used to trigger a dropdown menu or popup or modal? (i.e. has a click/keypress handler to open the target element, and not page navigation).

Or open accordion panes for that matter. Good question, I guess it does not act act like a classical hyperlink or link pointing to an anchor, i.e. it can't be shared or opened in a new tab so I guess some might argue that it shouldn't have a cursor for that matter and that the button styling alone should make it enough of a signifier.

@SelenIT
Copy link

SelenIT commented Nov 23, 2017

I'd say that <a href="#" ...> could not be used for anything other than returning to the top of the page. Especially in late 2017, when we have things like <details> + <summary> for accordion-like things, with very decent native browser support and good polyfills for old browsers. Doing so basically means that the developer got stuck somewhere in 2003 and still tries to work around the limitations of HTML4 (or even 3.2). There is completely no need to do so now — it's just time to learn HTML. The modern HTML is really awesome! :)

Also, removing pointer cursor from links (regardless their appearance) is a far worse usability problem than adding it to clickable things that are not links. If I were the validator, I'd mark the latter as a warning, but the former as an error.

Regarding the "cursor inconsistency" problem between visually similar, but functionally different elements, I'd say that first of all it just indicates the deeper underlying problem of such UI — the fact that these different elements were made look similar. Probably it would be better to rethink the whole UI in this case and make such elements more clearly distinct, than try to further unify the by changing their cursor. But this needs per-case analysis and probably there would be no "silver bullet" solution for all cases, some trade-offs may be inevitable, and in that case the pointer cursor for the non-link element would be the lesser evil.

@patrickhlauke
Copy link
Member

@tmorehouse

What about <a href="#" class=".btn .btn-primary"> which could be used to trigger a dropdown menu or popup or modal?

if your link triggers in-page javascript, rather than navigating somewhere, it should have role="button"

@patrickhlauke
Copy link
Member

for what it's worth, i'm actually now leaning (personally) towards just adding cursor:pointer to links and buttons, rather than trying to special-case "only link-like links/buttons that somehow act as links should use that, all others get the default". as much as i sympathise with the original "buttons shouldn't use the pointer cursor" article, i really don't think users are so utterly confused by the practice...

@tmorehouse
Copy link
Contributor

For me, I just right click and see if I have an option to open in a new tab/window

mdo pushed a commit that referenced this issue Dec 28, 2017
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 #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`.
gijsbotje added a commit to gijsbotje/bootstrap that referenced this issue 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.
@Herst Herst mentioned this issue Aug 1, 2018
@yesuus11
Copy link

yesuus11 commented Feb 4, 2022

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

10 participants