Add Sass variable for prefers-reduced-motion, add callout to affected components #27581
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
include mention of carousel slides, remove the (now inaccurate, as Firefox 63 includes it too) mention that support is limited to Safari/macOS xref #27525
…using animation which are affected
MartijnCuppens
approved these changes
Nov 3, 2018
|
@mdo you ok with this? note the various callouts in the docs as result of it etc |
!
Closed
pengzishang
pushed a commit
to pengzishang/bootstrap
that referenced
this pull request
Nov 28, 2018
* Consistently re-use input variables * use bsCustomFileInput in our documentation (twbs#27264) * docs: switch to font-weight 600. (twbs#27226) Segoe UI doesn't have font-weight: 500 making things not looking as expected. * Add new variables for form feedback tooltips (twbs#26959) Fixes twbs#26886 * Allow multiple ways of padding declaration for modal header (twbs#26976) * twbs#26967: Allow multiple ways of padding declaration for modal header * twbs#26976: split vertical and horizontal modal padding * dist * dist * Remove flex utilities from .list-group-item's as they're display: block; meaning the utilities have no affect. Closes twbs#27162. * Update forms.md fix duplicate id attribute * Make release-zip include the root folder. Also, now it should work cross-platform assuming `zip` is present. * Add explanation about accordion wrapper. * Fix examples after the recent JS changes. `https://example.com` isn't a valid selector. * Prevent pointer-events on disabled anchor dropdown-item Fixes twbs#26695 * Prevent pointer events on disabled list-group-item * Add license headers in js/dist files By implementing the same approach of rollup.config.js and replicate it in build-plugins.js, individual plugins will display license headers. * Include the plugin's filename in the license header. * Remove unneeded `path.resolve`. * remove useless iife * Tweak build/build-plugins.js. * updated README (twbs#27349) * fix - small grammar error "given move to" -> "given the move to" * Add overflow-auto and overflow-hidden utilities * Rename script. * Update devDependencies and gems. * refine deprecated holder.js color syntax * refine deprecated holder.js color syntax * remove `#55595c:#373a3c` * harmonize with all other holder.js examples * update holder.js image dimensions for sizing example * update holder.js image dimensions for sizing example * use `100%` instead of `100%` * 📝 https://github.com/imsky/holder#fluid-placeholders * Update Travis config. * remove `dist: trusty` since it's the default * disable email notifications * Remove sri-toolbox dependency. We can achieve the same very easily. * Add a release npm script. * Fix invalid selectors in tests and examples. * Update popper.js in docs. * build/generate-sri.js: add popperjs. * docs: fix bundle SRI hash. Also, remove popper.js from this script since it's not present in the repo. * Remove the unused `jobs` Jekyll variable. * Fix a few links. * fix `/versions/` link * add missing trailing slashes * fix a couple of redirects * js/tests/visual: fix popper script. Broken after 787441d. * Move periods outside of links. * Travis: add `--clean` in `bundle install` command. * Reduce indentation. * Change h1 to h2 * Tighten stylelint config. (twbs#27336) Also improve its formatting. * Combine examples and simple layouts. * Rename everything to skippy and center skippy (twbs#27420) * Include `css-copy` in the `css` script. * Update devDependencies and gems. * Move docs .eslintrc in site/. * Add a CODEOWNERS file (twbs#27271) * Simplify .gitattributes. * Move media from layout to components * Adds a note about the limitations on content being larger than the image. In the event that the content is larger than the image, the content will continue to be displayed outside the image itself. There are some workarounds but they apply only to browsers that support this option and IE11 is not one of them. * Adding call out note directly to the page. Instead of using an external source since this is only a one time note it is safe to be placed within the document itself. * Delete callout-info-content-iamge-overlay-overflow.md Deleting external file since it is not needed, the copy of this file will be added directly to card.md. * Fix btn focus color (twbs#27178) * npm release-zip: remove the folder before zipping. * Move lint scripts outside of the main scripts. This allows us to run `npm run dist` without tests. * Rename docs production script to production and use `JEKYLL_ENV`. (twbs#27410) * Travis: stop installing chrome (twbs#27468) It seems it works without it. * Fix doc typo * Fix double border on list-group (twbs#27126) * Fix size of modal dialogs at different widths (twbs#27094) * feat: keep contrast on `.table-dark` In case we set `$body-bg` to a dark color, we have to keep table contrast relevant. * docs search: take into account the current URL. * table: Add border color relative to theme for accessibility (twbs#25755) * Add font weight options for form controls and custom select (twbs#27343) * Add `show` and `hide` methods to dropdown (twbs#27370) * Add query string to the start_url to track how often app is launched Useful suggestion from Google in the Web App Manifest documentation. https://developers.google.com/web/fundamentals/web-app-manifest/#start-url * Add touch support in our carousel with HammerJS. * swipe left/right without hammerjs * use pointer events if available * Use correct touch-action values - my fault, my original advice of using `touch-action: pan-x` is exactly the value we *don't* want to have the browser handle... * Abandon swipe altogether if more than one touch detected * Remove unnecessary pointer event listeners these may also be the cause of weird behavior in Chrome/Surface, where scrolling vertically triggers slide advance * Refactor (and correct) start/move/end functions in particular, no need to use originEvent, and preventDefault() only needed for touch events * Set touch-action to "none" Firefox currently seems extremely fickle - with `pan-y` if fires pointercancel as soon as a touch strays even a pixel or so vertically. While `touch-action: pan-y` would be ideal (allowing users to scroll the page even when their finger started the scroll on the carousel), this prevents a swipe that isn't perfectly/only horizontal to be recognised by Firefox. * avoid drag img * Remove service worker * Unregister Service Worker. * Clean up docs Sass code. * remove unused rules * use Sass nesting in more places * use the core mixins in more places * use the color variables more * package.json: add `version_short` and use it in the npm scripts. * Make use of jekyll-toc's `no_toc_section` class. Requires jekyll-toc v0.8.0. * Remove redundant width and height properties * Custom select inconsistent padding (twbs#27415) * Fix twbs#26372: disabled btn hover issue (twbs#27407) When gradients are enabled there is still a hover state on disabled buttons since the hover rules apply to background-image and disabled rules apply to background-color. This applies the logic already present in dropdowns to buttons. This fix was originally proposed by @ysds. * changes the variables for input font size * Update _custom-forms.scss (twbs#27276) user-select has no effect on before/after pseudo elements * webpack page: Remove precss reference * Fix for double border on cards in an accordion (twbs#27133) * Carousel fade cleanup (twbs#27278) * optimize data URIs (twbs#27284) * Outline button variant hover mixin (twbs#27289) The outline button variant mixin should use the hover mixin, as does the non-outline version. * Re-add carousel control transition (twbs#27277) * Custom checkboxes and radios retheming (twbs#27064) * feature/yiq function, add parameters, with default values. (twbs#26917) * Improve Grid examples. (twbs#26808) Removes the grid.css file of the grid example and makes use of utility classes * Example dashboard: Responsive padding-top of the main content (twbs#26332) * Add dropdown responsive alignment (twbs#26255) * Card header color theming (twbs#26573) Define new variable for card header color * Fix typo in the Popper.js checks. (twbs#27488) * Simplify theme color usage (twbs#27378) * Revert "Simplify .gitattributes." This reverts commit 1c78f70. Unfortunately some Linux distros use an ancient git version and this change requires git >= 2.10. * test(Modal): reuse _getScrollbarWidth in tests * Change erroneous documentation for .flex-fill (twbs#27265) The current documentation for .flex-fill indicated that the flex items would have equal widths, regardless of content. This update ensures that the documentation reflects the fact that the width of the flex items depends on their actual content. * Update devDependencies and gems. * Unitless breakpoints If I want to customise the breakpoints using `em`, I get compatibility errors. It is good practice to set breakpoints in `em` instead of `px` when users use browser scaling. See https://zellwk.com/blog/media-query-units/#concluding-the-experiments for more information why someone would like to do this. Only Safari users can get annoyed: https://adamwathan.me/dont-use-em-for-media-queries/ In any case, using a unitless number at line 42 would be very convenient. * Disallow transition property (use mixin instead) * Use the example shortcode in more places. Now that we don't have the ToC issue with the examples' headers in ToC, we can safely do this.no_toc_section_class * Remove unneeded check. Leftover from after 43c20b9. * Further ToC fixes. * Cleanup stylelint comments * Custom select validation padding fix and additional custom select feedback icon variables * Easy merging of new grid breakpoints and containers (twbs#26714) This change follows exactly what was done for the `$grays`, `$colors`, and `$theme-colors` lists in twbs#23260. This allows for easy addition of new breakpoints or grid containers also. * Fix readonly-plain-text with button addon (twbs#25871) Fixes twbs#25870 * Variable darken percentage for emphasized links * Added Viewport Height & Width helpers This allows the user to make a container (ideally) to use viewport height and width and allow better vertical/horizontal alignments of elements. * Improve pagination's documentation accessibility. - Remove `.sr-only` span for previous/next page, there is already`aria-label` - Add `aria-disabled="true"` and `aria-current="page"` * calculate modal transition duration based on modal-dialog element * fix tab fade out (twbs#27533) * Delete sache.json (twbs#27530) * Update tab.js I'm using Tab.js with remove function and get an error "TypeError: container is undefined [more info]", with this check the error is fixed. * add unit test to test tabs can be removed without throwing error * Update devDependencies and gems. * add unit tests for our carousel * update our coverage required for branches and functions * Update Travis CI config. Only run `coveralls` and `check-broken-links` tasks when we run the Test phase. * Prevent the background to be shown when transitioning * twbs#27502: Prevent active state border change * download page: add Yarn (twbs#27544) * Fix util tests on IE 10 (twbs#27556) * docs: remove Webpack version reference. * Remove trailing space. * refactor(Modal): add `_isTransitioning` default value Having variables initialised from start `_isTransitioning` is better. Would be better to add an eslint rule to check for undeclared variables use. Reordered enter checks for `show` and `hide` by priority. * test(Modal): check if modal is disposed * fix dispose modal unit test * IE10 homepage fix * Prevent hover/click on disabled .close links. * Add @MartijnCuppens to our core team ! 🎉 (twbs#27562) * Fix Edge bounce and restore original transition easing (twbs#27279) * Fix empty custom-control-label alignment issue (twbs#27566) * Make meaning of tooltip's `selector` option clearer (twbs#27573) * robots.txt: disallow crawling when not in production. (twbs#27559) * Remove the obsolete tooltip-viewport example and redirect it. * handle detached tooltip when we try to hide a modal * Add Sass variable for prefers-reduced-motion, add callout to affected components (twbs#27581) * Tweak the accessibility/reduced motion text include mention of carousel slides, remove the (now inaccurate, as Firefox 63 includes it too) mention that support is limited to Safari/macOS xref twbs#27525 * Add new callout for reduced motion * Add variable to control prefers-reduced-motion media query support * Add callout about prefers-reduced-motion to all components currently using animation which are affected * docs: remove false info from v3 suggestion. * Resolve twbs#26226: Sync with normalize 8.0.0 diff credits: @client9 * Add TODO * Avoid null value (twbs#27570) * Jekyll: switch to localhost `0.0.0.0` has issues on Windows. * Button group refactoring and fixes (twbs#25395) * scss/_custom-forms.scss: fix typo in comment. * Replace touch-action: none with pan-y, remove preventDefault from touch event handling * broken-link-checker: force follow links. After 3256a2c, blc honored robots.txt thus it didn't crawl anything. Ignore robots.txt to work around the issue. * Travis: stop using a separate stage for Browser tests. This should be faster. * Add `.text-wrap` class. this is the opposite of `.text-nowrap`, and a forces elements to wrap onto new lines. One use case for this is extra long button text. Bootstrap buttons by default do no wrap, so this class could be used to override that behavior. * Add `text-wrap` example. * Use a badge for .text-wrap example * Update devDependencies and gems. * Update README.md (twbs#27588) * remove jobs link * specify a link in the BrowserStack image * Ligthen/Darken Button focus shadow color * Made the disabled state for nav more obvious. (twbs#27382) * Add japanese to translations (twbs#27599) * Add Noto Sans to the font stack (twbs#27596) Fixes twbs#27595 * Remove htmllint. (twbs#27603) We use the official HTML validator for HTML validation, and we don't really use any of the htmllint features. * Prevent white line in Firefox (regression) (twbs#27594) * Reorganize npm scripts. * Add new `.rounded-pill` utility (twbs#27339) * Increase readability card columns docs (twbs#27609) * Travis: exit pipeline if test fails. * Travis: Add back chrome addon (twbs#27610) * display chrome version on travis * Docs: Improve accessibility of disabled link example (twbs#27614) Add `tabindex="-1"` and `aria-disabled="true"` to disabled link * Wrap checkboxes in `.form-group` (twbs#27624) * use bsCustomFileInput in our docs (twbs#27631) * Move stylesheets to an include. * Move analytics to an include file. * Add an examples layout. Reduces duplication and makes maintenance easier. * Dashboard example: update 3rd-party libs and use the same CDN. * Fix modal positioning on Android. When the address bar is hidden, sometimes the visual position of the controls is out of sync with its logical position. * Remove custom properties from examples so that they work in IE (twbs#27634) * Redirect `/extend/` to `/extend/approach/`. * Allow to add more embed responsive ratios (twbs#25894) * Minor/Docs: tweak accordion example heading level (twbs#27620) * Replace `data-src` with `src="..."` in docs. (twbs#27649) * Update clipboard.js to v2.0.3 (twbs#27657) * Jekyll: Add wdm gem for Windows. (twbs#27658) * Add Bootstrap's very first spinners omfg it's actually happening * spinners: use the animation shorthand property. * Bump bootstrap.min.css bundle size. * Spinners: show all color variants. * Customize browse text of the custom file input with HTML (twbs#27651) * Add new toasts component * Create toast JS plugin, add unit tests. * Fix toast documentation page. * Implement `data-dismiss="toast"` to allow user to interact itself with the component (twbs#27155) * Update toast documentation following pull twbs#27155 Also remove close button everywhere just let it when autohide is set to false * Remove the show delay for our toast plugin * Nest the `.toast.show` and use `display: block;` as inherit causes broken styles * Clean up some docs for toasts - Add headings to examples section - Clarify styles and customization options in examples - Add dismiss buttons to all toasts - Missing period added for consistency - Update roles, tweak text * Dist * Keep input group & form label font size in sync with form control font size (twbs#27663) * some cleaning and changes for readability * Use fancy apostrophe in HTML files. For Markdown files, this isn't needed because the Markdown converter takes care of this. * Update autoprefixer link to `.browserslistrc` file (twbs#27675) * Update devDependencies and gems. * Inherit card header color (twbs#27681) * Enforce lowercase class name in .stylelintrc (twbs#27668) * Support custom-select sizing in input-group (twbs#27677) * Spinners cleanup * Prevent text decoration skip inc and reorder comments (twbs#27673) * Add documentation about .font-weight-bolder/lighter (twbs#27678) * Add documentation about viewport sizing utilities (twbs#27688) * Add documentation about .text-decoration-none (twbs#27686) * Allows both OL and UL lists for tab buttons * Remove `sudo` from Travis config. (twbs#27693) https://blog.travis-ci.com/2018-11-19-required-linux-infrastructure-migration * Replace anchor.js with jekyll-anchor-headings. This allows us to generate the anchor links on build time. https://github.com/allejo/jekyll-anchor-headings * Replace holder.js with SVGs. * Tweak placeholder.svg. * always include the title * make it possible to skip adding the title by passing `title=' '` * remove viewBox since we don't need it * Fix placeholder image replacement. * Use the new include in examples too. * Remove holder.js. * Reindent. * docs-sidebar.html: remove commented out code. Leftover from old times. * Use wrapping span instead of div (twbs#27695) * docs: fix path to assets. (twbs#27696) * reboot: Fix mailto address (twbs#27700) * Sass precision documentation (twbs#27705) * Placeholders: use our gray colors (twbs#27701) Previously we were using the old holder.js colors. * Add border-radius to dropdown items (twbs#27703) * Fixed a fixed height issue of input-group size option (twbs#27687) * Update devDependencies. * Update DocSearch.js to latest version The latest (2.6.2) docsearch.js version now displays results as standard `<a href>` links, allowing users to `ctrl`-click on them to trigger default browser behavior of opening in a new tab. To maintain backward compatibility, this behavior has only been enabled to users that didn't define their own `handleSelected` method. This PR updates your `docsearch()` code to take advantage of the new `<a href>` template, by removing your custom `handleSelected` and moving its behavior to the `transformData` call. Namely, what you wanted to avoid was jumping to the first `<h1>` of the pages, which would prevent users from seeing the header. This PR checks if the suggestion targets the `#content` anchor (meaning it goes to this first `<h1>`) and remove it. Behavior should be the same, but at least now you can enjoy the `ctrl`-click :) * Fix body scrolling issue when modal open (twbs#27698) * Revert "Replace anchor.js with jekyll-anchor-headings." This reverts commit b04f97f. * Add opacity transition * prevent text selection for floating labels example (twbs#27719) * prevent text selection for floating labels * expand the click target by no selecting the label text * use `pointer-events: none;` instead of `user-select` * thx @MartijnCuppens * Update devDependencies. * Dist * Grow button width to the parent button group (twbs#27717) * ship.sh: add missing period. * Add test to make sure we enforce focus on modal (twbs#27723) * Change OS X to macOS in Sass comments (twbs#27729) It's been macOS for 3 years now and we use just 'macOS' elsewhere in the Bootstrap documentation. https://en.wikipedia.org/wiki/MacOS * Update package-lock.json. * Update migration page to indicate the info can be used for 4.1.x as well as 4.0.x * homepage: use srcset. This should reduce the amount of bytes for non-2x displays. * Use srcset for examples too. * Move examples images in assets/img/examples/ folder. * Use an SVG for the stack image. Image by @mdo. * Inline bootstrap-stack.svg. It's pretty small compressed; a little less than 1 KB with gzip. * Use `h5` for callouts so that they are not included in ToC. Callouts are already excluded from ToC, but due to a limitation in jekyll-toc they are still being included. We should revisit this if the bug is fixed later.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #27525