diff --git a/js/index.js b/js/index.js index 4c7f8ebd5681..7030887c229d 100644 --- a/js/index.js +++ b/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' diff --git a/js/src/chip-input.js b/js/src/chips.js similarity index 97% rename from js/src/chip-input.js rename to js/src/chips.js index 925dd9068dfe..1e165f635c0b 100644 --- a/js/src/chip-input.js +++ b/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 diff --git a/site/data/examples.yml b/site/data/examples.yml index cf6bccf8078f..0cc0167a9eaf 100644 --- a/site/data/examples.yml +++ b/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 diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 5170b4c278f3..b3036aa12068 100644 --- a/site/data/sidebar.yml +++ b/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 diff --git a/site/src/assets/examples/badges/badges.css b/site/src/assets/examples/badges/badges.css deleted file mode 100644 index b6ce0f5b82ac..000000000000 --- a/site/src/assets/examples/badges/badges.css +++ /dev/null @@ -1,3 +0,0 @@ -.badge > a { - color: inherit; -} diff --git a/site/src/assets/examples/badges/index.astro b/site/src/assets/examples/badges/index.astro deleted file mode 100644 index 182e3cdcf382..000000000000 --- a/site/src/assets/examples/badges/index.astro +++ /dev/null @@ -1,146 +0,0 @@ ---- -export const title = 'Badges' -export const extra_css = ['badges.css'] ---- - - - - - - - -
- Primary - Secondary - Success - Danger - Warning - Info - Light - Dark -
- -
- -
- Primary - Secondary - Success - Danger - Warning - Info - Light - Dark -
- -
- -
- Primary - Secondary - Success - Danger - Warning - Info - Light - Dark -
- -
- -
- - Primary - - - Secondary - - - Success - - - Danger - - - Warning - - - Info - - - Light - - - Dark - -
- -
- -
- - Primary 1 - - - - Primary 2 - - - - Primary 3 - - -
- -
- -
- - - Primary - - - - - - Secondary - - - - - - Success - - - - - - Danger - - - - - - Warning - - - - - - Info - - - - - - Light - - - - - - Dark - - - -
diff --git a/site/src/content/docs/components/badge.mdx b/site/src/content/docs/components/badge.mdx index 48a916322c8d..c31ce687d9e0 100644 --- a/site/src/content/docs/components/badge.mdx +++ b/site/src/content/docs/components/badge.mdx @@ -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. New New diff --git a/site/src/content/docs/forms/chip-input.mdx b/site/src/content/docs/forms/chips.mdx similarity index 80% rename from site/src/content/docs/forms/chip-input.mdx rename to site/src/content/docs/forms/chips.mdx index c14e9b905c82..5c90cd563d2e 100644 --- a/site/src/content/docs/forms/chip-input.mdx +++ b/site/src/content/docs/forms/chips.mdx @@ -1,6 +1,6 @@ --- -title: Chip input -description: Create tag-like inputs for multi-value fields like skills, categories, or email recipients using themed chips. +title: Chips +description: Small interactive elements representing entities like people, places, tags, or values. Combine with inputs for multi-value fields like skills, categories, or email recipients using themed chips. toc: true css_layer: forms js: required @@ -10,9 +10,10 @@ import { getData } from '@libs/data' ## Overview -Chips are similar to badges, but they have a single size and more defined visual styles useful for indicating state and selection. +Chips are small interactive elements representing entities. They can be used to group and select values in forms or other interactive contexts. They're similar to the older [Badges]([[docsref:/components/badge]]) component, but have some meaningful differences. -- Chips are statically sized—they don’t scale with the parent element by default. +- Chips are interactive elements, not static like Badges. +- Chips have one size—they don't scale with the parent `font-size` like Badges. - Chips can have icons, avatars, and dismiss buttons. - Chips can be themed, individually or as a group on the parent container. By default, chips use the `subtle` and `text` theme tokens, while active state uses the `bg` and `contrast` tokens. - Chips can be active or disabled. @@ -21,7 +22,7 @@ Chips are similar to badges, but they have a single size and more defined visual See examples of all of this in action below. -## Basic chips +## Chips Use `.chip` for standalone chips. Add `.chip-icon` for a leading icon, `.chip-img` for an image like an avatar, and `.chip-dismiss` for a remove button. Note that we use an inline SVG for the dismiss button icon—you can modify this as needed. JavaScript users can use the `dismissIcon` option for passing a custom SVG. @@ -68,9 +69,11 @@ Add `.active` to make chips use the solid appearance (bg/contrast). This is usef ## Chip input -Wrap chips and a ghost input in `.chip-input` to create a tag input field. Add `data-bs-chip-input` to enable JavaScript behavior. Chips are grayscale by default, with primary blue for active states, but you can apply any theme color to the container so that chips within inherit the color of your choosing. +Wrap chips and a ghost input in `.chip-input` to create a tag input field. Add `data-bs-chips` to enable JavaScript behavior. Chips are grayscale by default, with primary blue for active states, but you can apply any theme color to the container so that chips within inherit the color of your choosing. - +Type into the input below and press Enter or , to add new chips. Use the Backspace or Delete keys to remove chips. See the [Keyboard behavior](#keyboard-behavior) section for more details. + + JavaScript @@ -85,13 +88,13 @@ Wrap chips and a ghost input in `.chip-input` to create a tag input field. Add ` Add a `.theme-*` class to the `.chip-input` container to apply a theme color to all chips within. - + Approved Verified -
+
Bug Critical @@ -99,7 +102,7 @@ Add a `.theme-*` class to the `.chip-input` container to apply a theme color to You can also individually apply a theme color to a chip by adding a `.theme-*` class to the chip element. - + Bug Critical @@ -109,7 +112,7 @@ You can also individually apply a theme color to a chip by adding a `.theme-*` c Start with just the ghost input—chips are created as users type. - +
`} /> @@ -119,7 +122,7 @@ Use a form label for better accessibility. -
+
React
`} /> -## Disabled +### Disabled Disable the ghost input to prevent adding new chips. Existing chips become non-interactive. - + Read only