fix(Badge): small fixes (#17087)

* feat(Badge): fix comment useBadge hook * feat(Badge): fix size values for useBadgeStyles * feat(Badge): fix border width for useBadgeStyles * feat(Badge): remove unnused theme in useBadgeStyles * feat(Badge): update color for useBadgeStyles * feat(Badge): remove unnused props from badge stories * feat(Badge): remove BadgeStatus * feat(Badge): add default values for BadgeProps * feat(Badge): update Badge API * Change files * Update packages/react-badge/src/components/Badge/useBadgeStyles.ts Co-authored-by: Ben Howell <[email protected]> * fix(Badge): update examples * fix(Badge): update json Co-authored-by: Ben Howell <[email protected]>
microsoft · Feb 23, 2021 · df7def5 · df7def5
1 parent f7066d7
commit df7def5
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 66 deletions.
diff --git a/change/@fluentui-react-badge-524d0da2-9534-46d5-8045-8d4e6123e20d.json b/change/@fluentui-react-badge-524d0da2-9534-46d5-8045-8d4e6123e20d.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat(Badge): update Badge API",
+  "packageName": "@fluentui/react-badge",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-examples-a5f1c9e8-88ce-44b0-92a2-c6f1e8db59e2.json b/change/@fluentui-react-examples-a5f1c9e8-88ce-44b0-92a2-c6f1e8db59e2.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat(Badge): remove unnused props from badge stories",
+  "packageName": "@fluentui/react-examples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-badge/etc/react-badge.api.md b/packages/react-badge/etc/react-badge.api.md
@@ -13,16 +13,15 @@ import { ShorthandProps } from '@fluentui/react-utilities';
 export const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLElement>>;
 
 // @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;
 }
 
 // @public (undocumented)
@@ -31,21 +30,18 @@ export type BadgeShape = 'rounded' | 'square' | 'circular';
 // @public
 export const badgeShorthandProps: (keyof BadgeProps)[];
 
+// @public (undocumented)
+export type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
+
 // @public (undocumented)
 export interface BadgeState extends BadgeProps {
     icon?: ObjectShorthandProps<HTMLSpanElement>;
     ref: React.MutableRefObject<HTMLElement>;
 }
 
-// @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
 export const useBadge: (props: BadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: BadgeProps | undefined) => BadgeState;
 

diff --git a/packages/react-badge/src/components/Badge/Badge.types.ts b/packages/react-badge/src/components/Badge/Badge.types.ts
@@ -4,25 +4,12 @@ import { ComponentProps, ShorthandProps, ObjectShorthandProps } from '@fluentui/
 /**
  * {@docCategory Badge}
  */
-export type SizeValue = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
+export type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
 
 /**
  * {@docCategory Badge}
  */
-export type BadgeStatus =
-  | 'success'
-  | 'warning'
-  | 'severe'
-  | 'accent'
-  | 'danger'
-  | 'important'
-  | 'informative'
-  | 'subtle';
-
-/**
- * {@docCategory Badge}
- */
-export type BadgeAppearances = 'filled' | 'outline' | 'ghost' | 'tint';
+export type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';
 
 /**
  * {@docCategory Badge}
@@ -35,23 +22,21 @@ export type BadgeShape = 'rounded' | 'square' | 'circular';
 export interface BadgeProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
   /**
    * A Badge can be sized.
+   * @defaultvalue medium
    */
-  size?: SizeValue;
-
-  /**
-   * A Badge can have status styles variants
-   */
-  status?: BadgeStatus;
+  size?: BadgeSize;
 
   /**
    * A Badge can be square, circular or rounded
+   * @defaultvalue circular
    */
   shape?: BadgeShape;
 
   /**
    * A Badge can be filled, outline, ghost, inverted
+   * @defaultvalue filled
    */
-  appearance?: BadgeAppearances;
+  appearance?: BadgeAppearance;
 
   /**
    * Icon slot
@@ -60,6 +45,7 @@ export interface BadgeProps extends ComponentProps, React.HTMLAttributes<HTMLEle
 
   /**
    * Position for Icon to be rendered
+   * @defaultvalue before
    */
   iconPosition?: 'before' | 'after';
 }

