@fluentui/react-badge - npm Package Compare versions

Comparing version 9.0.0-alpha.10 to 9.0.0-alpha.11

CHANGELOG.json

@@ -5,3 +5,26 @@ {
     {
-      "date": "Mon, 15 Mar 2021 07:33:50 GMT",
+      "date": "Tue, 16 Mar 2021 07:28:51 GMT",
+      "tag": "@fluentui/react-badge_v9.0.0-alpha.11",
+      "version": "9.0.0-alpha.11",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "feat(Badge): add counter badge",
+            "author": "[e-mail]",
+            "commit": "d678dc16f1bda8ddc916e1e5042e119bc3242083",
+            "package": "@fluentui/react-badge"
+          }
+        ],
+        "patch": [
+          {
+            "comment": "Bump @fluentui/react-conformance to v0.2.4",
+            "author": "[e-mail]",
+            "commit": "8bbe3d16c5c00716dfcbafa6d693437b8d090da3",
+            "package": "@fluentui/react-badge"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 15 Mar 2021 07:36:20 GMT",
       "tag": "@fluentui/react-badge_v9.0.0-alpha.10",
@@ -8,0 +31,0 @@ "version": "9.0.0-alpha.10",

CHANGELOG.md

 # Change Log - @fluentui/react-badge
 
-This log was last generated on Mon, 15 Mar 2021 07:33:50 GMT and should not be manually modified.
+This log was last generated on Tue, 16 Mar 2021 07:28:51 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [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 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-alpha.10..@fluentui/react-badge_v9.0.0-alpha.11)
+
+### Patches
+
+- Bump @fluentui/react-conformance to v0.2.4 ([PR #17418](https://github.com/microsoft/fluentui/pull/17418) by [e-mail])
+
+### Changes
+
+- feat(Badge): add counter badge ([PR #17272](https://github.com/microsoft/fluentui/pull/17272) by [e-mail])
+
 ## [9.0.0-alpha.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.0.0-alpha.10)
 
-Mon, 15 Mar 2021 07:33:50 GMT 
+Mon, 15 Mar 2021 07:36:20 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.0.0-alpha.9..@fluentui/react-badge_v9.0.0-alpha.10)
@@ -11,0 +24,0 @@

dist/react-badge.d.ts

@@ -76,2 +76,85 @@ import { ComponentProps } from '@fluentui/react-utilities';
 
+/**
+ * Define a styled CounterBadge, using the `useCounterBadge` hook.
+ * {@docCategory CounterBadge}
+ */
+export declare const CounterBadge: React.ForwardRefExoticComponent<CounterBadgeProps & React.RefAttributes<HTMLElement>>;
+
+/**
+ * {@docCategory CounterBadge}
+ */
+export declare type CounterBadgeColors = 'accent' | 'warning' | 'important' | 'severe' | 'informative';
+
+/**
+ * {@docCategory CounterBadge}
+ */
+export declare interface CounterBadgeProps extends Omit<BadgeProps, 'appearance' | 'shape'> {
+    /**
+     * A Badge can be circular or rounded
+     * @defaultvalue circular
+     */
+    shape?: Extract<BadgeProps['shape'], 'rounded' | 'circular'>;
+    /**
+     * A Badge can be filled, ghost
+     * @defaultvalue filled
+     */
+    appearance?: Extract<BadgeProps['appearance'], 'filled' | 'ghost'>;
+    /**
+     * A Badge can have color variations
+     * @defaultvalue accent
+     */
+    color?: CounterBadgeColors;
+    /**
+     * Max number to be displayed
+     * @defaultvalue 99
+     */
+    overflowCount?: number;
+    /**
+     * Value diplayed by the Badge
+     * @defaultvalue 0
+     */
+    count?: number;
+    /**
+     * If the badge should be shown when count is 0
+     * @defaultvalue false
+     */
+    showZero?: boolean;
+    /**
+     * If a dot badge should be displayed
+     * @defaultvalue false
+     */
+    dot?: boolean;
+}
+
+/**
+ * Consts listing which props are shorthand props.
+ */
+export declare const counterBadgeShorthandProps: string[];
+
+/**
+ * {@docCategory CounterBadge}
+ */
+export declare interface CounterBadgeState extends BadgeState {
+    /**
+     * Max number to be displayed
+     * @defaultvalue 99
+     */
+    overflowCount: number;
+    /**
+     * Value diplayed by the Badge
+     * @defaultvalue 0
+     */
+    count: number;
+    /**
+     * If the badge should be shown when count is 0
+     * @defaultvalue false
+     */
+    showZero: boolean;
+    /**
+     * If a dot badge should be displayed
+     * @defaultvalue false
+     */
+    dot: boolean;
+}
+
 export declare const renderBadge: (state: BadgeState) => JSX.Element;
@@ -90,2 +173,17 @@
 /**
+ * Returns the props and state required to render the component
+ */
+export declare const useCounterBadge: (props: CounterBadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: CounterBadgeProps | undefined) => CounterBadgeState;
+
+/**
+ * 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;
+
+/**
  * Styles for the icon slot
@@ -92,0 +190,0 @@ */

etc/react-badge.api.md

@@ -42,3 +42,31 @@ ## API Report File for "@fluentui/react-badge"
 
+// @public
+export const CounterBadge: React.ForwardRefExoticComponent<CounterBadgeProps & React.RefAttributes<HTMLElement>>;
+
 // @public (undocumented)
+export type CounterBadgeColors = 'accent' | 'warning' | 'important' | 'severe' | 'informative';
+
+// @public (undocumented)
+export interface CounterBadgeProps extends Omit<BadgeProps, 'appearance' | 'shape'> {
+    appearance?: Extract<BadgeProps['appearance'], 'filled' | 'ghost'>;
+    color?: CounterBadgeColors;
+    count?: number;
+    dot?: boolean;
+    overflowCount?: number;
+    shape?: Extract<BadgeProps['shape'], 'rounded' | 'circular'>;
+    showZero?: boolean;
+}
+
+// @public
+export const counterBadgeShorthandProps: string[];
+
+// @public (undocumented)
+export interface CounterBadgeState extends BadgeState {
+    count: number;
+    dot: boolean;
+    overflowCount: number;
+    showZero: boolean;
+}
+
+// @public (undocumented)
 export const renderBadge: (state: BadgeState) => JSX.Element;
@@ -53,2 +81,11 @@
 // @public
+export const useCounterBadge: (props: CounterBadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: CounterBadgeProps | undefined) => CounterBadgeState;
+
+// @public
+export const useCounterBadgeRootStyles: (selectors: CounterBadgeState) => string;
+
+// @public
+export const useCounterBadgeStyles: (state: CounterBadgeState) => import("../Badge").BadgeState;
+
+// @public
 export const useIconStyles: (selectors: BadgeState) => string;
@@ -55,0 +92,0 @@

lib-amd/components/Badge/useBadge.js

@@ -18,2 +18,3 @@ define(["require", "exports", "react", "@fluentui/react-utilities"], function (require, exports, React, react_utilities_1) {
             iconPosition: 'before',
+            'aria-hidden': true,
         }, defaultProps, react_utilities_1.resolveShorthandProps(props, exports.badgeShorthandProps));
@@ -20,0 +21,0 @@ return state;

lib-amd/components/Badge/useBadgeStyles.js

@@ -59,3 +59,3 @@ define(["require", "exports", "@fluentui/react-make-styles"], function (require, exports, react_make_styles_1) {
                 paddingLeft: '8px',
-                fontSize: '12px',
+                fontSize: '10px',
             },
@@ -86,3 +86,2 @@ ],
         ],
-        [function (s) { return s.shape === 'circular'; }, function (theme) { return ({ borderRadius: theme.global.borderRadius.circular }); }],
         [function (s) { return s.shape === 'rounded'; }, function (theme) { return ({ borderRadius: theme.global.borderRadius.medium }); }],
@@ -93,2 +92,3 @@ [
         ],
+        [function (s) { return s.shape === 'circular'; }, { borderRadius: '99px' }],
         [
@@ -95,0 +95,0 @@ function (s) { return s.appearance === 'ghost'; },

lib-amd/index.d.ts

 export * from './components/Badge/index';
 export * from './Badge';
+export * from './components/CounterBadge/index';
+export * from './CounterBadge';

lib-amd/index.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "tslib", "./components/Badge/index", "./Badge"], function (require, exports, tslib_1, index_1, Badge_1) {
+define(["require", "exports", "tslib", "./components/Badge/index", "./Badge", "./components/CounterBadge/index", "./CounterBadge"], function (require, exports, tslib_1, index_1, Badge_1, index_2, CounterBadge_1) {
     "use strict";
@@ -6,3 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
     tslib_1.__exportStar(Badge_1, exports);
+    tslib_1.__exportStar(index_2, exports);
+    tslib_1.__exportStar(CounterBadge_1, exports);
 });
 //# sourceMappingURL=index.js.map

lib-commonjs/components/Badge/useBadge.js

@@ -19,2 +19,3 @@ "use strict";
         iconPosition: 'before',
+        'aria-hidden': true,
     }, defaultProps, react_utilities_1.resolveShorthandProps(props, exports.badgeShorthandProps));
@@ -21,0 +22,0 @@ return state;

lib-commonjs/components/Badge/useBadgeStyles.js

@@ -59,3 +59,3 @@ "use strict";
             paddingLeft: '8px',
-            fontSize: '12px',
+            fontSize: '10px',
         },
@@ -86,3 +86,2 @@ ],
     ],
