+
+export const TagDefault: Story = {
+ render: args => {
+ return (
+
+
+
+ )
+ },
+}
+
+export const TagPrepend: Story = {
+ render: args => {
+ return (
+
+ } {...args} />
+
+ )
+ },
+}
+
+export const TagWithCloseButton: Story = {
+ render: args => {
+ return (
+
+ }
+ closeBtnProps={{
+ onClick: () => alert('Close triggered!'),
+ }}
+ {...args}
+ />
+
+ )
+ },
+}
diff --git a/services/web/frontend/stories/ui/tag-bs5.stories.tsx b/services/web/frontend/stories/ui/tag-bs5.stories.tsx
new file mode 100644
index 0000000000..b1d87edd19
--- /dev/null
+++ b/services/web/frontend/stories/ui/tag-bs5.stories.tsx
@@ -0,0 +1,60 @@
+import Icon from '@/shared/components/icon'
+import Tag from '@/features/ui/components/bootstrap-5/tag'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta = {
+ title: 'Shared / Components / Tag / Bootstrap 5',
+ component: Tag,
+ parameters: {
+ bootstrap5: true,
+ },
+ args: {
+ children: 'Tag',
+ },
+ argTypes: {
+ prepend: {
+ table: {
+ disable: true,
+ },
+ },
+ className: {
+ table: {
+ disable: true,
+ },
+ },
+ closeBtnProps: {
+ table: {
+ disable: true,
+ },
+ },
+ },
+}
+export default meta
+
+type Story = StoryObj
+
+export const TagDefault: Story = {
+ render: args => {
+ return
+ },
+}
+
+export const TagPrepend: Story = {
+ render: args => {
+ return } {...args} />
+ },
+}
+
+export const TagWithCloseButton: Story = {
+ render: args => {
+ return (
+ }
+ closeBtnProps={{
+ onClick: () => alert('Close triggered!'),
+ }}
+ {...args}
+ />
+ )
+ },
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss b/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss
index 4971d2ae66..f6c0fa999d 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss
@@ -1,13 +1,16 @@
.badge {
display: inline-flex;
- align-items: center;
- overflow: hidden;
+ align-items: stretch;
+ max-width: 100%;
line-height: var(--line-height-01);
+ padding: 0 var(--bs-badge-padding-x);
}
.badge-prepend {
margin-left: calc($spacing-01 / -2);
margin-right: $spacing-01;
+ display: flex;
+ align-items: center;
}
.badge-close {
@@ -16,15 +19,14 @@
display: flex;
align-items: center;
justify-content: center;
+ flex-shrink: 0;
- // a random number that would cause the close button to expand enough
- // so that it won't be affected by badge's padding
- $expand: 100px;
-
- padding: $expand $spacing-01;
- margin: (-$expand) (-$spacing-02) (-$expand) $spacing-02;
- user-select: none;
+ padding: 0 $spacing-02;
+ margin: 0 (-$spacing-02) 0 $spacing-02;
+ border-top-right-radius: inherit;
+ border-bottom-right-radius: inherit;
color: inherit;
+ user-select: none;
.badge-close-icon {
font-size: $font-size-base;
@@ -34,3 +36,17 @@
background-color: var(--neutral-40);
}
}
+
+.badge-content {
+ @include text-truncate;
+ padding: var(--bs-badge-padding-y) 0;
+}
+
+.badge-tag {
+ @include body-sm;
+ color: $dark;
+
+ &:hover {
+ background-color: var(--neutral-30) !important;
+ }
+}
diff --git a/services/web/frontend/stylesheets/components/badge.less b/services/web/frontend/stylesheets/components/badge.less
index 762cad8964..4190215c5b 100644
--- a/services/web/frontend/stylesheets/components/badge.less
+++ b/services/web/frontend/stylesheets/components/badge.less
@@ -1,10 +1,10 @@
-.badge-bs3 {
+.badge-tag-bs3 {
@size: 24px;
@padding: 4px;
display: inline-flex;
align-items: center;
- overflow: hidden;
height: @size;
+ max-width: 100%;
min-height: @size;
padding: 0 @padding;
white-space: nowrap;
@@ -26,10 +26,14 @@
margin-left: 4px;
font-size: 20px;
height: @size;
+ line-height: 1;
display: flex;
align-items: center;
justify-content: center;
+ flex-shrink: 0;
margin-right: -@padding;
+ border-top-right-radius: inherit;
+ border-bottom-right-radius: inherit;
color: inherit;
&:hover {
@@ -37,13 +41,7 @@
}
}
- &-sm {
- @size-sm: 20px;
- height: @size-sm;
- font-size: @font-size-extra-small;
- .badge-bs3-close {
- width: @size-sm;
- font-size: @size-sm;
- }
+ &-content {
+ .text-overflow();
}
}