Skip to content
GitLab

Fix StackBlitz examples by embedding snippets.js when needed

Merged Julien Déramond requested to merge github/fork/julien-deramond/main-jd-use-js-snippet-file-in-stackblitz into main

Alternate version of https://github.com/twbs/bootstrap/pull/36127 Linked to tracking PR https://github.com/twbs/bootstrap/pull/36091

This PR is an alternate version of https://github.com/twbs/bootstrap/pull/36127 based on its comments. The philosophy here is to indicate when needed that a given example needs to embed the extra file snippets.js in StackBlitz:

  • by default, we create an HTML StackBlitz environment without this file
  • by setting data-js-snippet="true" we create a JS StackBlitz environment with this file

In order for the user to understand the logic here (that all the JS file content is not needed) IMO snippets.js should be heavily commented and crystal clear)

At the moment this PR only show the architecture changes. We already know that the popover example should be at the end hidden.

Extra things modified:

  • Gather other classes used in combination with .bd-example

Thoughts?

Remaining tasks

Tasks for other PRs

  • In another PR handle the edge cases for tooltips and popovers examples that won't work anyway because of the title removed by JS in the DOM. They must be hidden.
  • In another PR handle the CSS/SCSS reusable code needed by the examples.

Live previews

Alerts

Checks & Radios

Modal

Popovers

Toasts

  • Placement: toasts are moving but will need corresponding CSS in the future

Tooltips

  • Tooltips on links: should be hidden in a next PR because title won't work as it is removed automatically by JS.
  • Custom tooltips: should be hidden in a next PR because title won't work as it is removed automatically by JS.

Non-regression example (just html)

  • Accordion: snippets.js is not embedded in StackBlitz; there's no index.js created since no extra JS is needed.