-    [function (s) { return s.shape === 'circular'; }, function (theme) { return ({ borderRadius: theme.global.borderRadius.circular }); }],
     [function (s) { return s.shape === 'rounded'; }, function (theme) { return ({ borderRadius: theme.global.borderRadius.medium }); }],
@@ -93,2 +92,3 @@ [
     ],
+    [function (s) { return s.shape === 'circular'; }, { borderRadius: '99px' }],
     [
@@ -95,0 +95,0 @@ function (s) { return s.appearance === 'ghost'; },

lib-commonjs/index.d.ts

 export * from './components/Badge/index';
 export * from './Badge';
+export * from './components/CounterBadge/index';
+export * from './CounterBadge';

lib-commonjs/index.js

@@ -6,2 +6,4 @@ "use strict";
 tslib_1.__exportStar(require("./Badge"), exports);
+tslib_1.__exportStar(require("./components/CounterBadge/index"), exports);
+tslib_1.__exportStar(require("./CounterBadge"), exports);
 //# sourceMappingURL=index.js.map

lib/components/Badge/useBadge.js

@@ -17,2 +17,3 @@ import * as React from 'react';
         iconPosition: 'before',
+        'aria-hidden': true,
     }, defaultProps, resolveShorthandProps(props, badgeShorthandProps));
