Skip to content
GitLab

[WIP] Hide or fix StackBlitz examples

Closed Julien Déramond requested to merge github/fork/julien-deramond/main-jd-hide-or-fix-stackblitz-examples into main

Description

Initially in https://github.com/twbs/bootstrap/pull/36088, this PR proposes to hide or fix examples that doesn't work with StackBlitz.

This PR adds a new parameter {{< example show_edit_btn="false" >}} to hide the StackBlitz edit button for examples that cannot work easily: need extra HTML or JS code; for example the alert's live example.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • All new and existing tests passed

Related PR

https://github.com/twbs/bootstrap/pull/36088

Live previews

  • Accordions (3 examples)
  • Alerts (7 examples)
    • Live example: hidden for the moment to test the hidden feature. TODO: try to embed the JS.
  • Badge - 6 examples
  • Breadcrumb - 4 examples
  • Button Group - TODO
  • Buttons - 15 examples
  • Card - 30 examples
    • In all card examples, the image text is not centered nor with the good size
  • Carousel - 8 examples
  • Close Button - 3 examples
    • White variant: Not linked to this PR but we could pass a parameter to define a background color (here black).
  • Collapse - 3 examples
  • Dropdowns - 21 examples
  • List Group - 15 examples
  • Modal - 2 examples
    • Maybe some other examples could be edited
  • Navbar - 26 examples
    • Image and Image and text are not working because of the image relative path. Could be modified in the shortcode?
    • Toggler Don't see the toggler but I suppose this is because of a difference between 5.1 and 5.2
  • Nav Tabs - 15 examples
  • Offcanvas - 8 examples
  • Pagination - 8 examples
  • Placeholders - 5 examples
  • Popovers - 5 examples
  • Progress - 8 examples
  • Spinners - 13 examples
  • Toasts - 10 examples
    • Funny but good to know. If you click on the cross in the doc and then click on the "Try it" button, the environment won't display the toast.
    • Placement: changing toast placement doesn't move the toast. The second example is not working as well
  • Tooltips - 2 examples
    • None of the examples are working
  • Figures - 2 examples
    • "400x300" are not centered correctly as in the cards and carousels
  • Images - 5 examples
    • Same observation as for the Figures
  • Reboot - 8 examples
  • Tables - 2 examples
  • Typography - 12 examples
  • Forms > Check Radios - 17 examples
  • Forms > Floating Labels - 8 examples
  • Forms > Form Control - 9 examples
  • Forms > Input Group - 11 examples
  • Forms > Layout - 10 examples
  • Forms > Overview - 4 examples
  • Forms > Range - 4 examples
  • Forms > Select - 5 examples
  • Forms > Validation - 6 examples
    • Custom validation doesn't work because of the missing JS explained just after
    • Tooltips doesn't work (see Tooltips section probably)
  • Helpers > Clearfix - 1 example
  • Helpers > Colored links - 1 example
  • Helpers > Ratio - 4 examples
  • Helpers > Stacks - 6 examples
  • Helpers > Stretched Link - 4 examples
  • Helpers > Text Truncation - 1 example
  • Helpers > Vertical rule - 3 examples
  • Helpers > Visually hidden - 1 example
  • Layout > Columns - 13 examples
    • Issues with the rendering because of .bd-example-row-flex-cols .row rules
  • Layout > CSS Grid - 15 examples
    • Issues with the rendering because of .bd-example-cssgrid .grid > *
  • Layout > Grid - 15 examples
    • Issues with the rendering because of .bd-example-row .row > .col, .bd-example-row .row > [class^="col-"]
  • Layout > Gutters - 6 examples
    • Some issues with the rendering of some examples because of .bd-example-row .row > .col, .bd-example-row .row > [class^="col-"]
  • Utilities > Background - 3 examples
  • Utilities > Borders - 8 examples
    • Issues with rendering because of .bd-example-border-utils [class^="border"] specific rule
  • Utilities > Colors - 3 examples
  • Utilities > Display - 4 examples
  • Utilities > Flex - 12 examples
    • Some issues with the rendering because of .bd-example specific rule
  • Utilities > Float - 2 examples
  • Utilities > Interactions - 2 examples
  • Utilities > Position - 5 examples
    • Issues with rendering because of .bd-example-position-utils .position-absolute specific rule
  • Utilities > Shadow - 1 example
  • Utilities > Sizing - 4 examples
  • Utilities > Spacing - 1 example
  • Utilities > Text - 11 examples
  • Utilities > Vertical Align - 2 examples