Skip to content

Commit 38185f2

Browse files
mrholekmrholek
committed
feat: add position property
1 parent 438381e commit 38185f2

File tree

3 files changed

+105
-3
lines changed

3 files changed

+105
-3
lines changed

‎docs/4.0/api/CBadge.api.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
| **className** | A string of all className you want applied to the component. | `string` | - |
44
| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `{'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string}` | - |
55
| **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string | ComponentClass<any, any> | FunctionComponent<any>` | 'span' |
6+
| **position** | Position badge in one of the corners of a link or button. | `'top-start' | 'top-end' | 'bottom-end' | 'botttom-start'` | - |
67
| **shape** | Select the shape of the component. | `'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string` | - |
78
| **size** | Size the component small. | `'sm'` | - |
89
| **textColor** | Sets the text color of the component to one of CoreUI’s themed colors. | `'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | string` | - |

‎docs/4.0/components/badge.mdx

Lines changed: 80 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { CBadge, CButton } from './../../../src/index.ts'
1313

1414
Badge component scales to suit the size of the parent element by using relative font sizing and `em` units.
1515

16-
## Basic usage
16+
### Basic usage
1717

1818
<Example>
1919
<h1>Example heading <CBadge color="secondary">New</CBadge></h1>
@@ -65,6 +65,85 @@ Unless the context is clear, consider including additional context with a visual
6565
</CButton>
6666
```
6767

68+
### Positioned
69+
70+
Use `position` prop to modify a component and position it in the corner of a link or button.
71+
72+
<Example>
73+
<CButton color="primary" className="position-relative">
74+
Profile
75+
<CBadge color="danger" position="top-start" shape="rounded-pill">
76+
99+ <span className="visually-hidden">unread messages</span>
77+
</CBadge>
78+
</CButton>
79+
<CButton color="primary" className="position-relative ms-1">
80+
Profile
81+
<CBadge color="danger" position="top-end" shape="rounded-pill">
82+
99+ <span className="visually-hidden">unread messages</span>
83+
</CBadge>
84+
</CButton>
85+
<br/>
86+
<CButton color="primary" className="position-relative ">
87+
Profile
88+
<CBadge color="danger" position="bottom-start" shape="rounded-pill">
89+
99+ <span className="visually-hidden">unread messages</span>
90+
</CBadge>
91+
</CButton>
92+
<CButton color="primary" className="position-relative ms-1">
93+
Profile
94+
<CBadge color="danger" position="bottom-end" shape="rounded-pill">
95+
99+ <span className="visually-hidden">unread messages</span>
96+
</CBadge>
97+
</CButton>
98+
</Example>
99+
100+
```jsx
101+
<CButton color="primary" className="position-relative">
102+
Profile
103+
<CBadge color="danger" position="top-start" shape="rounded-pill">
104+
99+ <span className="visually-hidden">unread messages</span>
105+
</CBadge>
106+
</CButton>
107+
<CButton color="primary" className="position-relative">
108+
Profile
109+
<CBadge color="danger" position="top-end" shape="rounded-pill">
110+
99+ <span className="visually-hidden">unread messages</span>
111+
</CBadge>
112+
</CButton>
113+
<CButton color="primary" className="position-relative">
114+
Profile
115+
<CBadge color="danger" position="bottom-start" shape="rounded-pill">
116+
99+ <span className="visually-hidden">unread messages</span>
117+
</CBadge>
118+
</CButton>
119+
<CButton color="primary" className="position-relative">
120+
Profile
121+
<CBadge color="danger" position="bottom-end" shape="rounded-pill">
122+
99+ <span className="visually-hidden">unread messages</span>
123+
</CBadge>
124+
</CButton>
125+
```
126+
127+
You can also create more generic indicators without a counter using a few more utilities.
128+
129+
<Example>
130+
<CButton color="primary" className="position-relative">
131+
Profile
132+
<CBadge className="border border-light p-2" color="danger" position="top-end" shape="rounded-circle">
133+
<span className="visually-hidden">New alerts</span>
134+
</CBadge>
135+
</CButton>
136+
</Example>
137+
138+
```jsx
139+
<CButton color="primary" className="position-relative">
140+
Profile
141+
<CBadge className="border border-light p-2" color="danger" position="top-end" shape="rounded-circle">
142+
<span className="visually-hidden">New alerts</span>
143+
</CBadge>
144+
</CButton>
145+
```
146+
68147
## Contextual variations
69148

70149
Add any of the below-mentioned `color` props to modify the presentation of a badge.

‎src/components/badge/CBadge.tsx

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,12 @@ export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanEle
2828
* @default 'span'
2929
*/
3030
component?: string | ElementType
31+
/**
32+
* Position badge in one of the corners of a link or button.
33+
*
34+
* @type 'top-start' | 'top-end' | 'bottom-end' | 'botttom-start'
35+
*/
36+
position?: 'top-start' | 'top-end' | 'bottom-end' | 'botttom-start'
3137
/**
3238
* Select the shape of the component. [docs]
3339
*
@@ -49,15 +55,30 @@ export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanEle
4955
}
5056
export const CBadge = forwardRef<HTMLDivElement | HTMLSpanElement, CBadgeProps>(
5157
(
52-
{ children, className, color, component: Component = 'span', shape, size, textColor, ...rest },
58+
{
59+
children,
60+
className,
61+
color,
62+
component: Component = 'span',
63+
position,
64+
shape,
65+
size,
66+
textColor,
67+
...rest
68+
},
5369
ref,
5470
) => {
5571
const _className = classNames(
5672
'badge',
5773
{
5874
[`bg-${color}`]: color,
59-
[`text-${textColor}`]: textColor,
75+
'position-absolute translate-middle': position,
76+
'top-0': position?.includes('top'),
77+
'top-100': position?.includes('bottom'),
78+
'start-100': position?.includes('end'),
79+
'start-0': position?.includes('start'),
6080
[`badge-${size}`]: size,
81+
[`text-${textColor}`]: textColor,
6182
},
6283
shape,
6384
className,
@@ -76,6 +97,7 @@ CBadge.propTypes = {
7697
className: PropTypes.string,
7798
color: colorPropType,
7899
component: PropTypes.string,
100+
position: PropTypes.oneOf(['top-start', 'top-end', 'bottom-end', 'botttom-start']),
79101
shape: shapePropType,
80102
size: PropTypes.oneOf(['sm']),
81103
textColor: textColorsPropType,

0 commit comments

Comments
 (0)