diff --git a/packages/react-badge/src/components/Badge/useBadge.ts b/packages/react-badge/src/components/Badge/useBadge.ts
@@ -10,7 +10,7 @@ export const badgeShorthandProps: (keyof BadgeProps)[] = ['icon'];
 const mergeProps = makeMergeProps<BadgeState>({ deepMerge: badgeShorthandProps });
 
 /**
- * Given user props, returns state and render function for a Badge.
+ * Returns the props and state required to render the component
  */
 export const useBadge = (props: BadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: BadgeProps): BadgeState => {
   const state = mergeProps(

diff --git a/packages/react-badge/src/components/Badge/useBadgeStyles.ts b/packages/react-badge/src/components/Badge/useBadgeStyles.ts
@@ -9,76 +9,77 @@ export const useRootStyles = makeStyles<BadgeState>([
     null,
     theme => ({
       display: 'inline-flex',
+      boxSizing: 'border-box',
       alignItems: 'center',
       justifyContent: 'center',
       backgroundColor: theme.alias.color.brand.brandBackground,
       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',
       fontFamily: theme.global.type.fontFamilies.base,
     }),
   ],
   [
     s => s.size === 'smallest',
-    theme => ({
+    {
       width: '6px',
       height: '6px',
       fontSize: '4px',
-    }),
+    },
   ],
   [
     s => s.size === 'smaller',
-    theme => ({
+    {
       width: '10px',
       height: '10px',
       fontSize: '6px',
-    }),
+    },
   ],
   [
     s => s.size === 'small',
-    theme => ({
-      minWidth: '4px',
+    {
+      minWidth: '16px',
       height: '16px',
       paddingRight: '6px',
       paddingLeft: '6px',
       gap: '4px',
       fontSize: '8px',
-    }),
+    },
   ],
   [
     s => s.size === 'medium',
-    theme => ({
+    {
       height: '20px',
-      minWidth: '4px',
+      minWidth: '20px',
       gap: '4px',
       paddingRight: '8px',
       paddingLeft: '8px',
       fontSize: '12px',
-    }),
+    },
   ],
   [
     s => s.size === 'large',
-    theme => ({
-      minWidth: '8px',
+    {
+      minWidth: '24px',
       height: '24px',
       paddingRight: '8px',
       paddingLeft: '8px',
       fontSize: '12px',
       gap: '6px',
-    }),
+    },
   ],
   [
     s => s.size === 'larger' || s.size === 'largest',
     theme => ({
-      minWidth: '8px',
+      minWidth: '32px',
       height: '32px',
       paddingRight: '12px',
       paddingLeft: '12px',
       gap: '6px',
       fontSize: '12px',
-      border: '2px',
+      borderWidth: theme.global.strokeWidth.thick,
     }),
   ],
   [s => s.shape === 'circular', theme => ({ borderRadius: theme.global.borderRadius.circular })],

diff --git a/packages/react-examples/src/react-badge/Badge/Badge.stories.tsx b/packages/react-examples/src/react-badge/Badge/Badge.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Badge, BadgeProps } from '@fluentui/react-badge';
+import { Badge } from '@fluentui/react-badge';
 
-const BadgeAppearanceExamples = (props: BadgeProps) => (
+export const BadgeAppearanceExample = () => (
   <>
     <h2>Circular (default)</h2>
     <div
@@ -53,5 +53,3 @@ const BadgeAppearanceExamples = (props: BadgeProps) => (
     </div>
   </>
 );
-
-export const BadgeAppearanceExample = () => <BadgeAppearanceExamples />;
diff --git a/packages/react-examples/src/react-badge/Badge/BadgeAppearance.stories.tsx b/packages/react-examples/src/react-badge/Badge/BadgeAppearance.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Badge, BadgeProps } from '@fluentui/react-badge';
+import { Badge } from '@fluentui/react-badge';
 
-const BadgeAppearanceExamples = (props: BadgeProps) => (
+export const BadgeAppearanceExample = () => (
   <div
     style={{
       display: 'flex',
@@ -32,5 +32,3 @@ const BadgeAppearanceExamples = (props: BadgeProps) => (
     </div>
   </div>
 );
-
-export const BadgeAppearanceExample = () => <BadgeAppearanceExamples />;
diff --git a/packages/react-examples/src/react-badge/Badge/BadgeContent.stories.tsx b/packages/react-examples/src/react-badge/Badge/BadgeContent.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Badge, BadgeProps } from '@fluentui/react-badge';
+import { Badge } from '@fluentui/react-badge';
 
-const BadgeContentExamples = (props: BadgeProps) => (
+export const BadgeContentExample = () => (
   <div
     style={{
       display: 'flex',
@@ -84,5 +84,3 @@ const BadgeContentExamples = (props: BadgeProps) => (
     </div>
   </div>
 );
-
-export const BadgeContentExample = () => <BadgeContentExamples />;
diff --git a/packages/react-examples/src/react-badge/Badge/BadgeIcon.stories.tsx b/packages/react-examples/src/react-badge/Badge/BadgeIcon.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Badge, BadgeProps } from '@fluentui/react-badge';
+import { Badge } from '@fluentui/react-badge';
 import { AcceptIcon } from '@fluentui/react-icons-mdl2';
 
-const BadgeIconExamples = (props: BadgeProps) => (
+export const BadgeIconExample = () => (
   <div
     style={{
       display: 'flex',
@@ -19,5 +19,3 @@ const BadgeIconExamples = (props: BadgeProps) => (
     <Badge size="largest" icon={<AcceptIcon />} />
   </div>
 );
-
-export const BadgeIconExample = () => <BadgeIconExamples />;