@@ -19,0 +20,0 @@ return state;

lib/components/Badge/useBadgeStyles.js

@@ -57,3 +57,3 @@ import { makeStylesCompat, ax } from '@fluentui/react-make-styles';
             paddingLeft: '8px',
-            fontSize: '12px',
+            fontSize: '10px',
         },
@@ -84,3 +84,2 @@ ],
     ],
-    [function (s) { return s.shape === 'circular'; }, function (theme) { return ({ borderRadius: theme.global.borderRadius.circular }); }],
     [function (s) { return s.shape === 'rounded'; }, function (theme) { return ({ borderRadius: theme.global.borderRadius.medium }); }],
@@ -91,2 +90,3 @@ [
     ],
+    [function (s) { return s.shape === 'circular'; }, { borderRadius: '99px' }],
     [
@@ -93,0 +93,0 @@ function (s) { return s.appearance === 'ghost'; },

lib/index.d.ts

 export * from './components/Badge/index';
 export * from './Badge';
+export * from './components/CounterBadge/index';
+export * from './CounterBadge';

lib/index.js

 export * from './components/Badge/index';
 export * from './Badge';
+export * from './components/CounterBadge/index';
+export * from './CounterBadge';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@fluentui/react-badge",
-  "version": "9.0.0-alpha.10",
+  "version": "9.0.0-alpha.11",
   "description": "React components for building web experiences",
@@ -26,3 +26,3 @@ "main": "lib-commonjs/index.js",
     "@fluentui/eslint-plugin": "^1.0.1",
-    "@fluentui/react-conformance": "^0.2.3",
+    "@fluentui/react-conformance": "^0.2.4",
     "@fluentui/scripts": "^1.0.0",
@@ -42,3 +42,3 @@ "@types/enzyme": "3.10.3",
   "dependencies": {
-    "@fluentui/react-make-styles": "^9.0.0-alpha.10",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.11",
     "@fluentui/react-theme": "^9.0.0-alpha.6",
@@ -45,0 +45,0 @@ "@fluentui/react-utilities": "^9.0.0-alpha.8",

Spec.md

@@ -136,12 +136,54 @@ # [Badge](https://github.com/microsoft/fluentui/issues/16925)
 
-#### API
+```typescript
+/**
+ * {@docCategory CounterBadge}
+ */
+export type CounterBadgeColors = 'accent' | 'warning' | 'important' | 'severe' | 'informative';
 
-| 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                                          |
+/**
+ * {@docCategory CounterBadge}
+ */
+export interface CounterBadgeProps extends Omit<BadgeProps, 'appearance' | 'shape'> {
+  /**
+   * A Badge can be circular or rounded
+   * @defaultvalue circular
+   */
+  shape?: Extract<BadgeShape, 'rounded' | 'circular'>;
+
+  /**
+   * A Badge can be filled, ghost
+   * @defaultvalue filled
+   */
+  appearance?: Extract<BadgeAppearance, 'filled' | 'ghost'>;
+
+  /**
+   * A Badge can have color variations
+   * @defaultvalue accent
+   */
+  color?: CounterBadgeColors;
+
+  /**
+   * Max number to be displayed
+   * @defaultvalue 99
+   */
+  overflowCount?: number;
+
+  /**
+   * Value diplayed by the Badge
+   * @defaultvalue 0
+   */
+  count?: number;
+
+  /**
+   * If the badge should be shown when count is 0
+   * @defaultvalue false
+   */
+  showZero?: boolean;
+
+  /**
+   * If a dot badge should be displayed
+   * @defaultvalue false
+   */
+  dot?: boolean;
+}
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

163992

increased by52.83%

Number of package files

149

increased by58.51%

Lines of code

2240

increased by60.34%

Dependency changes

• Updated@fluentui/react-make-styles@^9.0.0-alpha.11