feat: add Bootstrap compatibility and Bootstrap theme

mrholek · mrholek · commit 5a86f477be81 · 2024-02-09T17:34:04.000+01:00
diff --git a/build/postcss.config.mjs b/build/postcss.config.mjs
@@ -11,7 +11,8 @@ export default context => {
       autoprefixer: {
         cascade: false
       },
-      'postcss-combine-duplicated-selectors': {}
+      'postcss-combine-duplicated-selectors': {},
+      rtlcss: context.env === 'RTL'
     }
   }
 }
diff --git a/docs/content/components/alerts.md b/docs/content/components/alerts.md
@@ -145,6 +145,8 @@ When an alert is dismissed, the element is completely removed from the page stru
 
 ## JavaScript behavior
 
+{{< bootstrap-compatibility >}}
+
 ### Initialize
 
 Initialize elements as alerts
diff --git a/docs/content/components/carousel.md b/docs/content/components/carousel.md
@@ -294,6 +294,8 @@ The transition duration of `.carousel-item` can be changed with the `$carousel-t
 
 ## Usage
 
+{{< bootstrap-compatibility >}}
+
 ### Via data attributes
 
 Utilize data attributes to control the position of the carousel. `data-coreui-slide` allows the keywords `prev` or `next`, which changes the slide position corresponding to its current position. Alternatively, use `data-coreui-slide-to` to pass a raw slide index to the carousel `data-coreui-slide-to="2"`, which moves the slide position to a particular index beginning with `0`.
diff --git a/docs/content/components/collapse.md b/docs/content/components/collapse.md
@@ -106,6 +106,8 @@ If your control element is targeting a single collapsible element – i.e., the
 Note that CoreUI for Bootstrap's current implementation does not cover the various *optional* keyboard interactions described in the [WAI-ARIA Authoring Practices 1.1 accordion pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) - you will need to include these yourself with custom JavaScript.
 ## Usage
 
+{{< bootstrap-compatibility >}}
+
 The collapse plugin utilizes a few classes to handle the heavy lifting:
 
 - `.collapse` hides the content
diff --git a/docs/content/components/dropdowns.md b/docs/content/components/dropdowns.md
@@ -997,6 +997,8 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
 
 ## Usage
 
+{{< bootstrap-compatibility >}}
+
 Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent `.dropdown-menu`. The `data-coreui-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.
 
 {{< callout info >}}
diff --git a/docs/content/components/list-group.md b/docs/content/components/list-group.md
@@ -303,6 +303,8 @@ And if you want `<label>`s as the `.list-group-item` for large hit areas, you ca
 
 ## JavaScript behavior
 
+{{< bootstrap-compatibility >}}
+
 Use the tab JavaScript plugin—include it individually or through the compiled `coreui.js` file—to extend our list group to create tabbable panes of local content.
 
 <div class="docs-example" role="tabpanel">
diff --git a/docs/content/components/modal.md b/docs/content/components/modal.md
@@ -757,6 +757,8 @@ Another override is the option to pop up a modal that covers the user viewport,
 
 ## Usage
 
+{{< bootstrap-compatibility >}}
+
 The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also overrides default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.
 
 ### Via data attributes
diff --git a/docs/content/components/navs-tabs.md b/docs/content/components/navs-tabs.md
@@ -349,6 +349,8 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 
 ## JavaScript behavior
 
+{{< bootstrap-compatibility >}}
+
 Use the tab JavaScript plugin—include it individually or through the compiled `coreui.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
 
 Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `<button>` elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.
diff --git a/docs/content/components/offcanvas.md b/docs/content/components/offcanvas.md
@@ -250,6 +250,8 @@ Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-l
 
 ## Usage
 
+{{< bootstrap-compatibility >}}
+
 The offcanvas plugin utilizes a few classes and attributes to handle the heavy lifting:
 
 - `.offcanvas` hides the content
diff --git a/docs/content/components/popovers.md b/docs/content/components/popovers.md
@@ -133,6 +133,8 @@ For disabled popover triggers, you may also prefer `data-coreui-trigger="hover f
 
 ## Usage
 
