* docs(carousel): double-spaces out there
* docs(toasts): missing word, ins't it?
* docs(cheatsheet): use buttons for carousels and tabs ion cheatsheets too
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* WIP: Mention variables, mixins, and loops in docs
* Add Sass sections to component pages
* add sass docs for forms and content
* Update buttons.md
* Remove empty mixins sections
* Massive update to utilities and some consistency changes
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add function type for `popperConfig` option
* Update .bundlewatch.config.json
* copy edits
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
- Removes the &[style] selector that was used for resetting Popper styles
- Separate Popper-based alignment from static alignment with `data-bs-popover` attribute that separates the --bs-position and custom right/left properties
Co-Authored-By: Rohit Sharma <rohit2sharma95@gmail.com>
* Dynamic tabs: use buttons rather than links
- change docs
- add mention that tabs should be <button> elements
- tweak styles to neutralise border and background
* Update js unit and visual test accordingly
- replace links with buttons
- make one specific test that uses links instead of buttons, as we still want to support it despite it being non-semantically appropriate
- Leaving a couple of tests for now. The test for removed tabs should be redone so that tabs are removed programmatically (as the approach of having that close button inside the link is invalid and broken markup). The test for dropdowns should be removed together we actually ripping out the handling for dropdowns in the tab.js code (arguably a breaking change, though we discouraged this for a few versions and effectively "deprecated" it)
* Add isolation:isolate to prevent focus being overlapped
https://github.com/twbs/bootstrap/pull/32630#issuecomment-756015766
* Emit events on the dropdown button
Emit the events on `.dropdown-toggle` button and then bubble up
* Add migration note for events
* Update the docs for events
* Add unit test to check the event bubbling
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Remove the margin from dropdown in favor of Popper
- Set the default margin to 0 for dropdowns (To remove the Popper's warning)
- Set the required offset in dropdown's defaults
* Remove the margin from the popover component
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Carousel: use buttons, not links, for prev/next
- expand the styles to neutralise border/background
- change docs page
- add extra unit test to check that links or buttons work as controls
- modify visual test to use buttons as well
- use buttons instead of links for prev/next
- remove `role="button"` from links that are actually links
* Clarify that controls can be button or link
* Update site/content/docs/5.0/components/carousel.md
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Explicitly set padding to 0 to prevent dipping/moving on active in Firefox
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
While technically it still works, we're already saying authors shouldn't do it later on, and we removed any examples of this. This was a straggler.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add an actual `data-touch="false"` example in the carousel docs
this can also make it easier to actually check/debug any issues we may have with this data attribute
* Correct attribute table explanation and remove slide class from example
Adds the ability to use objects implementing the virtual element interface as the value for the reference option of a dropdown config.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
The default Popper `fallbackPlacements` value is `[oppositePlacement]`.
- The default value was previously (in v4) `'flip'` that can be achieved by passing the single value in the array, like — `[oppositePlacement]`. Keeping `null` also sets the `fallbackPlacements` to `[oppositePlacement]` (Default value in Popper)
- It's better to have **clockwise** (`['top', 'right', 'bottom', 'left']`) fallback options so that tooltip/popover can be placed to another side even if the opposite placement doesn't fit.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
* Add a callout for the sanitizer in popovers and tooltips
* Add second reference to sanitizer in the options
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
- Add CSS custom property with fallback to Sass variable
- Update docs to mention the new CSS custom property
- Rewrite some of the docs to use divider instead of separator, and add some context here and there
Drop the support of show property from the modal plugin.
When creating the new modal instance in v5, the `show` property does not work anymore, so instead of fixing the behavior just removing it permanently to keep the consistency between all the plugins. (All other plugins require the `show()` method to be called on the instances to be shown)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Expand "external content" section for navbar
- rephrase the intro to make a bit more sense
- add note about dangers of focus/reading order problems
* Remove pointless intro sentence
* Small wording changes/additions/fixes
* Rename Navs to Navs and Tabs
Fixes#31378
* Add title to renamed file
* Update navs-tabs.md
* Add alias/redirect
* Fix references to renamed file, tweak title
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
* feature(spinners): slow down spinners when prefers-reduced-motion
* docs(spinners): add reduced motion callout and mention slowing down in accessibility page
* Update spinners.md
* docs(accessibility): rewording
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Remove the `markdownify` call, and instead rely on Hugo's proper syntax; `{{% callout %}}` when we want to the content to be processed as Markdown.
This allows for stuff like:
{{% callout info %}}
##### I'm an info callout!
```css
.foo {
color: #fff;
}
```
{{< example >}}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>
{{< /example >}}
{{% /callout %}}
* docs(badge): ensure info badge's contrast
* docs(colors): fix contrasts in example using .bg-info
* Update card.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add .dropdown-menu-dark
* Match background color to navbar dark
* Update docs to include a navbar example
* Update dropdowns.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Docs: (subjectively) nicer looking accordion example
the use of `.btn-link` currently just looks a bit odd, subjectively (as in v5 we now force the underline to always be there, while in v4 at least it was only on hover/focus).
`.btn-light` seems more fitting
* Add extra classes for nicer overall look
as suggested by @ysds
* Tweak accessibility note for accordions and optional keyboard interactions
* Keep checks/radio toggle buttons on topic
- give examples of the pure toggle checks and radios, without the button group class. show that these work fine without `.btn-group`, but still cross-reference it
- move the explanation from "Checkbox toggle buttons" directly to "Toggle buttons", as the mention of using button classes applies equally to the subsequent "Radio toggle buttons" and "Outlined styles" subsections.
* Expand button group description
as it's not just single line, but vertical as well
* Expand button group examples
- add more colour ... `.btn-secondary` is just dull and uninspiring
- new section to showcase "Checkbox and radio button groups"
- add a mixed styles example
- add an example of vertical radio button group
* Rename `sr-only`/`sr-only-focusable`
To be more representative of the fact that these are not necessarily "screen reader" specific, but actually apply to assistive technologies in general (and also things like Alexa/Siri/etc). Goes hand-in-hand with #31133
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Docs: improve/expand button documentation
- since we're not doing the disabled cursor thing anymore anyway, remove confusing/unnecessary mention for link-based disabled buttons
- make the disabled toggle example using a link actually follow the preceding advice of also having `tabindex="-1"` and `aria-disabled="true"`
- tweak the link functionality callout to also still mention `aria-disabled` to reinforce the idea
- tweak toggle state description (not just `<button>`s, but also links etc...so just remove mention of `<button>` there; also reinforce accessibility aspect once more)
- add a new callout that cross-references checkbox-based toggles, and what the similarity/difference between them is
- add a matching cross-reference callout to the checkbox-based toggle buttons page
* Update link to now renamed checks-radios.md
* Add two new toasts examples
- Adds a new custom content example that removes the toast header and adds a custom close icon
- Adds docs for how to create your own color schemes
- Adds example of additional buttons
* Update toasts examples
- Remove span and place aria on SVG element
- Add .border-0 to color scheme example for crisper edges
* Update toasts.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
