Socket
Socket
Sign inDemoInstall

@fluentui/react-badge

Package Overview
Dependencies
Maintainers
12
Versions
897
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 9.0.0-alpha.11 to 9.0.0-alpha.12

37

CHANGELOG.json

@@ -5,3 +5,38 @@ {

{
"date": "Tue, 16 Mar 2021 07:28:51 GMT",
"date": "Wed, 17 Mar 2021 07:32:43 GMT",
"tag": "@fluentui/react-badge_v9.0.0-alpha.12",
"version": "9.0.0-alpha.12",
"comments": {
"prerelease": [
{
"comment": "Badge - Updates styles from makeStylesCompat to makeStyles",
"author": "bsunderhus@microsoft.com",
"commit": "7bc74d159fe7e7f0424f15256c5b31004459dee6",
"package": "@fluentui/react-badge"
},
{
"comment": "CounterBadge - Updates styles from makeStylesCompat to makeStyles (#17416)",
"author": "bsunderhus@microsoft.com",
"commit": "8be4f381655c9e1e89dbfb77665b12ba6b959338",
"package": "@fluentui/react-badge"
}
],
"none": [
{
"comment": "Bump @fluentui/react-utilities to v9.0.0-alpha.8",
"author": "olfedias@microsoft.com",
"commit": "51902da6d01f0e9a790ca686e32eb94b31ecf733",
"package": "@fluentui/react-badge"
},
{
"comment": "Bump @fluentui/react-make-styles to v9.0.0-alpha.11",
"author": "olfedias@microsoft.com",
"commit": "51902da6d01f0e9a790ca686e32eb94b31ecf733",
"package": "@fluentui/react-badge"
}
]
}
},
{
"date": "Tue, 16 Mar 2021 07:32:44 GMT",
"tag": "@fluentui/react-badge_v9.0.0-alpha.11",

@@ -8,0 +43,0 @@ "version": "9.0.0-alpha.11",

14

CHANGELOG.md
# Change Log - @fluentui/react-badge
This log was last generated on Tue, 16 Mar 2021 07:28:51 GMT and should not be manually modified.
This log was last generated on Wed, 17 Mar 2021 07:32:43 GMT and should not be manually modified.
<!-- Start content -->
## [9.0.0-alpha.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-alpha.12)
Wed, 17 Mar 2021 07:32:43 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-alpha.11..@fluentui/react-badge_v9.0.0-alpha.12)
### Changes
- Badge - Updates styles from makeStylesCompat to makeStyles ([PR #17416](https://github.com/microsoft/fluentui/pull/17416) by bsunderhus@microsoft.com)
- CounterBadge - Updates styles from makeStylesCompat to makeStyles (#17416) ([PR #17435](https://github.com/microsoft/fluentui/pull/17435) by bsunderhus@microsoft.com)
## [9.0.0-alpha.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-alpha.11)
Tue, 16 Mar 2021 07:28:51 GMT
Tue, 16 Mar 2021 07:32:44 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-alpha.10..@fluentui/react-badge_v9.0.0-alpha.11)

@@ -11,0 +21,0 @@

15

dist/react-badge.d.ts

@@ -177,7 +177,2 @@ import { ComponentProps } from '@fluentui/react-utilities';

/**
* Styles for the root slot
*/
export declare const useCounterBadgeRootStyles: (selectors: CounterBadgeState) => string;
/**
* Applies style classnames to slots

@@ -187,12 +182,2 @@ */

/**
* Styles for the icon slot
*/
export declare const useIconStyles: (selectors: BadgeState) => string;
/**
* Styles for the root slot
*/
export declare const useRootStyles: (selectors: BadgeState) => string;
export { }

9

etc/react-badge.api.md

@@ -83,16 +83,7 @@ ## API Report File for "@fluentui/react-badge"

// @public
export const useCounterBadgeRootStyles: (selectors: CounterBadgeState) => string;
// @public
export const useCounterBadgeStyles: (state: CounterBadgeState) => import("../Badge").BadgeState;
// @public
export const useIconStyles: (selectors: BadgeState) => string;
// @public
export const useRootStyles: (selectors: BadgeState) => string;
// (No @packageDocumentation comment for this package)
```

8

lib-amd/components/Badge/useBadgeStyles.d.ts
import { BadgeState } from './Badge.types';
/**
* Styles for the root slot
*/
export declare const useRootStyles: (selectors: BadgeState) => string;
/**
* Styles for the icon slot
*/
export declare const useIconStyles: (selectors: BadgeState) => string;
/**
* Applies style classnames to slots
*/
export declare const useBadgeStyles: (state: BadgeState) => BadgeState;

210

lib-amd/components/Badge/useBadgeStyles.js
define(["require", "exports", "@fluentui/react-make-styles"], function (require, exports, react_make_styles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var useStyles = react_make_styles_1.makeStyles({
root: function (theme) { return ({
display: 'inline-flex',
boxSizing: 'border-box',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: theme.alias.color.brand.brandBackground,
borderColor: theme.alias.color.brand.brandBackground,
color: theme.alias.color.neutral.neutralForegroundInvertedAccessible,
fontWeight: theme.global.type.fontWeights.semibold,
borderWidth: theme.global.strokeWidth.thin,
borderStyle: 'solid',
fontFamily: theme.global.type.fontFamilies.base,
}); },
rootSmallest: {
width: '6px',
height: '6px',
fontSize: '4px',
},
rootSmaller: {
width: '10px',
height: '10px',
fontSize: '6px',
},
rootSmall: {
minWidth: '16px',
height: '16px',
paddingRight: '6px',
paddingLeft: '6px',
gap: '4px',
fontSize: '8px',
},
rootMedium: {
height: '20px',
minWidth: '20px',
gap: '4px',
paddingRight: '8px',
paddingLeft: '8px',
fontSize: '10px',
},
rootLarge: {
minWidth: '24px',
height: '24px',
paddingRight: '8px',
paddingLeft: '8px',
fontSize: '12px',
gap: '6px',
},
rootLargerLargest: function (theme) { return ({
minWidth: '32px',
height: '32px',
paddingRight: '12px',
paddingLeft: '12px',
gap: '6px',
fontSize: '12px',
borderWidth: theme.global.strokeWidth.thick,
}); },
rootRounded: function (theme) { return ({ borderRadius: theme.global.borderRadius.medium }); },
rootRoundedSmallSmallerSmallest: function (theme) { return ({ borderRadius: theme.global.borderRadius.small }); },
rootCircular: { borderRadius: '99px' },
rootGhost: function (theme) { return ({
background: 'transparent',
border: 'none',
color: theme.alias.color.brand.brandBackground,
}); },
rootOutline: function (theme) { return ({
background: 'transparent',
borderColor: theme.alias.color.brand.brandBackground,
color: theme.alias.color.brand.brandBackground,
}); },
rootTint: function (theme) { return ({
background: theme.global.palette.brand.tint60,
color: theme.global.palette.brand.shade40,
border: 'none',
}); },
icon: {
position: 'absolute',
},
});
/**
* Styles for the root slot
*/
exports.useRootStyles = react_make_styles_1.makeStylesCompat([
[
null,
function (theme) { return ({
display: 'inline-flex',
boxSizing: 'border-box',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: theme.alias.color.brand.brandBackground,
borderColor: theme.alias.color.brand.brandBackground,
color: theme.alias.color.neutral.neutralForegroundInvertedAccessible,
fontWeight: theme.global.type.fontWeights.semibold,
borderWidth: theme.global.strokeWidth.thin,
borderStyle: 'solid',
fontFamily: theme.global.type.fontFamilies.base,
}); },
],
[
function (s) { return s.size === 'smallest'; },
{
width: '6px',
height: '6px',
fontSize: '4px',
},
],
[
function (s) { return s.size === 'smaller'; },
{
width: '10px',
height: '10px',
fontSize: '6px',
},
],
[
function (s) { return s.size === 'small'; },
{
minWidth: '16px',
height: '16px',
paddingRight: '6px',
paddingLeft: '6px',
gap: '4px',
fontSize: '8px',
},
],
[
function (s) { return s.size === 'medium'; },
{
height: '20px',
minWidth: '20px',
gap: '4px',
paddingRight: '8px',
paddingLeft: '8px',
fontSize: '10px',
},
],
[
function (s) { return s.size === 'large'; },
{
minWidth: '24px',
height: '24px',
paddingRight: '8px',
paddingLeft: '8px',
fontSize: '12px',
gap: '6px',
},
],
[
function (s) { return s.size === 'larger' || s.size === 'largest'; },
function (theme) { return ({
minWidth: '32px',
height: '32px',
paddingRight: '12px',
paddingLeft: '12px',
gap: '6px',
fontSize: '12px',
borderWidth: theme.global.strokeWidth.thick,
}); },
],
[function (s) { return s.shape === 'rounded'; }, function (theme) { return ({ borderRadius: theme.global.borderRadius.medium }); }],
[
function (s) { return s.shape === 'rounded' && (s.size === 'small' || s.size === 'smaller' || s.size === 'smallest'); },
function (theme) { return ({ borderRadius: theme.global.borderRadius.small }); },
],
[function (s) { return s.shape === 'circular'; }, { borderRadius: '99px' }],
[
function (s) { return s.appearance === 'ghost'; },
function (theme) { return ({
background: 'transparent',
border: 'none',
color: theme.alias.color.brand.brandBackground,
}); },
],
[
function (s) { return s.appearance === 'outline'; },
function (theme) { return ({
background: 'transparent',
borderColor: theme.alias.color.brand.brandBackground,
color: theme.alias.color.brand.brandBackground,
}); },
],
[
function (s) { return s.appearance === 'tint'; },
function (theme) { return ({
background: theme.global.palette.brand.tint60,
color: theme.global.palette.brand.shade40,
border: 'none',
}); },
],
]);
/**
* Styles for the icon slot
*/
exports.useIconStyles = react_make_styles_1.makeStylesCompat([
[
function (s) { return !s.children; },
function () { return ({
position: 'absolute',
}); },
],
]);
/**
* Applies style classnames to slots
*/
exports.useBadgeStyles = function (state) {
state.className = react_make_styles_1.ax(exports.useRootStyles(state), state.className);
var iconClassName = exports.useIconStyles(state);
var styles = useStyles();
state.className = react_make_styles_1.ax(styles.root, state.size === 'smallest' && styles.rootSmallest, state.size === 'smaller' && styles.rootSmaller, state.size === 'small' && styles.rootSmall, state.size === 'medium' && styles.rootMedium, state.size === 'large' && styles.rootLarge, (state.size === 'larger' || state.size === 'largest') && styles.rootLargerLargest, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shape === 'rounded' &&
(state.size === 'small' || state.size === 'smaller' || state.size === 'smallest') &&
styles.rootRoundedSmallSmallerSmallest, state.appearance === 'ghost' && styles.rootGhost, state.appearance === 'outline' && styles.rootOutline, state.appearance === 'tint' && styles.rootTint, state.className);
if (state.icon) {
state.icon.className = react_make_styles_1.ax(iconClassName, state.icon.className);
state.icon.className = react_make_styles_1.ax(styles.icon, state.icon.className);
}

@@ -136,0 +94,0 @@ return state;

4

lib-amd/components/CounterBadge/useCounterBadgeStyles.d.ts
import { CounterBadgeState } from './CounterBadge.types';
/**
* Styles for the root slot
*/
export declare const useCounterBadgeRootStyles: (selectors: CounterBadgeState) => string;
/**
* Applies style classnames to slots
*/
export declare const useCounterBadgeStyles: (state: CounterBadgeState) => import("../Badge").BadgeState;

89

lib-amd/components/CounterBadge/useCounterBadgeStyles.js
define(["require", "exports", "@fluentui/react-make-styles", "../Badge/useBadgeStyles"], function (require, exports, react_make_styles_1, useBadgeStyles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var useStyles = react_make_styles_1.makeStyles({
root: {
minWidth: 'auto',
},
warning: function (theme) { return ({
backgroundColor: theme.global.palette.cranberry.primary,
borderColor: theme.global.palette.cranberry.primary,
}); },
important: function (theme) { return ({
backgroundColor: theme.global.palette.grey[14],
borderColor: theme.global.palette.grey[14],
}); },
severe: function (theme) { return ({
// TODO: update these colors once the color used in the design spec has existing color token
backgroundColor: theme.global.palette.red.primary,
borderColor: theme.global.palette.red.primary,
}); },
informative: function (theme) { return ({
backgroundColor: theme.global.palette.grey[92],
borderColor: theme.global.palette.grey[92],
color: theme.alias.color.neutral.neutralForeground3,
}); },
dot: {
width: '6px',
height: '6px',
padding: '0',
},
hide: {
display: 'none',
},
});
/**
* Styles for the root slot
*/
exports.useCounterBadgeRootStyles = react_make_styles_1.makeStylesCompat([
[
null,
{
minWidth: 'auto',
},
],
[
function (s) { return s.color === 'warning'; },
function (theme) { return ({
backgroundColor: theme.global.palette.cranberry.primary,
borderColor: theme.global.palette.cranberry.primary,
}); },
],
[
function (s) { return s.color === 'important'; },
function (theme) { return ({
backgroundColor: theme.global.palette.grey[14],
borderColor: theme.global.palette.grey[14],
}); },
],
[
function (s) { return s.color === 'severe'; },
function (theme) { return ({
// @TODO: update these colors once the color used in the design spec has existing color token
backgroundColor: theme.global.palette.red.primary,
borderColor: theme.global.palette.red.primary,
}); },
],
[
function (s) { return s.color === 'informative'; },
function (theme) { return ({
backgroundColor: theme.global.palette.grey[92],
borderColor: theme.global.palette.grey[92],
color: theme.alias.color.neutral.neutralForeground3,
}); },
],
[
function (s) { return s.dot; },
{
width: '6px',
height: '6px',
padding: '0',
},
],
[
function (s) { return !s.showZero && s.count === 0 && !s.dot; },
{
display: 'none',
},
],
]);
/**
* Applies style classnames to slots
*/
exports.useCounterBadgeStyles = function (state) {
state.className = react_make_styles_1.ax(exports.useCounterBadgeRootStyles(state), state.className);
var styles = useStyles();
state.className = react_make_styles_1.ax(styles.root, state.color === 'waning' && styles.warning, state.color === 'important' && styles.important, state.color === 'severe' && styles.severe, state.color === 'informative' && styles.informative, state.dot && styles.dot, !state.showZero && state.count === 0 && !state.dot && styles.hide, state.className);
return useBadgeStyles_1.useBadgeStyles(state);

@@ -65,0 +42,0 @@ };

8

lib-commonjs/components/Badge/useBadgeStyles.d.ts
import { BadgeState } from './Badge.types';
/**
* Styles for the root slot
*/
export declare const useRootStyles: (selectors: BadgeState) => string;
/**
* Styles for the icon slot
*/
export declare const useIconStyles: (selectors: BadgeState) => string;
/**
* Applies style classnames to slots
*/
export declare const useBadgeStyles: (state: BadgeState) => BadgeState;

210

lib-commonjs/components/Badge/useBadgeStyles.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var react_make_styles_1 = require("@fluentui/react-make-styles");
var useStyles = react_make_styles_1.makeStyles({
root: function (theme) { return ({
display: 'inline-flex',
boxSizing: 'border-box',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: theme.alias.color.brand.brandBackground,
borderColor: theme.alias.color.brand.brandBackground,
color: theme.alias.color.neutral.neutralForegroundInvertedAccessible,
fontWeight: theme.global.type.fontWeights.semibold,
borderWidth: theme.global.strokeWidth.thin,
borderStyle: 'solid',
fontFamily: theme.global.type.fontFamilies.base,
}); },
rootSmallest: {
width: '6px',
height: '6px',
fontSize: '4px',
},
rootSmaller: {
width: '10px',
height: '10px',
fontSize: '6px',
},
rootSmall: {
minWidth: '16px',
height: '16px',
paddingRight: '6px',
paddingLeft: '6px',
gap: '4px',
fontSize: '8px',
},
rootMedium: {
height: '20px',
minWidth: '20px',
gap: '4px',
paddingRight: '8px',
paddingLeft: '8px',
fontSize: '10px',
},
rootLarge: {
minWidth: '24px',
height: '24px',
paddingRight: '8px',
paddingLeft: '8px',
fontSize: '12px',
gap: '6px',
},
rootLargerLargest: function (theme) { return ({
minWidth: '32px',
height: '32px',
paddingRight: '12px',
paddingLeft: '12px',
gap: '6px',
fontSize: '12px',
borderWidth: theme.global.strokeWidth.thick,
}); },
rootRounded: function (theme) { return ({ borderRadius: theme.global.borderRadius.medium }); },
rootRoundedSmallSmallerSmallest: function (theme) { return ({ borderRadius: theme.global.borderRadius.small }); },
rootCircular: { borderRadius: '99px' },
rootGhost: function (theme) { return ({
background: 'transparent',
border: 'none',
color: theme.alias.color.brand.brandBackground,
}); },
rootOutline: function (theme) { return ({
background: 'transparent',
borderColor: theme.alias.color.brand.brandBackground,
color: theme.alias.color.brand.brandBackground,
}); },
rootTint: function (theme) { return ({
background: theme.global.palette.brand.tint60,
color: theme.global.palette.brand.shade40,
border: 'none',
}); },
icon: {
position: 'absolute',
},
});
/**
* Styles for the root slot
*/
exports.useRootStyles = react_make_styles_1.makeStylesCompat([
[
null,
function (theme) { return ({
display: 'inline-flex',
boxSizing: 'border-box',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: theme.alias.color.brand.brandBackground,
borderColor: theme.alias.color.brand.brandBackground,
color: theme.alias.color.neutral.neutralForegroundInvertedAccessible,
fontWeight: theme.global.type.fontWeights.semibold,
borderWidth: theme.global.strokeWidth.thin,
borderStyle: 'solid',
fontFamily: theme.global.type.fontFamilies.base,
}); },
],
[
function (s) { return s.size === 'smallest'; },
{
width: '6px',
height: '6px',
fontSize: '4px',
},
],
[
function (s) { return s.size === 'smaller'; },
{
width: '10px',
height: '10px',
fontSize: '6px',
},
],
[
function (s) { return s.size === 'small'; },
{
minWidth: '16px',
height: '16px',
paddingRight: '6px',
paddingLeft: '6px',
gap: '4px',
fontSize: '8px',
},
],
[
function (s) { return s.size === 'medium'; },
{
height: '20px',
minWidth: '20px',
gap: '4px',
paddingRight: '8px',
paddingLeft: '8px',
fontSize: '10px',
},
],
[
function (s) { return s.size === 'large'; },
{
minWidth: '24px',
height: '24px',
paddingRight: '8px',
paddingLeft: '8px',
fontSize: '12px',
gap: '6px',
},
],
[
function (s) { return s.size === 'larger' || s.size === 'largest'; },
function (theme) { return ({
minWidth: '32px',
height: '32px',
paddingRight: '12px',
paddingLeft: '12px',
gap: '6px',
fontSize: '12px',
borderWidth: theme.global.strokeWidth.thick,
}); },
],
[function (s) { return s.shape === 'rounded'; }, function (theme) { return ({ borderRadius: theme.global.borderRadius.medium }); }],
[
function (s) { return s.shape === 'rounded' && (s.size === 'small' || s.size === 'smaller' || s.size === 'smallest'); },
function (theme) { return ({ borderRadius: theme.global.borderRadius.small }); },
],
[function (s) { return s.shape === 'circular'; }, { borderRadius: '99px' }],
[
function (s) { return s.appearance === 'ghost'; },
function (theme) { return ({
background: 'transparent',
border: 'none',
color: theme.alias.color.brand.brandBackground,
}); },
],
[
function (s) { return s.appearance === 'outline'; },
function (theme) { return ({
background: 'transparent',
borderColor: theme.alias.color.brand.brandBackground,
color: theme.alias.color.brand.brandBackground,
}); },
],
[
function (s) { return s.appearance === 'tint'; },
function (theme) { return ({
background: theme.global.palette.brand.tint60,
color: theme.global.palette.brand.shade40,
border: 'none',
}); },
],
]);
/**
* Styles for the icon slot
*/
exports.useIconStyles = react_make_styles_1.makeStylesCompat([
[
function (s) { return !s.children; },
function () { return ({
position: 'absolute',
}); },
],
]);
/**
* Applies style classnames to slots
*/
exports.useBadgeStyles = function (state) {
state.className = react_make_styles_1.ax(exports.useRootStyles(state), state.className);
var iconClassName = exports.useIconStyles(state);
var styles = useStyles();
state.className = react_make_styles_1.ax(styles.root, state.size === 'smallest' && styles.rootSmallest, state.size === 'smaller' && styles.rootSmaller, state.size === 'small' && styles.rootSmall, state.size === 'medium' && styles.rootMedium, state.size === 'large' && styles.rootLarge, (state.size === 'larger' || state.size === 'largest') && styles.rootLargerLargest, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shape === 'rounded' &&
(state.size === 'small' || state.size === 'smaller' || state.size === 'smallest') &&
styles.rootRoundedSmallSmallerSmallest, state.appearance === 'ghost' && styles.rootGhost, state.appearance === 'outline' && styles.rootOutline, state.appearance === 'tint' && styles.rootTint, state.className);
if (state.icon) {
state.icon.className = react_make_styles_1.ax(iconClassName, state.icon.className);
state.icon.className = react_make_styles_1.ax(styles.icon, state.icon.className);
}

@@ -136,0 +94,0 @@ return state;

4

lib-commonjs/components/CounterBadge/useCounterBadgeStyles.d.ts
import { CounterBadgeState } from './CounterBadge.types';
/**
* Styles for the root slot
*/
export declare const useCounterBadgeRootStyles: (selectors: CounterBadgeState) => string;
/**
* Applies style classnames to slots
*/
export declare const useCounterBadgeStyles: (state: CounterBadgeState) => import("../Badge").BadgeState;

89

lib-commonjs/components/CounterBadge/useCounterBadgeStyles.js

@@ -5,64 +5,41 @@ "use strict";

var useBadgeStyles_1 = require("../Badge/useBadgeStyles");
var useStyles = react_make_styles_1.makeStyles({
root: {
minWidth: 'auto',
},
warning: function (theme) { return ({
backgroundColor: theme.global.palette.cranberry.primary,
borderColor: theme.global.palette.cranberry.primary,
}); },
important: function (theme) { return ({
backgroundColor: theme.global.palette.grey[14],
borderColor: theme.global.palette.grey[14],
}); },
severe: function (theme) { return ({
// TODO: update these colors once the color used in the design spec has existing color token
backgroundColor: theme.global.palette.red.primary,
borderColor: theme.global.palette.red.primary,
}); },
informative: function (theme) { return ({
backgroundColor: theme.global.palette.grey[92],
borderColor: theme.global.palette.grey[92],
color: theme.alias.color.neutral.neutralForeground3,
}); },
dot: {
width: '6px',
height: '6px',
padding: '0',
},
hide: {
display: 'none',
},
});
/**
* Styles for the root slot
*/
exports.useCounterBadgeRootStyles = react_make_styles_1.makeStylesCompat([
[
null,
{
minWidth: 'auto',
},
],
[
function (s) { return s.color === 'warning'; },
function (theme) { return ({
backgroundColor: theme.global.palette.cranberry.primary,
borderColor: theme.global.palette.cranberry.primary,
}); },
],
[
function (s) { return s.color === 'important'; },
function (theme) { return ({
backgroundColor: theme.global.palette.grey[14],
borderColor: theme.global.palette.grey[14],
}); },
],
[
function (s) { return s.color === 'severe'; },
function (theme) { return ({
// @TODO: update these colors once the color used in the design spec has existing color token
backgroundColor: theme.global.palette.red.primary,
borderColor: theme.global.palette.red.primary,
}); },
],
[
function (s) { return s.color === 'informative'; },
function (theme) { return ({
backgroundColor: theme.global.palette.grey[92],
borderColor: theme.global.palette.grey[92],
color: theme.alias.color.neutral.neutralForeground3,
}); },
],
[
function (s) { return s.dot; },
{
width: '6px',
height: '6px',
padding: '0',
},
],
[
function (s) { return !s.showZero && s.count === 0 && !s.dot; },
{
display: 'none',
},
],
]);
/**
* Applies style classnames to slots
*/
exports.useCounterBadgeStyles = function (state) {
state.className = react_make_styles_1.ax(exports.useCounterBadgeRootStyles(state), state.className);
var styles = useStyles();
state.className = react_make_styles_1.ax(styles.root, state.color === 'waning' && styles.warning, state.color === 'important' && styles.important, state.color === 'severe' && styles.severe, state.color === 'informative' && styles.informative, state.dot && styles.dot, !state.showZero && state.count === 0 && !state.dot && styles.hide, state.className);
return useBadgeStyles_1.useBadgeStyles(state);
};
//# sourceMappingURL=useCounterBadgeStyles.js.map

8

lib/components/Badge/useBadgeStyles.d.ts
import { BadgeState } from './Badge.types';
/**
* Styles for the root slot
*/
export declare const useRootStyles: (selectors: BadgeState) => string;
/**
* Styles for the icon slot
*/
export declare const useIconStyles: (selectors: BadgeState) => string;
/**
* Applies style classnames to slots
*/
export declare const useBadgeStyles: (state: BadgeState) => BadgeState;

212

lib/components/Badge/useBadgeStyles.js

@@ -1,133 +0,91 @@

import { makeStylesCompat, ax } from '@fluentui/react-make-styles';
import { ax, makeStyles } from '@fluentui/react-make-styles';
var useStyles = makeStyles({
root: function (theme) { return ({
display: 'inline-flex',
boxSizing: 'border-box',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: theme.alias.color.brand.brandBackground,
borderColor: theme.alias.color.brand.brandBackground,
color: theme.alias.color.neutral.neutralForegroundInvertedAccessible,
fontWeight: theme.global.type.fontWeights.semibold,
borderWidth: theme.global.strokeWidth.thin,
borderStyle: 'solid',
fontFamily: theme.global.type.fontFamilies.base,
}); },
rootSmallest: {
width: '6px',
height: '6px',
fontSize: '4px',
},
rootSmaller: {
width: '10px',
height: '10px',
fontSize: '6px',
},
rootSmall: {
minWidth: '16px',
height: '16px',
paddingRight: '6px',
paddingLeft: '6px',
gap: '4px',
fontSize: '8px',
},
rootMedium: {
height: '20px',
minWidth: '20px',
gap: '4px',
paddingRight: '8px',
paddingLeft: '8px',
fontSize: '10px',
},
rootLarge: {
minWidth: '24px',
height: '24px',
paddingRight: '8px',
paddingLeft: '8px',
fontSize: '12px',
gap: '6px',
},
rootLargerLargest: function (theme) { return ({
minWidth: '32px',
height: '32px',
paddingRight: '12px',
paddingLeft: '12px',
gap: '6px',
fontSize: '12px',
borderWidth: theme.global.strokeWidth.thick,
}); },
rootRounded: function (theme) { return ({ borderRadius: theme.global.borderRadius.medium }); },
rootRoundedSmallSmallerSmallest: function (theme) { return ({ borderRadius: theme.global.borderRadius.small }); },
rootCircular: { borderRadius: '99px' },
rootGhost: function (theme) { return ({
background: 'transparent',
border: 'none',
color: theme.alias.color.brand.brandBackground,
}); },
rootOutline: function (theme) { return ({
background: 'transparent',
borderColor: theme.alias.color.brand.brandBackground,
color: theme.alias.color.brand.brandBackground,
}); },
rootTint: function (theme) { return ({
background: theme.global.palette.brand.tint60,
color: theme.global.palette.brand.shade40,
border: 'none',
}); },
icon: {
position: 'absolute',
},
});
/**
* Styles for the root slot
*/
export var useRootStyles = makeStylesCompat([
[
null,
function (theme) { return ({
display: 'inline-flex',
boxSizing: 'border-box',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: theme.alias.color.brand.brandBackground,
borderColor: theme.alias.color.brand.brandBackground,
color: theme.alias.color.neutral.neutralForegroundInvertedAccessible,
fontWeight: theme.global.type.fontWeights.semibold,
borderWidth: theme.global.strokeWidth.thin,
borderStyle: 'solid',
fontFamily: theme.global.type.fontFamilies.base,
}); },
],
[
function (s) { return s.size === 'smallest'; },
{
width: '6px',
height: '6px',
fontSize: '4px',
},
],
[
function (s) { return s.size === 'smaller'; },
{
width: '10px',
height: '10px',
fontSize: '6px',
},
],
[
function (s) { return s.size === 'small'; },
{
minWidth: '16px',
height: '16px',
paddingRight: '6px',
paddingLeft: '6px',
gap: '4px',
fontSize: '8px',
},
],
[
function (s) { return s.size === 'medium'; },
{
height: '20px',
minWidth: '20px',
gap: '4px',
paddingRight: '8px',
paddingLeft: '8px',
fontSize: '10px',
},
],
[
function (s) { return s.size === 'large'; },
{
minWidth: '24px',
height: '24px',
paddingRight: '8px',
paddingLeft: '8px',
fontSize: '12px',
gap: '6px',
},
],
[
function (s) { return s.size === 'larger' || s.size === 'largest'; },
function (theme) { return ({
minWidth: '32px',
height: '32px',
paddingRight: '12px',
paddingLeft: '12px',
gap: '6px',
fontSize: '12px',
borderWidth: theme.global.strokeWidth.thick,
}); },
],
[function (s) { return s.shape === 'rounded'; }, function (theme) { return ({ borderRadius: theme.global.borderRadius.medium }); }],
[
function (s) { return s.shape === 'rounded' && (s.size === 'small' || s.size === 'smaller' || s.size === 'smallest'); },
function (theme) { return ({ borderRadius: theme.global.borderRadius.small }); },
],
[function (s) { return s.shape === 'circular'; }, { borderRadius: '99px' }],
[
function (s) { return s.appearance === 'ghost'; },
function (theme) { return ({
background: 'transparent',
border: 'none',
color: theme.alias.color.brand.brandBackground,
}); },
],
[
function (s) { return s.appearance === 'outline'; },
function (theme) { return ({
background: 'transparent',
borderColor: theme.alias.color.brand.brandBackground,
color: theme.alias.color.brand.brandBackground,
}); },
],
[
function (s) { return s.appearance === 'tint'; },
function (theme) { return ({
background: theme.global.palette.brand.tint60,
color: theme.global.palette.brand.shade40,
border: 'none',
}); },
],
]);
/**
* Styles for the icon slot
*/
export var useIconStyles = makeStylesCompat([
[
function (s) { return !s.children; },
function () { return ({
position: 'absolute',
}); },
],
]);
/**
* Applies style classnames to slots
*/
export var useBadgeStyles = function (state) {
state.className = ax(useRootStyles(state), state.className);
var iconClassName = useIconStyles(state);
var styles = useStyles();
state.className = ax(styles.root, state.size === 'smallest' && styles.rootSmallest, state.size === 'smaller' && styles.rootSmaller, state.size === 'small' && styles.rootSmall, state.size === 'medium' && styles.rootMedium, state.size === 'large' && styles.rootLarge, (state.size === 'larger' || state.size === 'largest') && styles.rootLargerLargest, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shape === 'rounded' &&
(state.size === 'small' || state.size === 'smaller' || state.size === 'smallest') &&
styles.rootRoundedSmallSmallerSmallest, state.appearance === 'ghost' && styles.rootGhost, state.appearance === 'outline' && styles.rootOutline, state.appearance === 'tint' && styles.rootTint, state.className);
if (state.icon) {
state.icon.className = ax(iconClassName, state.icon.className);
state.icon.className = ax(styles.icon, state.icon.className);
}

@@ -134,0 +92,0 @@ return state;

4

lib/components/CounterBadge/useCounterBadgeStyles.d.ts
import { CounterBadgeState } from './CounterBadge.types';
/**
* Styles for the root slot
*/
export declare const useCounterBadgeRootStyles: (selectors: CounterBadgeState) => string;
/**
* Applies style classnames to slots
*/
export declare const useCounterBadgeStyles: (state: CounterBadgeState) => import("../Badge").BadgeState;

91

lib/components/CounterBadge/useCounterBadgeStyles.js

@@ -1,65 +0,42 @@

import { makeStylesCompat, ax } from '@fluentui/react-make-styles';
import { ax, makeStyles } from '@fluentui/react-make-styles';
import { useBadgeStyles } from '../Badge/useBadgeStyles';
var useStyles = makeStyles({
root: {
minWidth: 'auto',
},
warning: function (theme) { return ({
backgroundColor: theme.global.palette.cranberry.primary,
borderColor: theme.global.palette.cranberry.primary,
}); },
important: function (theme) { return ({
backgroundColor: theme.global.palette.grey[14],
borderColor: theme.global.palette.grey[14],
}); },
severe: function (theme) { return ({
// TODO: update these colors once the color used in the design spec has existing color token
backgroundColor: theme.global.palette.red.primary,
borderColor: theme.global.palette.red.primary,
}); },
informative: function (theme) { return ({
backgroundColor: theme.global.palette.grey[92],
borderColor: theme.global.palette.grey[92],
color: theme.alias.color.neutral.neutralForeground3,
}); },
dot: {
width: '6px',
height: '6px',
padding: '0',
},
hide: {
display: 'none',
},
});
/**
* Styles for the root slot
*/
export var useCounterBadgeRootStyles = makeStylesCompat([
[
null,
{
minWidth: 'auto',
},
],
[
function (s) { return s.color === 'warning'; },
function (theme) { return ({
backgroundColor: theme.global.palette.cranberry.primary,
borderColor: theme.global.palette.cranberry.primary,
}); },
],
[
function (s) { return s.color === 'important'; },
function (theme) { return ({
backgroundColor: theme.global.palette.grey[14],
borderColor: theme.global.palette.grey[14],
}); },
],
[
function (s) { return s.color === 'severe'; },
function (theme) { return ({
// @TODO: update these colors once the color used in the design spec has existing color token
backgroundColor: theme.global.palette.red.primary,
borderColor: theme.global.palette.red.primary,
}); },
],
[
function (s) { return s.color === 'informative'; },
function (theme) { return ({
backgroundColor: theme.global.palette.grey[92],
borderColor: theme.global.palette.grey[92],
color: theme.alias.color.neutral.neutralForeground3,
}); },
],
[
function (s) { return s.dot; },
{
width: '6px',
height: '6px',
padding: '0',
},
],
[
function (s) { return !s.showZero && s.count === 0 && !s.dot; },
{
display: 'none',
},
],
]);
/**
* Applies style classnames to slots
*/
export var useCounterBadgeStyles = function (state) {
state.className = ax(useCounterBadgeRootStyles(state), state.className);
var styles = useStyles();
state.className = ax(styles.root, state.color === 'waning' && styles.warning, state.color === 'important' && styles.important, state.color === 'severe' && styles.severe, state.color === 'informative' && styles.informative, state.dot && styles.dot, !state.showZero && state.count === 0 && !state.dot && styles.hide, state.className);
return useBadgeStyles(state);
};
//# sourceMappingURL=useCounterBadgeStyles.js.map

2

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

@@ -5,0 +5,0 @@ "main": "lib-commonjs/index.js",

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

Sorry, the diff of this file is not supported yet

lib-amd/components/CounterBadge/useCounterBadgeStyles.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/components/CounterBadge/useCounterBadgeStyles.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/components/CounterBadge/useCounterBadgeStyles.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