+{{< bootstrap-compatibility >}}
+
 Enable popovers via JavaScript:
 
 ```js
diff --git a/docs/content/components/scrollspy.md b/docs/content/components/scrollspy.md
@@ -227,6 +227,8 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
 
 ## Usage
 
+{{< bootstrap-compatibility >}}
+
 ### Via data attributes
 
 To easily add scrollspy behavior to your topbar navigation, add `data-coreui-spy="scroll"` to the element you want to spy on (most typically this would be the `<body>`). Then add the `data-coreui-target` attribute with the ID or class of the parent element of any Bootstrap `.nav` component.
diff --git a/docs/content/components/sidebar.md b/docs/content/components/sidebar.md
@@ -239,6 +239,8 @@ By default placement for sidebar components is on the left of the viewport, but
 
 ## JavaScript behavior
 
+{{< bootstrap-compatibility >}}
+
 ### Methods
 
 You can create a sidebar instance with the sidebar constructor, for example:
diff --git a/docs/content/components/toasts.md b/docs/content/components/toasts.md
@@ -315,8 +315,11 @@ When using `autohide: false`, you must add a close button to allow users to dism
 {{< /example >}}
 
 While technically it's possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long [`delay` timeout](#options), keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don't receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with `autohide: false`.
+
 ## Usage
 
+{{< bootstrap-compatibility >}}
+
 Initialize toasts via JavaScript:
 
 ```js
diff --git a/docs/content/components/tooltips.md b/docs/content/components/tooltips.md
@@ -123,6 +123,8 @@ With an SVG:
 
 ## Usage
 
+{{< bootstrap-compatibility >}}
+
 The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
 
 Trigger the tooltip via JavaScript:
diff --git a/docs/content/getting-started/introduction.md b/docs/content/getting-started/introduction.md
@@ -79,6 +79,8 @@ Curious which components explicitly require our JavaScript and Popper? Click the
 
 CoreUI enhances Bootstrap projects by adding advanced components and features, offering a smooth upgrade with minimal adjustments. It retains Bootstrap's familiar structure while introducing new possibilities for UI development.
 
+{{< bootstrap-compatibility >}}
+
 #### CSS
 
 Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
diff --git a/docs/layouts/partials/stylesheet.html b/docs/layouts/partials/stylesheet.html
@@ -10,7 +10,7 @@
 {{- end -}}
 
 {{- else -}}
-<link href="/dist/css/themes/bootstrap/bootstrap{{ if eq .Page.Params.direction "rtl" }}.rtl{{ end }}.css" rel="stylesheet">
+<link href="/dist/css/coreui{{ if eq .Page.Params.direction "rtl" }}.rtl{{ end }}.css" rel="stylesheet">
 {{- end }}
 
 {{- if (ne .Page.Layout "examples") }}
diff --git a/docs/layouts/shortcodes/bootstrap-compatibility.html b/docs/layouts/shortcodes/bootstrap-compatibility.html
@@ -0,0 +1,10 @@
+<div class="docs-callout docs-callout-warning">
+  <p>
+    <strong>Heads up!</strong> In our documentation, all examples show <a href="{{ .Site.BaseURL }}getting-started/introduction/#standalone-library">standard CoreUI implementation</a>. If you are using a <a href="{{ .Site.BaseURL }}getting-started/introduction/#bootstrap-replacement">Bootstrap-compatible</a> version of CoreUI, remember to use the following changes:
+    <ul>
+      <li>In the constructor, please use <strong>bootstrap</strong> instead of <strong>coreui</strong>. For example, <code>new bootstrap.Alert(...)</code> instead of <code>new coreui.Alert(...)</code></li>
+      <li>In events, please use <strong>bs</strong> instead of <strong>coreui</strong>, for example <code>close.bs.alert</code> instead of <code>close.coreui.alert</code></li>
+      <li>In data attributes, please use <strong>bs</strong> instead of <strong>coreui</strong>. For example, <code>data-bs-toggle="..."</code> instead of <code>data-coreui-toggle="..."</code></li>
+    </ul>
+  </p>
+</div>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,8 +19,9 @@
   "scripts": {
     "start": "npm-run-all --parallel watch docs-serve",
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
-    "css": "npm-run-all css-compile css-prefix css-minify",
+    "css": "npm-run-all css-compile css-prefix css-rtl css-minify",
     "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/",
+    "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css/themes/bootstrap/\" --ext \".rtl.css\" \"dist/css/themes/bootstrap/*.css\" \"!dist/css/themes/bootstrap/*.min.css\" \"!dist/css/themes/bootstrap/*.rtl.css\"",
     "css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
     "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache",
     "css-lint-vars": "fusv scss/ docs/assets/scss/",
@@ -108,6 +109,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
     "autoprefixer": "^10.4.16",
+    "bootstrap": "^5.3.2",
     "bundlewatch": "^0.3.3",
     "clean-css-cli": "^5.6.2",
     "cross-env": "^7.0.3",

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,8 @@ export default context => {`
`11`	`11`	`autoprefixer: {`
`12`	`12`	`cascade: false`
`13`	`13`	`},`
`14`		`- 'postcss-combine-duplicated-selectors': {}`
	`14`	`+ 'postcss-combine-duplicated-selectors': {},`
	`15`	`+ rtlcss: context.env === 'RTL'`
`15`	`16`	`}`
`16`	`17`	`}`
`17`	`18`	`}`