v6: Chips & Badges updates, remove Badges example page (#42400)

* Rename chip-input to chips

* More edits

* Remove the badges example

Author: mdo

js/index.js

@@ -17,7 +17,7 @@ export { default as NavOverflow } from './src/nav-overflow.js'
 export { default as Drawer } from './src/drawer.js'
 export { default as Strength } from './src/strength.js'
 export { default as OtpInput } from './src/otp-input.js'
-export { default as ChipInput } from './src/chip-input.js'
+export { default as Chips } from './src/chips.js'
 export { default as Popover } from './src/popover.js'
 export { default as ScrollSpy } from './src/scrollspy.js'
 export { default as Tab } from './src/tab.js'

js/src/chip-input.js js/src/chips.jsjs/src/chip-input.js renamed to js/src/chips.js

@@ -1,6 +1,6 @@
 /**
  * --------------------------------------------------------------------------
- * Bootstrap chip-input.js
+ * Bootstrap chips.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -13,8 +13,8 @@ import SelectorEngine from './dom/selector-engine.js'
  * Constants
  */
 
-const NAME = 'chipInput'
-const DATA_KEY = 'bs.chip-input'
+const NAME = 'chips'
+const DATA_KEY = 'bs.chips'
 const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
 
@@ -23,7 +23,7 @@ const EVENT_REMOVE = `remove${EVENT_KEY}`
 const EVENT_CHANGE = `change${EVENT_KEY}`
 const EVENT_SELECT = `select${EVENT_KEY}`
 
-const SELECTOR_DATA_CHIP_INPUT = '[data-bs-chip-input]'
+const SELECTOR_DATA_CHIPS = '[data-bs-chips]'
 const SELECTOR_GHOST_INPUT = '.form-ghost'
 const SELECTOR_CHIP = '.chip'
 const SELECTOR_CHIP_DISMISS = '.chip-dismiss'
@@ -58,7 +58,7 @@ const DefaultType = {
  * Class definition
  */
 
-class ChipInput extends BaseComponent {
+class Chips extends BaseComponent {
   constructor(element, config) {
     super(element, config)
 
@@ -625,9 +625,9 @@ class ChipInput extends BaseComponent {
  */
 
 EventHandler.on(document, `DOMContentLoaded${EVENT_KEY}${DATA_API_KEY}`, () => {
-  for (const element of SelectorEngine.find(SELECTOR_DATA_CHIP_INPUT)) {
-    ChipInput.getOrCreateInstance(element)
+  for (const element of SelectorEngine.find(SELECTOR_DATA_CHIPS)) {
+    Chips.getOrCreateInstance(element)
   }
 })
 
-export default ChipInput
+export default Chips

site/data/examples.yml

@@ -55,8 +55,6 @@
       description: 'Extend list groups with utilities and custom styles for any content.'
     - name: Dialogs
       description: 'Transform dialogs to serve any purpose, from feature tours to confirmations.'
-    - name: Badges
-      description: 'Make badges work with custom inner HTML and new looks.'
     - name: Breadcrumbs
       description: 'Integrate custom icons and create stepper components.'
     - name: Buttons

site/data/sidebar.yml

@@ -88,7 +88,7 @@
     - title: Form adorn
       meta:
         - added: 6.0.0
-    - title: Chip input
+    - title: Chips
       meta:
         - added: 6.0.0
     - title: Combobox

site/src/assets/examples/badges/badges.css

@@ -1,15 +1,17 @@
 ---
 title: Badges
-description: Documentation and examples for badges, our small count and labeling component.
+description: Small components for indicating status and counts, or labelling items.
 toc: true
 css_layer: components
 ---
 
 import { getData } from '@libs/data'
 
-## Example
+## Examples
 
-Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. Badges come in three variants: solid (default), subtle, and outline.
+Badges are tiny, static display components used for adding context to other elements. They can be used as part of navigation, buttons, and more to provide a counter or label. Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
+
+Badges come in three variants: solid (default), subtle, and outline.
 
 <Example code={`<span class="badge theme-primary">New</span>
   <span class="badge badge-subtle theme-primary">New</span>