Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@fluentui/react-badge

Package Overview
Dependencies
Maintainers
11
Versions
934
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fluentui/react-badge - npm Package Compare versions

Comparing version 0.2.0 to 9.0.0-alpha.1

35

CHANGELOG.json

@@ -5,3 +5,36 @@ {

{
"date": "Mon, 22 Feb 2021 12:21:30 GMT",
"date": "Wed, 24 Feb 2021 00:02:34 GMT",
"tag": "@fluentui/react-badge_v9.0.0-alpha.1",
"version": "9.0.0-alpha.1",
"comments": {
"prerelease": [
{
"comment": "feat(Badge): update Badge API",
"author": "junioassuncaocharles@gmail.com",
"commit": "df7def5198509979cbc82922f07ec7e623cd1e1d",
"package": "@fluentui/react-badge"
},
{
"comment": "bump version to v9",
"author": "olfedias@microsoft.com",
"commit": "74da15f2f1fb10fe089fcaef24a47ac5dba89ad2",
"package": "@fluentui/react-badge"
},
{
"comment": "feat(Badge): move spec",
"author": "junioassuncaocharles@gmail.com",
"commit": "6941c07f70fb984dd3c6bbf04fe05198c2979a52",
"package": "@fluentui/react-badge"
},
{
"comment": "remove dependency on react-hooks",
"author": "olfedias@microsoft.com",
"commit": "4c3186d117f7bc98a41aff879938711ec636bc34",
"package": "@fluentui/react-badge"
}
]
}
},
{
"date": "Mon, 22 Feb 2021 12:26:22 GMT",
"tag": "@fluentui/react-badge_v0.2.0",

@@ -8,0 +41,0 @@ "version": "0.2.0",

16

CHANGELOG.md
# Change Log - @fluentui/react-badge
This log was last generated on Mon, 22 Feb 2021 12:21:30 GMT and should not be manually modified.
This log was last generated on Wed, 24 Feb 2021 00:02:34 GMT and should not be manually modified.
<!-- Start content -->
## [9.0.0-alpha.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-alpha.1)
Wed, 24 Feb 2021 00:02:34 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v0.2.0..@fluentui/react-badge_v9.0.0-alpha.1)
### Changes
- feat(Badge): update Badge API ([PR #17087](https://github.com/microsoft/fluentui/pull/17087) by junioassuncaocharles@gmail.com)
- bump version to v9 ([PR #17093](https://github.com/microsoft/fluentui/pull/17093) by olfedias@microsoft.com)
- feat(Badge): move spec ([PR #16644](https://github.com/microsoft/fluentui/pull/16644) by junioassuncaocharles@gmail.com)
- remove dependency on react-hooks ([PR #17094](https://github.com/microsoft/fluentui/pull/17094) by olfedias@microsoft.com)
## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v0.2.0)
Mon, 22 Feb 2021 12:21:30 GMT
Mon, 22 Feb 2021 12:26:22 GMT

@@ -11,0 +23,0 @@ ### Minor changes

31

dist/react-badge.d.ts

@@ -15,3 +15,3 @@ import { ComponentProps } from '@fluentui/react-utilities';

*/
export declare type BadgeAppearances = 'filled' | 'outline' | 'ghost' | 'tint';
export declare type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';

@@ -24,10 +24,8 @@ /**

* A Badge can be sized.
* @defaultvalue medium
*/
size?: SizeValue;
size?: BadgeSize;
/**
* A Badge can have status styles variants
*/
status?: BadgeStatus;
/**
* A Badge can be square, circular or rounded
* @defaultvalue circular
*/

@@ -37,4 +35,5 @@ shape?: BadgeShape;

* A Badge can be filled, outline, ghost, inverted
* @defaultvalue filled
*/
appearance?: BadgeAppearances;
appearance?: BadgeAppearance;
/**

@@ -46,2 +45,3 @@ * Icon slot

* Position for Icon to be rendered
* @defaultvalue before
*/

@@ -64,2 +64,7 @@ iconPosition?: 'before' | 'after';

*/
export declare type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
/**
* {@docCategory Badge}
*/
export declare interface BadgeState extends BadgeProps {

@@ -76,17 +81,7 @@ /**

/**
* {@docCategory Badge}
*/
export declare type BadgeStatus = 'success' | 'warning' | 'severe' | 'accent' | 'danger' | 'important' | 'informative' | 'subtle';
export declare const renderBadge: (state: BadgeState) => JSX.Element;
/**
* {@docCategory Badge}
* Returns the props and state required to render the component
*/
export declare type SizeValue = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
/**
* Given user props, returns state and render function for a Badge.
*/
export declare const useBadge: (props: BadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: BadgeProps | undefined) => BadgeState;

@@ -93,0 +88,0 @@

16

etc/react-badge.api.md

@@ -16,12 +16,11 @@ ## API Report File for "@fluentui/react-badge"

// @public (undocumented)
export type BadgeAppearances = 'filled' | 'outline' | 'ghost' | 'tint';
export type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';
// @public (undocumented)
export interface BadgeProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
appearance?: BadgeAppearances;
appearance?: BadgeAppearance;
icon?: ShorthandProps<HTMLElement>;
iconPosition?: 'before' | 'after';
shape?: BadgeShape;
size?: SizeValue;
status?: BadgeStatus;
size?: BadgeSize;
}

@@ -36,2 +35,5 @@

// @public (undocumented)
export type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
// @public (undocumented)
export interface BadgeState extends BadgeProps {

@@ -43,10 +45,4 @@ icon?: ObjectShorthandProps<HTMLSpanElement>;

// @public (undocumented)
export type BadgeStatus = 'success' | 'warning' | 'severe' | 'accent' | 'danger' | 'important' | 'informative' | 'subtle';
// @public (undocumented)
export const renderBadge: (state: BadgeState) => JSX.Element;
// @public (undocumented)
export type SizeValue = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
// @public

@@ -53,0 +49,0 @@ export const useBadge: (props: BadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: BadgeProps | undefined) => BadgeState;

20

lib-amd/components/Badge/Badge.types.d.ts

@@ -6,14 +6,10 @@ import * as React from 'react';

*/
export declare type SizeValue = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
export declare type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
/**
* {@docCategory Badge}
*/
export declare type BadgeStatus = 'success' | 'warning' | 'severe' | 'accent' | 'danger' | 'important' | 'informative' | 'subtle';
export declare type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';
/**
* {@docCategory Badge}
*/
export declare type BadgeAppearances = 'filled' | 'outline' | 'ghost' | 'tint';
/**
* {@docCategory Badge}
*/
export declare type BadgeShape = 'rounded' | 'square' | 'circular';

@@ -26,10 +22,8 @@ /**

* A Badge can be sized.
* @defaultvalue medium
*/
size?: SizeValue;
size?: BadgeSize;
/**
* A Badge can have status styles variants
*/
status?: BadgeStatus;
/**
* A Badge can be square, circular or rounded
* @defaultvalue circular
*/

@@ -39,4 +33,5 @@ shape?: BadgeShape;

* A Badge can be filled, outline, ghost, inverted
* @defaultvalue filled
*/
appearance?: BadgeAppearances;
appearance?: BadgeAppearance;
/**

@@ -48,2 +43,3 @@ * Icon slot

* Position for Icon to be rendered
* @defaultvalue before
*/

@@ -50,0 +46,0 @@ iconPosition?: 'before' | 'after';

2

lib-amd/components/Badge/useBadge.d.ts

@@ -8,4 +8,4 @@ import * as React from 'react';

/**
* Given user props, returns state and render function for a Badge.
* Returns the props and state required to render the component
*/
export declare const useBadge: (props: BadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: BadgeProps | undefined) => BadgeState;

6

lib-amd/components/Badge/useBadge.js

@@ -1,2 +0,2 @@

define(["require", "exports", "react", "@fluentui/react-utilities", "@fluentui/react-hooks"], function (require, exports, React, react_utilities_1, react_hooks_1) {
define(["require", "exports", "react", "@fluentui/react-utilities"], function (require, exports, React, react_utilities_1) {
"use strict";

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });

/**
* Given user props, returns state and render function for a Badge.
* Returns the props and state required to render the component
*/
exports.useBadge = function (props, ref, defaultProps) {
var state = mergeProps({
ref: react_hooks_1.useMergedRefs(ref, React.useRef(null)),
ref: react_utilities_1.useMergedRefs(ref, React.useRef(null)),
shape: 'circular',

@@ -17,0 +17,0 @@ size: 'medium',

35

lib-amd/components/Badge/useBadgeStyles.js

@@ -12,2 +12,3 @@ define(["require", "exports", "@fluentui/react-make-styles"], function (require, exports, react_make_styles_1) {

display: 'inline-flex',
boxSizing: 'border-box',
alignItems: 'center',

@@ -17,5 +18,5 @@ justifyContent: 'center',

borderColor: theme.alias.color.brand.brandBackground,
color: theme.global.color.white,
color: theme.alias.color.neutral.neutralForegroundInvertedAccessible,
fontWeight: theme.global.type.fontWeights.semibold,
borderWidth: '1px',
borderWidth: theme.global.strokeWidth.thin,
borderStyle: 'solid',

@@ -27,20 +28,20 @@ fontFamily: theme.global.type.fontFamilies.base,

function (s) { return s.size === 'smallest'; },
function (theme) { return ({
{
width: '6px',
height: '6px',
fontSize: '4px',
}); },
},
],
[
function (s) { return s.size === 'smaller'; },
function (theme) { return ({
{
width: '10px',
height: '10px',
fontSize: '6px',
}); },
},
],
[
function (s) { return s.size === 'small'; },
function (theme) { return ({
minWidth: '4px',
{
minWidth: '16px',
height: '16px',

@@ -51,9 +52,9 @@ paddingRight: '6px',

fontSize: '8px',
}); },
},
],
[
function (s) { return s.size === 'medium'; },
function (theme) { return ({
{
height: '20px',
minWidth: '4px',
minWidth: '20px',
gap: '4px',

@@ -63,8 +64,8 @@ paddingRight: '8px',

fontSize: '12px',
}); },
},
],
[
function (s) { return s.size === 'large'; },
function (theme) { return ({
minWidth: '8px',
{
minWidth: '24px',
height: '24px',

@@ -75,3 +76,3 @@ paddingRight: '8px',

gap: '6px',
}); },
},
],

@@ -81,3 +82,3 @@ [

function (theme) { return ({
minWidth: '8px',
minWidth: '32px',
height: '32px',

@@ -88,3 +89,3 @@ paddingRight: '12px',

fontSize: '12px',
border: '2px',
borderWidth: theme.global.strokeWidth.thick,
}); },

@@ -91,0 +92,0 @@ ],

2

lib-amd/version.js
define(["require", "exports", "@fluentui/set-version"], function (require, exports, set_version_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
set_version_1.setVersion('@fluentui/react-badge', '0.2.0');
set_version_1.setVersion('@fluentui/react-badge', '9.0.0-alpha.1');
});
//# sourceMappingURL=version.js.map

20

lib-commonjs/components/Badge/Badge.types.d.ts

@@ -6,14 +6,10 @@ import * as React from 'react';

*/
export declare type SizeValue = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
export declare type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
/**
* {@docCategory Badge}
*/
export declare type BadgeStatus = 'success' | 'warning' | 'severe' | 'accent' | 'danger' | 'important' | 'informative' | 'subtle';
export declare type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';
/**
* {@docCategory Badge}
*/
export declare type BadgeAppearances = 'filled' | 'outline' | 'ghost' | 'tint';
/**
* {@docCategory Badge}
*/
export declare type BadgeShape = 'rounded' | 'square' | 'circular';

@@ -26,10 +22,8 @@ /**

* A Badge can be sized.
* @defaultvalue medium
*/
size?: SizeValue;
size?: BadgeSize;
/**
* A Badge can have status styles variants
*/
status?: BadgeStatus;
/**
* A Badge can be square, circular or rounded
* @defaultvalue circular
*/

@@ -39,4 +33,5 @@ shape?: BadgeShape;

* A Badge can be filled, outline, ghost, inverted
* @defaultvalue filled
*/
appearance?: BadgeAppearances;
appearance?: BadgeAppearance;
/**

@@ -48,2 +43,3 @@ * Icon slot

* Position for Icon to be rendered
* @defaultvalue before
*/

@@ -50,0 +46,0 @@ iconPosition?: 'before' | 'after';

2

lib-commonjs/components/Badge/useBadge.d.ts

@@ -8,4 +8,4 @@ import * as React from 'react';

/**
* Given user props, returns state and render function for a Badge.
* Returns the props and state required to render the component
*/
export declare const useBadge: (props: BadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: BadgeProps | undefined) => BadgeState;

5

lib-commonjs/components/Badge/useBadge.js

@@ -5,3 +5,2 @@ "use strict";

var react_utilities_1 = require("@fluentui/react-utilities");
var react_hooks_1 = require("@fluentui/react-hooks");
/**

@@ -13,7 +12,7 @@ * Consts listing which props are shorthand props.

/**
* Given user props, returns state and render function for a Badge.
* Returns the props and state required to render the component
*/
exports.useBadge = function (props, ref, defaultProps) {
var state = mergeProps({
ref: react_hooks_1.useMergedRefs(ref, React.useRef(null)),
ref: react_utilities_1.useMergedRefs(ref, React.useRef(null)),
shape: 'circular',

@@ -20,0 +19,0 @@ size: 'medium',

35

lib-commonjs/components/Badge/useBadgeStyles.js

@@ -12,2 +12,3 @@ "use strict";

display: 'inline-flex',
boxSizing: 'border-box',
alignItems: 'center',

@@ -17,5 +18,5 @@ justifyContent: 'center',

borderColor: theme.alias.color.brand.brandBackground,
color: theme.global.color.white,
color: theme.alias.color.neutral.neutralForegroundInvertedAccessible,
fontWeight: theme.global.type.fontWeights.semibold,
borderWidth: '1px',
borderWidth: theme.global.strokeWidth.thin,
borderStyle: 'solid',

@@ -27,20 +28,20 @@ fontFamily: theme.global.type.fontFamilies.base,

function (s) { return s.size === 'smallest'; },
function (theme) { return ({
{
width: '6px',
height: '6px',
fontSize: '4px',
}); },
},
],
[
function (s) { return s.size === 'smaller'; },
function (theme) { return ({
{
width: '10px',
height: '10px',
fontSize: '6px',
}); },
},
],
[
function (s) { return s.size === 'small'; },
function (theme) { return ({
minWidth: '4px',
{
minWidth: '16px',
height: '16px',

@@ -51,9 +52,9 @@ paddingRight: '6px',

fontSize: '8px',
}); },
},
],
[
function (s) { return s.size === 'medium'; },
function (theme) { return ({
{
height: '20px',
minWidth: '4px',
minWidth: '20px',
gap: '4px',

@@ -63,8 +64,8 @@ paddingRight: '8px',

fontSize: '12px',
}); },
},
],
[
function (s) { return s.size === 'large'; },
function (theme) { return ({
minWidth: '8px',
{
minWidth: '24px',
height: '24px',

@@ -75,3 +76,3 @@ paddingRight: '8px',

gap: '6px',
}); },
},
],

@@ -81,3 +82,3 @@ [

function (theme) { return ({
minWidth: '8px',
minWidth: '32px',
height: '32px',

@@ -88,3 +89,3 @@ paddingRight: '12px',

fontSize: '12px',
border: '2px',
borderWidth: theme.global.strokeWidth.thick,
}); },

@@ -91,0 +92,0 @@ ],

2

lib-commonjs/version.js

@@ -6,3 +6,3 @@ "use strict";

var set_version_1 = require("@fluentui/set-version");
set_version_1.setVersion('@fluentui/react-badge', '0.2.0');
set_version_1.setVersion('@fluentui/react-badge', '9.0.0-alpha.1');
//# sourceMappingURL=version.js.map

20

lib/components/Badge/Badge.types.d.ts

@@ -6,14 +6,10 @@ import * as React from 'react';

*/
export declare type SizeValue = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
export declare type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
/**
* {@docCategory Badge}
*/
export declare type BadgeStatus = 'success' | 'warning' | 'severe' | 'accent' | 'danger' | 'important' | 'informative' | 'subtle';
export declare type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';
/**
* {@docCategory Badge}
*/
export declare type BadgeAppearances = 'filled' | 'outline' | 'ghost' | 'tint';
/**
* {@docCategory Badge}
*/
export declare type BadgeShape = 'rounded' | 'square' | 'circular';

@@ -26,10 +22,8 @@ /**

* A Badge can be sized.
* @defaultvalue medium
*/
size?: SizeValue;
size?: BadgeSize;
/**
* A Badge can have status styles variants
*/
status?: BadgeStatus;
/**
* A Badge can be square, circular or rounded
* @defaultvalue circular
*/

@@ -39,4 +33,5 @@ shape?: BadgeShape;

* A Badge can be filled, outline, ghost, inverted
* @defaultvalue filled
*/
appearance?: BadgeAppearances;
appearance?: BadgeAppearance;
/**

@@ -48,2 +43,3 @@ * Icon slot

* Position for Icon to be rendered
* @defaultvalue before
*/

@@ -50,0 +46,0 @@ iconPosition?: 'before' | 'after';

2

lib/components/Badge/useBadge.d.ts

@@ -8,4 +8,4 @@ import * as React from 'react';

/**
* Given user props, returns state and render function for a Badge.
* Returns the props and state required to render the component
*/
export declare const useBadge: (props: BadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: BadgeProps | undefined) => BadgeState;

5

lib/components/Badge/useBadge.js
import * as React from 'react';
import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';
import { useMergedRefs } from '@fluentui/react-hooks';
import { makeMergeProps, resolveShorthandProps, useMergedRefs } from '@fluentui/react-utilities';
/**

@@ -10,3 +9,3 @@ * Consts listing which props are shorthand props.

/**
* Given user props, returns state and render function for a Badge.
* Returns the props and state required to render the component
*/

@@ -13,0 +12,0 @@ export var useBadge = function (props, ref, defaultProps) {

35

lib/components/Badge/useBadgeStyles.js

@@ -10,2 +10,3 @@ import { makeStyles, ax } from '@fluentui/react-make-styles';

display: 'inline-flex',
boxSizing: 'border-box',
alignItems: 'center',

@@ -15,5 +16,5 @@ justifyContent: 'center',

borderColor: theme.alias.color.brand.brandBackground,
color: theme.global.color.white,
color: theme.alias.color.neutral.neutralForegroundInvertedAccessible,
fontWeight: theme.global.type.fontWeights.semibold,
borderWidth: '1px',
borderWidth: theme.global.strokeWidth.thin,
borderStyle: 'solid',

@@ -25,20 +26,20 @@ fontFamily: theme.global.type.fontFamilies.base,

function (s) { return s.size === 'smallest'; },
function (theme) { return ({
{
width: '6px',
height: '6px',
fontSize: '4px',
}); },
},
],
[
function (s) { return s.size === 'smaller'; },
function (theme) { return ({
{
width: '10px',
height: '10px',
fontSize: '6px',
}); },
},
],
[
function (s) { return s.size === 'small'; },
function (theme) { return ({
minWidth: '4px',
{
minWidth: '16px',
height: '16px',

@@ -49,9 +50,9 @@ paddingRight: '6px',

fontSize: '8px',
}); },
},
],
[
function (s) { return s.size === 'medium'; },
function (theme) { return ({
{
height: '20px',
minWidth: '4px',
minWidth: '20px',
gap: '4px',

@@ -61,8 +62,8 @@ paddingRight: '8px',

fontSize: '12px',
}); },
},
],
[
function (s) { return s.size === 'large'; },
function (theme) { return ({
minWidth: '8px',
{
minWidth: '24px',
height: '24px',

@@ -73,3 +74,3 @@ paddingRight: '8px',

gap: '6px',
}); },
},
],

@@ -79,3 +80,3 @@ [

function (theme) { return ({
minWidth: '8px',
minWidth: '32px',
height: '32px',

@@ -86,3 +87,3 @@ paddingRight: '12px',

fontSize: '12px',
border: '2px',
borderWidth: theme.global.strokeWidth.thick,
}); },

@@ -89,0 +90,0 @@ ],

2

lib/version.js
// Do not modify this file; it is generated as part of publish.
// The checked in version is a placeholder only and will not be updated.
import { setVersion } from '@fluentui/set-version';
setVersion('@fluentui/react-badge', '0.2.0');
setVersion('@fluentui/react-badge', '9.0.0-alpha.1');
//# sourceMappingURL=version.js.map

16

package.json
{
"name": "@fluentui/react-badge",
"version": "0.2.0",
"version": "9.0.0-alpha.1",
"description": "React components for building web experiences",

@@ -45,8 +45,7 @@ "main": "lib-commonjs/index.js",

"dependencies": {
"@fluentui/react-theme-provider": "^1.0.0-beta.27",
"@fluentui/react-theme-provider": "^9.0.0-alpha.1",
"@fluentui/set-version": "^8.0.0-beta.2",
"@fluentui/react-hooks": "^8.0.0-beta.15",
"@fluentui/react-make-styles": "^0.2.8",
"@fluentui/react-theme": "^0.3.3",
"@fluentui/react-utilities": "^0.4.0",
"@fluentui/react-make-styles": "^9.0.0-alpha.1",
"@fluentui/react-theme": "^9.0.0-alpha.1",
"@fluentui/react-utilities": "^9.0.0-alpha.1",
"tslib": "^1.10.0"

@@ -61,8 +60,9 @@ },

"beachball": {
"tag": "latest",
"tag": "alpha",
"disallowedChangeTypes": [
"major",
"prerelease"
"minor",
"patch"
]
}
}

147

Spec.md

@@ -1,63 +0,146 @@

# @fluentui/react-badge Spec
# [Badge](https://github.com/microsoft/fluentui/issues/16925)
## Background
_Description and use cases of this component_
A badge is an additional visual descriptor for UI elements. It can be used to denote numerical value, status or general information.
## Prior Art
_Include background research done for this component_
- [OpenUI Research](https://open-ui.org/components/badge.research)
- _Link to Open UI research_
- _Link to comparison of v7 and v0_
- _Link to GitHub epic issue for the converged component_
## Sample Code
_Provide some representative example code that uses the proposed API for the component_
```jsx
<Badge>
My Custom Badge
</Badge>
<Badge
style={{ position: 'absolute', top: -4, right: -4 }}
/>
```
## Variants
_Describe visual or functional variants of this control, if applicable. For example, a slider could have a 2D variant._
`Badge` can have several variations.
## API
- Appearance: `default`, `rounded` and `circular`
- Size: `smallest`, `smaller`, `small`, `medium`, `large`, `larger`.
- Styles: `filled`, `outline`, `ghost`, `tint`, `inverted filled`
_List the **Props** and **Slots** proposed for the component. Ideally this would just be a link to the component's `.types.ts` file_
## PROPS
```typescript
type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';
type BadgeShape = 'rounded' | 'square' | 'circular';
type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
interface BadgeProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
/**
* A Badge can be sized.
*/
size?: BadgeSize;
/**
* A Badge can be square, circular or rounded
*/
shape?: BadgeShape;
/**
* A Badge can be filled, outline, ghost, inverted
*/
appearance?: BadgeAppearance;
/**
* Icon slot
*/
icon?: ShorthandProps<HTMLElement>;
/**
* Position for Icon to be rendered
*/
iconPosition?: 'before' | 'after';
}
```
## Structure
- _**Public**_
```jsx
<Badge />
```
- _**Internal**_
- _**DOM** - how the component will be rendered as HTML elements_
```jsx
<ElementType>{children}</ElementType>
```
- _**DOM**_
```html
<span class="ui-badge">
...
</span>
```
## Migration
_Describe what will need to be done to upgrade from the existing implementations:_
- _Migration from v8_
- _Migration from v8_
`Badge` can be passed to `Avatar`'s `badge` slot. The `PresenceBadge` will be the best replacement for `Persona` presence mapping status, icon and colors.
- _Migration from v0_
`Badge` can be passed to `Avatar`'s `badge` slot.
## Behaviors
_Explain how the component will behave in use, including:_
- Badges don't receive focus
- _Component States_
- _Interaction_
- _Keyboard_
- _Cursor_
- _Touch_
- _Screen readers_
- Badge information would be surfaced as part of the control that it is associated with, badges themselves do not receive focus meaning they are not directly accessible by screenreaders.
If the combination of icon and badge communicates some meaningful information, that information should be surfaced in another way through screenreader or tooltip on the component the badge is associated with.
## Accessibility
- Screen Readers
Base accessibility information is included in the design document. After the spec is filled and review, outcomes from it need to be communicated to design and incorporated in the design document.
- Badges should be given a meaningful description. This description will be applied, via “aria-describedby” to the element decorated by the Badge. For example, "Chat, 6 unread" or similar.
General guidance is that the badge icon is marked as “aria-hidden” by default.
- Decide whether to use **native element** or folow **ARIA** and provide reasons
- Identify the **[ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/) pattern** and, if the component is listed there, follow its specification as possible.
- Identify accessibility **variants**, the `role` ([ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)) of the component, its `slots` and `aria-*` props.
- Describe the **keyboard navigation**: Tab Oder and Arrow Key Navigation. Describe any other keyboard **shortcuts** used
- Specify texts for **state change announcements** - [ARIA live regions
](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) (number of available items in dropdown, error messages, confirmations, ...)
- Identify UI parts that appear on **hover or focus** and specify keyboard and screen reader interaction with them
- List cases when **focus** needs to be **trapped** in sections of the UI (for dialogs and popups or for hierarchical navigation)
- List cases when **focus** needs to be **moved programatically** (if parts of the UI are appearing/disappearing or other cases)
- Badge shouldn't rely only on color information
- Include meaningful descriptions when using color to represent meaning in a badge. If relying on color only [unread dot] ensure that non-visual information is included using aria-describedby
## Variants
`Badge` is base component that can be used to create custom `Badge` such as `PresenceBadge` or `CounterBadge` with specific behaviors.
### Presence Badge
A Presence Badge represents someone's availbility or status
#### API
| Property Name | Type | Default Value | Description |
| ------------- | --------- | ------------- | ------------------------------------------------------------------------------------------ |
| `size` | `enum` | `medium` | The Badge size |
| `status` | `enum` | `available` | The Badge status representation |
| `inOffice` | `boolean` | `true` | The Badge can be represented in different ways depeding if user is in or out of the office |
| `inverted` | `boolean` | `false` | The Badge can be inverted |
### Counter Badge
A Counter Badge is a visual indicator for numeric values such as tallies and scores.
#### API
| Property Name | Type | Default Value | Description |
| --------------- | --------- | ------------- | -------------------------------------------------------------- |
| `size` | `enum` | `medium` | The Badge size |
| `shape` | `enum` | `circular` | The Badge can have different shapes |
| `variation` | `enum` | `filled` | The Badge different style variants |
| `color` | `enum` | `accent` | The Badge has a pre defined set of colors |
| `overflowCount` | `number` | `99` | `+` is displayed when count is larger than the specifed count. |
| `showZero` | `boolean` | `true` | If badge should display number if count is 0 |
| `count` | `number` | `0` | value to be displayed |

30

src/components/Badge/Badge.types.ts

@@ -7,3 +7,3 @@ import * as React from 'react';

*/
export type SizeValue = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
export type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';

@@ -13,11 +13,3 @@ /**

*/
export type BadgeStatus =
| 'success'
| 'warning'
| 'severe'
| 'accent'
| 'danger'
| 'important'
| 'informative'
| 'subtle';
export type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';

@@ -27,7 +19,2 @@ /**

*/
export type BadgeAppearances = 'filled' | 'outline' | 'ghost' | 'tint';
/**
* {@docCategory Badge}
*/
export type BadgeShape = 'rounded' | 'square' | 'circular';

@@ -41,12 +28,9 @@

* A Badge can be sized.
* @defaultvalue medium
*/
size?: SizeValue;
size?: BadgeSize;
/**
* A Badge can have status styles variants
*/
status?: BadgeStatus;
/**
* A Badge can be square, circular or rounded
* @defaultvalue circular
*/

@@ -57,4 +41,5 @@ shape?: BadgeShape;

* A Badge can be filled, outline, ghost, inverted
* @defaultvalue filled
*/
appearance?: BadgeAppearances;
appearance?: BadgeAppearance;

@@ -68,2 +53,3 @@ /**

* Position for Icon to be rendered
* @defaultvalue before
*/

@@ -70,0 +56,0 @@ iconPosition?: 'before' | 'after';

lib-amd/components/Badge/Badge.types.js.map

Sorry, the diff of this file is not supported yet

lib-amd/components/Badge/useBadge.js.map

Sorry, the diff of this file is not supported yet

lib-amd/components/Badge/useBadgeStyles.js.map

Sorry, the diff of this file is not supported yet

lib-amd/version.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/components/Badge/Badge.types.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/components/Badge/useBadge.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/components/Badge/useBadgeStyles.js.map

Sorry, the diff of this file is not supported yet

lib-commonjs/version.js.map

Sorry, the diff of this file is not supported yet

lib/components/Badge/Badge.types.js.map

Sorry, the diff of this file is not supported yet

lib/components/Badge/useBadge.js.map

Sorry, the diff of this file is not supported yet

lib/components/Badge/useBadgeStyles.js.map

Sorry, the diff of this file is not supported yet

lib/version.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc