Mark Otto [Wed, 24 Jul 2019 06:00:29 +0000 (23:00 -0700)]
Cleanup
- Rename and move the variable to variables file
- Move code to the grid file
- Use the mixin to generate our own classes
- Wrap in a grid classes enabled conditional
- Document the mixin
Mark Otto [Wed, 17 Jul 2019 23:27:53 +0000 (02:27 +0300)]
First pass at .row-cols classes
Trying to find a new way to do responsive card decks while not locking ourselves into the cards themselves. My thinking here is we can easily control the column (.col) width by the parent, but I don't know how many we need (have 0-5 now) across each breakpoint. This works for cards so far, and I think could get us equal height, too.
Mark Otto [Mon, 5 Aug 2019 19:12:16 +0000 (12:12 -0700)]
Responsive containers (follow-up to #29095) (#29118)
* Follow-up to #29095
This PR fixes the responsive containers that were added in #29095, originally stubbed out in #25631. Apologies to @browner12 for getting that wrong.
Fixes #25631.
* update navbar as well because we cannot reset all containers uniformly
* Update navbars example to include container-xl example to ensure containers match
* rewrite responsive containers docs, add table of max-widths
* Update container docs
- Move table up to the intro
- Remove the container example because it's actually hella confusing
- Update and link to grid example as a demo instead
Mark Otto [Mon, 22 Jul 2019 00:38:36 +0000 (17:38 -0700)]
v4/v5: Add responsive containers (#29095)
* create responsive containers
provide more flexibility and allow the user to determine when containers switch from fluid to fixed width.
* fix the base container code
this commit fixes the non-media portion of the generated CSS. I learned about the `@extends` directive and was able to put it to good use.
I create a new temporary map that contains all the main `$container-max-widths` and join it to our 2 special cases of 'xs' and 'fluid'. Then we loop through that and, with the appropriate infixes, extend our placeholder
* formatting for style
forgot to run my tests before the last push, i think these are better.
* finish incomplete comment
* fix the responsive containers
using the `@extend` directive I was able to clean up this code
* fix responsive containers in the navbar
mostly we just look through all of our breakpoints so we can include all of the responsive container classes in the tweaks we have to do for the navbar (redeclaring flex properties, don't double up on padding, etc)
* Simplify container extends
* Simplify navbar containers
* Rearrange, add comments, ensure everything is nested in $enable-grid-classes
* Reduce new CSS by using attribute selector
We avoid using `@extend` whenever possible, and this is more readable
* Update _grid.scss
* Update _navbar.scss
* Add docs for responsive containers, redesign the container layout page
Patrick H. Lauke [Mon, 24 Jun 2019 20:01:44 +0000 (21:01 +0100)]
Ensure button plugin sets/removes active class correctly on page load (#28952)
* Ensure correct active class is set on button toggles/checkboxes/radios on page load
Sanity check, ensures that the UI visually matches the actual values/states of controls. Also ensures that if any autocomplete/autofill happened, this is visually accounted for
by having the correct class set.
Includes unit tests (and `autocomplete` has been removed from these as it's no longer necessary)
* Remove now unnecessary autocomplete attribute
As the attribute was there to force/ensure that the visual presentation matched the state, and this is now taken care of programmatically, there's no need to unnecessarily suppress autocomplete...let them autocomplete if they want to...
Fix keyboard handling of button-style checkbox/radio button groups (#28834)
- adds more defensive checks to make sure no unnecessary toggling happens on disabled buttons; this also fixes an up-to-now undiscovered bug where a toggle button with `.disabled` class would still have its `aria-pressed` toggled
- adds a set of explicit tests for the above case of disabled buttons and `aria-pressed`
- remove a now irrelevant (or at least very nonsensical) test for `<label>` containing both an actionable and a `hidden` `<input>`
- expand the test for disabled checkbox to also explicitly test starting conditions (used mainly in my debugging)
- ensure that `$btn[0].click()` is used to click checkboxes in tests, rather than the `click()` on the jquery object which is simply a shorthand for `trigger('click')` and does not actually trigger the browser default behavior
- remove the `preventDefault()` from the button handling, which was preventing correct keyboard functionality for checkboxes/radio buttons
- add extra logic to the button.js code to handle checkboxes correctly and avoid double-triggering as a result of mouse interactions (which saw the checkboxes being toggled twice, thus returning them to their original state)
- add logic that prevents the `checked` property from being added incorrectly for any inputs other than radio buttons and checkboxes
- added more tests (including the most basic test for a properly triggered fake checkbox button)
- work around Firefox bug #1540995 (which this code was hitting after removing the `preventDefault()`, due to Firefox's incorrect toggling of disabled checkboxes when programmatically (but not manually) activated with a `click()` event
Docs: add accessibility/keyboard callout to popovers, tweak tooltips callout (#28851)
- Add same advice about keyboard/AT handling to popovers as a callout; also add information about not adding excessive content or interactive controls (and the suggestion to opt for a modal)
- Tweak the tooltips callout for consistency