From 607fb16f8c2695dfa10d283bc2d29d97ebe9a27a Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 28 Feb 2023 17:17:53 -0800 Subject: [PATCH 01/19] add raw html --- .../src/components/Tag/renderTag.tsx | 20 ++++++++++++++++++- .../components/TagButton/renderTagButton.tsx | 20 ++++++++++++++++++- 2 files changed, 38 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-tags/src/components/Tag/renderTag.tsx b/packages/react-components/react-tags/src/components/Tag/renderTag.tsx index 07a4f9804be21b..a6fa25c5e16188 100644 --- a/packages/react-components/react-tags/src/components/Tag/renderTag.tsx +++ b/packages/react-components/react-tags/src/components/Tag/renderTag.tsx @@ -9,5 +9,23 @@ export const renderTag_unstable = (state: TagState) => { const { slots, slotProps } = getSlots(state); // TODO Add additional slots in the appropriate place - return ; + return ( + + +
+ +
+
i
+
Primary Text
+
Secondary Text
+ +
+ +
+ + ); }; diff --git a/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx b/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx index b96dbec44bf5bb..0afd74b82e58b0 100644 --- a/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx +++ b/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx @@ -9,5 +9,23 @@ export const renderTagButton_unstable = (state: TagButtonState) => { const { slots, slotProps } = getSlots(state); // TODO Add additional slots in the appropriate place - return ; + return ( + + +
+ +
+ + ); }; From b6bbff48d0ffca5f2002a2117aa4305cb687e2ef Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Thu, 2 Mar 2023 14:27:45 -0800 Subject: [PATCH 02/19] add types and update render to use slots --- .../react-components/react-tags/package.json | 1 + .../src/components/Tag/Tag.types.ts | 20 +++++++-- .../src/components/Tag/renderTag.tsx | 24 ++++------- .../react-tags/src/components/Tag/useTag.ts | 19 +++++--- .../src/components/Tag/useTagStyles.ts | 43 ++++++++++++++++--- .../stories/Tag/TagDefault.stories.tsx | 2 +- 6 files changed, 79 insertions(+), 30 deletions(-) diff --git a/packages/react-components/react-tags/package.json b/packages/react-components/react-tags/package.json index 49d91c4fe08695..88e8ad5e0a237d 100644 --- a/packages/react-components/react-tags/package.json +++ b/packages/react-components/react-tags/package.json @@ -32,6 +32,7 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { + "@fluentui/react-persona": "9.1.13", "@fluentui/react-theme": "^9.1.5", "@fluentui/react-utilities": "^9.6.0", "@griffel/react": "^1.5.2", diff --git a/packages/react-components/react-tags/src/components/Tag/Tag.types.ts b/packages/react-components/react-tags/src/components/Tag/Tag.types.ts index 2bb2b4b3227976..d2a3853ad2cc35 100644 --- a/packages/react-components/react-tags/src/components/Tag/Tag.types.ts +++ b/packages/react-components/react-tags/src/components/Tag/Tag.types.ts @@ -1,17 +1,29 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; +import { Persona } from '@fluentui/react-persona'; export type TagSlots = { - root: Slot<'div'>; + root: NonNullable>; + content?: Slot<'span'>; + persona?: Slot; + icon?: Slot<'span'>; + primaryText?: Slot<'span'>; + secondaryText?: Slot<'span'>; + dismiss?: Slot<'span'>; }; /** * Tag Props */ -export type TagProps = ComponentProps & {}; +export type TagProps = ComponentProps & { + size?: 'extra-small' | 'small' | 'medium'; + shape?: 'rounded' | 'circular'; + style?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline'; + disabled?: boolean; + checked?: boolean; + dismissible?: boolean; +}; /** * State used in rendering Tag */ export type TagState = ComponentState; -// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from TagProps. -// & Required> diff --git a/packages/react-components/react-tags/src/components/Tag/renderTag.tsx b/packages/react-components/react-tags/src/components/Tag/renderTag.tsx index a6fa25c5e16188..238bec8d0f4464 100644 --- a/packages/react-components/react-tags/src/components/Tag/renderTag.tsx +++ b/packages/react-components/react-tags/src/components/Tag/renderTag.tsx @@ -11,21 +11,15 @@ export const renderTag_unstable = (state: TagState) => { // TODO Add additional slots in the appropriate place return ( - -
- -
-
i
-
Primary Text
-
Secondary Text
- -
- -
+ {slots.content && ( + + {slots.persona && } + {slots.icon && } + {slots.primaryText && } + {slots.secondaryText && } + + )} + {slots.dismiss && } ); }; diff --git a/packages/react-components/react-tags/src/components/Tag/useTag.ts b/packages/react-components/react-tags/src/components/Tag/useTag.ts index 67bed0af432f4f..8117d194081f57 100644 --- a/packages/react-components/react-tags/src/components/Tag/useTag.ts +++ b/packages/react-components/react-tags/src/components/Tag/useTag.ts @@ -1,6 +1,7 @@ import * as React from 'react'; -import { getNativeElementProps } from '@fluentui/react-utilities'; +import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; import type { TagProps, TagState } from './Tag.types'; +import { Persona } from '@fluentui/react-persona'; /** * Create the state required to render Tag. @@ -13,16 +14,24 @@ import type { TagProps, TagState } from './Tag.types'; */ export const useTag_unstable = (props: TagProps, ref: React.Ref): TagState => { return { - // TODO add appropriate props/defaults components: { - // TODO add each slot's element type or component root: 'div', + content: 'span', + persona: Persona, + icon: 'span', + primaryText: 'span', + secondaryText: 'span', + dismiss: 'span', }, - // TODO add appropriate slots, for example: - // mySlot: resolveShorthand(props.mySlot), root: getNativeElementProps('div', { ref, ...props, }), + content: resolveShorthand(props.content, { required: true }), + persona: resolveShorthand(props.persona), + icon: resolveShorthand(props.icon), + primaryText: resolveShorthand(props.primaryText), + secondaryText: resolveShorthand(props.secondaryText), + dismiss: resolveShorthand(props.dismiss), }; }; diff --git a/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts b/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts index 6faa08d90aaf48..8bf6367406649c 100644 --- a/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts +++ b/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts @@ -4,8 +4,12 @@ import type { SlotClassNames } from '@fluentui/react-utilities'; export const tagClassNames: SlotClassNames = { root: 'fui-Tag', - // TODO: add class names for all slots on TagSlots. - // Should be of the form `: 'fui-Tag__` + content: 'fui-Tag_content', + persona: 'fui-Tag_persona', + icon: 'fui-Tag_icon', + primaryText: 'fui-Tag_primaryText', + secondaryText: 'fui-Tag_secondaryText', + dismiss: 'fui-Tag_dismiss', }; /** @@ -15,6 +19,12 @@ const useStyles = makeStyles({ root: { // TODO Add default styles for the root element }, + content: {}, + persona: {}, + icon: {}, + primaryText: {}, + secondaryText: {}, + dismiss: {}, // TODO add additional classes for different states and/or slots }); @@ -25,9 +35,32 @@ const useStyles = makeStyles({ export const useTagStyles_unstable = (state: TagState): TagState => { const styles = useStyles(); state.root.className = mergeClasses(tagClassNames.root, styles.root, state.root.className); - - // TODO Add class names to slots, for example: - // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className); + if (state.content) { + state.content.className = mergeClasses(tagClassNames.content, styles.content, state.content.className); + } + if (state.persona) { + state.persona.className = mergeClasses(tagClassNames.persona, styles.persona, state.persona.className); + } + if (state.icon) { + state.icon.className = mergeClasses(tagClassNames.icon, styles.icon, state.icon.className); + } + if (state.primaryText) { + state.primaryText.className = mergeClasses( + tagClassNames.primaryText, + styles.primaryText, + state.primaryText.className, + ); + } + if (state.secondaryText) { + state.secondaryText.className = mergeClasses( + tagClassNames.secondaryText, + styles.secondaryText, + state.secondaryText.className, + ); + } + if (state.dismiss) { + state.dismiss.className = mergeClasses(tagClassNames.dismiss, styles.dismiss, state.dismiss.className); + } return state; }; diff --git a/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx index 342622eceed82b..f749d16b0a0182 100644 --- a/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx +++ b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx @@ -1,4 +1,4 @@ import * as React from 'react'; import { Tag, TagProps } from '@fluentui/react-tags'; -export const Default = (props: Partial) => ; +export const Default = (props: Partial) => ; From fd1b1432ebe3bf84515733e69d9cbd48f61e9308 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Mon, 6 Mar 2023 15:04:33 -0800 Subject: [PATCH 03/19] init slots and layout setup for tag --- .../react-components/react-tags/package.json | 2 +- .../src/components/Tag/Tag.types.ts | 13 ++--- .../src/components/Tag/renderTag.tsx | 4 +- .../components/Tag/{useTag.ts => useTag.tsx} | 33 +++++++++++-- .../src/components/Tag/useTagStyles.ts | 48 +++++++++++++------ .../stories/Tag/TagDefault.stories.tsx | 18 ++++++- 6 files changed, 89 insertions(+), 29 deletions(-) rename packages/react-components/react-tags/src/components/Tag/{useTag.ts => useTag.tsx} (60%) diff --git a/packages/react-components/react-tags/package.json b/packages/react-components/react-tags/package.json index 88e8ad5e0a237d..d15dce1c6901cb 100644 --- a/packages/react-components/react-tags/package.json +++ b/packages/react-components/react-tags/package.json @@ -32,7 +32,7 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-persona": "9.1.13", + "@fluentui/react-avatar": "9.3.7", "@fluentui/react-theme": "^9.1.5", "@fluentui/react-utilities": "^9.6.0", "@griffel/react": "^1.5.2", diff --git a/packages/react-components/react-tags/src/components/Tag/Tag.types.ts b/packages/react-components/react-tags/src/components/Tag/Tag.types.ts index d2a3853ad2cc35..1b4d377c6d49e6 100644 --- a/packages/react-components/react-tags/src/components/Tag/Tag.types.ts +++ b/packages/react-components/react-tags/src/components/Tag/Tag.types.ts @@ -1,14 +1,14 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; -import { Persona } from '@fluentui/react-persona'; +import { Avatar } from '@fluentui/react-avatar'; export type TagSlots = { root: NonNullable>; content?: Slot<'span'>; - persona?: Slot; + avatar?: Slot; icon?: Slot<'span'>; primaryText?: Slot<'span'>; secondaryText?: Slot<'span'>; - dismiss?: Slot<'span'>; + dismissButton?: NonNullable>; }; /** @@ -17,13 +17,14 @@ export type TagSlots = { export type TagProps = ComponentProps & { size?: 'extra-small' | 'small' | 'medium'; shape?: 'rounded' | 'circular'; - style?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline'; + appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline'; disabled?: boolean; checked?: boolean; - dismissible?: boolean; + dismissable?: boolean; }; /** * State used in rendering Tag */ -export type TagState = ComponentState; +export type TagState = ComponentState & + Required>; diff --git a/packages/react-components/react-tags/src/components/Tag/renderTag.tsx b/packages/react-components/react-tags/src/components/Tag/renderTag.tsx index 238bec8d0f4464..73293eca119e61 100644 --- a/packages/react-components/react-tags/src/components/Tag/renderTag.tsx +++ b/packages/react-components/react-tags/src/components/Tag/renderTag.tsx @@ -13,13 +13,13 @@ export const renderTag_unstable = (state: TagState) => { {slots.content && ( - {slots.persona && } + {slots.avatar && } {slots.icon && } {slots.primaryText && } {slots.secondaryText && } )} - {slots.dismiss && } + {slots.dismissButton && state.dismissable && } ); }; diff --git a/packages/react-components/react-tags/src/components/Tag/useTag.ts b/packages/react-components/react-tags/src/components/Tag/useTag.tsx similarity index 60% rename from packages/react-components/react-tags/src/components/Tag/useTag.ts rename to packages/react-components/react-tags/src/components/Tag/useTag.tsx index 8117d194081f57..c80ea7f88f390f 100644 --- a/packages/react-components/react-tags/src/components/Tag/useTag.ts +++ b/packages/react-components/react-tags/src/components/Tag/useTag.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; import type { TagProps, TagState } from './Tag.types'; -import { Persona } from '@fluentui/react-persona'; +import { Dismiss16Filled } from '@fluentui/react-icons'; +import { Avatar } from '@fluentui/react-avatar'; /** * Create the state required to render Tag. @@ -13,25 +14,47 @@ import { Persona } from '@fluentui/react-persona'; * @param ref - reference to root HTMLElement of Tag */ export const useTag_unstable = (props: TagProps, ref: React.Ref): TagState => { + const { + checked = false, + disabled = false, + dismissable = false, + shape = 'rounded', + size = 'medium', + appearance = 'filled-lighter', + } = props; + return { components: { root: 'div', content: 'span', - persona: Persona, + avatar: Avatar, icon: 'span', primaryText: 'span', secondaryText: 'span', - dismiss: 'span', + dismissButton: 'button', }, + checked, + disabled, + dismissable, + shape, + size, + appearance, root: getNativeElementProps('div', { ref, ...props, }), content: resolveShorthand(props.content, { required: true }), - persona: resolveShorthand(props.persona), + avatar: resolveShorthand(props.avatar), icon: resolveShorthand(props.icon), primaryText: resolveShorthand(props.primaryText), secondaryText: resolveShorthand(props.secondaryText), - dismiss: resolveShorthand(props.dismiss), + dismissButton: resolveShorthand(props.dismissButton, { + required: true, + defaultProps: { + disabled: props.disabled, + type: 'button', + children: , + }, + }), }; }; diff --git a/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts b/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts index 8bf6367406649c..590e8cdfcd83af 100644 --- a/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts +++ b/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts @@ -1,15 +1,15 @@ -import { makeStyles, mergeClasses } from '@griffel/react'; +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import type { TagSlots, TagState } from './Tag.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; export const tagClassNames: SlotClassNames = { root: 'fui-Tag', content: 'fui-Tag_content', - persona: 'fui-Tag_persona', + avatar: 'fui-Tag_avatar', icon: 'fui-Tag_icon', primaryText: 'fui-Tag_primaryText', secondaryText: 'fui-Tag_secondaryText', - dismiss: 'fui-Tag_dismiss', + dismissButton: 'fui-Tag_dismissButton', }; /** @@ -17,14 +17,30 @@ export const tagClassNames: SlotClassNames = { */ const useStyles = makeStyles({ root: { - // TODO Add default styles for the root element + display: 'inline-flex', }, - content: {}, - persona: {}, - icon: {}, - primaryText: {}, - secondaryText: {}, - dismiss: {}, + content: { + display: 'inline-grid', + gridTemplateColumns: 'auto 8px auto auto 8px auto', + gridTemplateRows: '1fr auto auto 1fr', + gridTemplateAreas: ` + "avatar x icon . y" + "avatar x icon primary y" + "avatar x icon secondary y" + "avatar x icon . y" + `, + }, + avatar: { + alignSelf: 'center', + ...shorthands.gridArea('avatar'), + }, + icon: { + alignSelf: 'center', + ...shorthands.gridArea('icon'), + }, + primaryText: { ...shorthands.gridArea('primary') }, + secondaryText: { ...shorthands.gridArea('secondary') }, + dismissButton: {}, // TODO add additional classes for different states and/or slots }); @@ -38,8 +54,8 @@ export const useTagStyles_unstable = (state: TagState): TagState => { if (state.content) { state.content.className = mergeClasses(tagClassNames.content, styles.content, state.content.className); } - if (state.persona) { - state.persona.className = mergeClasses(tagClassNames.persona, styles.persona, state.persona.className); + if (state.avatar) { + state.avatar.className = mergeClasses(tagClassNames.avatar, styles.avatar, state.avatar.className); } if (state.icon) { state.icon.className = mergeClasses(tagClassNames.icon, styles.icon, state.icon.className); @@ -58,8 +74,12 @@ export const useTagStyles_unstable = (state: TagState): TagState => { state.secondaryText.className, ); } - if (state.dismiss) { - state.dismiss.className = mergeClasses(tagClassNames.dismiss, styles.dismiss, state.dismiss.className); + if (state.dismissButton) { + state.dismissButton.className = mergeClasses( + tagClassNames.dismissButton, + styles.dismissButton, + state.dismissButton.className, + ); } return state; diff --git a/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx index f749d16b0a0182..c6639a6746769a 100644 --- a/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx +++ b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx @@ -1,4 +1,20 @@ import * as React from 'react'; import { Tag, TagProps } from '@fluentui/react-tags'; +import { Calendar3Day28Regular } from '@fluentui/react-icons'; -export const Default = (props: Partial) => ; +export const Default = (props: Partial) => ( + } + primaryText="Primary text" + secondaryText="Secondary text" + dismissable={true} + {...props} + /> +); From 6843d4c0abedeebd426e095be98c67f73d81e6b9 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Mon, 6 Mar 2023 15:12:19 -0800 Subject: [PATCH 04/19] init pass on Tag button --- .../components/TagButton/TagButton.types.ts | 23 ++++-- .../components/TagButton/renderTagButton.tsx | 26 +++---- .../src/components/TagButton/useTagButton.ts | 28 -------- .../src/components/TagButton/useTagButton.tsx | 60 ++++++++++++++++ .../TagButton/useTagButtonStyles.ts | 71 +++++++++++++++++-- .../TagButton/TagButtonDefault.stories.tsx | 18 ++++- 6 files changed, 169 insertions(+), 57 deletions(-) delete mode 100644 packages/react-components/react-tags/src/components/TagButton/useTagButton.ts create mode 100644 packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx diff --git a/packages/react-components/react-tags/src/components/TagButton/TagButton.types.ts b/packages/react-components/react-tags/src/components/TagButton/TagButton.types.ts index d8590ba8b3d3b4..2909aceadc7cc2 100644 --- a/packages/react-components/react-tags/src/components/TagButton/TagButton.types.ts +++ b/packages/react-components/react-tags/src/components/TagButton/TagButton.types.ts @@ -1,17 +1,30 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; +import { Avatar } from '@fluentui/react-avatar'; export type TagButtonSlots = { - root: Slot<'div'>; + root: NonNullable>; + contentButton?: Slot<'button'>; + avatar?: Slot; + icon?: Slot<'span'>; + primaryText?: Slot<'span'>; + secondaryText?: Slot<'span'>; + dismissButton?: NonNullable>; }; /** * TagButton Props */ -export type TagButtonProps = ComponentProps & {}; +export type TagButtonProps = ComponentProps & { + size?: 'extra-small' | 'small' | 'medium'; + shape?: 'rounded' | 'circular'; + appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline'; + disabled?: boolean; + checked?: boolean; + dismissable?: boolean; +}; /** * State used in rendering TagButton */ -export type TagButtonState = ComponentState; -// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from TagButtonProps. -// & Required> +export type TagButtonState = ComponentState & + Required>; diff --git a/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx b/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx index 0afd74b82e58b0..32503ddad727b8 100644 --- a/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx +++ b/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx @@ -3,7 +3,7 @@ import { getSlots } from '@fluentui/react-utilities'; import type { TagButtonState, TagButtonSlots } from './TagButton.types'; /** - * Render the final JSX of TagButton + * Render the final JSX of Tag */ export const renderTagButton_unstable = (state: TagButtonState) => { const { slots, slotProps } = getSlots(state); @@ -11,21 +11,15 @@ export const renderTagButton_unstable = (state: TagButtonState) => { // TODO Add additional slots in the appropriate place return ( - -
- -
+ {slots.contentButton && ( + + {slots.avatar && } + {slots.icon && } + {slots.primaryText && } + {slots.secondaryText && } + + )} + {slots.dismissButton && state.dismissable && } ); }; diff --git a/packages/react-components/react-tags/src/components/TagButton/useTagButton.ts b/packages/react-components/react-tags/src/components/TagButton/useTagButton.ts deleted file mode 100644 index 912c9a85cc99f1..00000000000000 --- a/packages/react-components/react-tags/src/components/TagButton/useTagButton.ts +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import { getNativeElementProps } from '@fluentui/react-utilities'; -import type { TagButtonProps, TagButtonState } from './TagButton.types'; - -/** - * Create the state required to render TagButton. - * - * The returned state can be modified with hooks such as useTagButtonStyles_unstable, - * before being passed to renderTagButton_unstable. - * - * @param props - props from this instance of TagButton - * @param ref - reference to root HTMLElement of TagButton - */ -export const useTagButton_unstable = (props: TagButtonProps, ref: React.Ref): TagButtonState => { - return { - // TODO add appropriate props/defaults - components: { - // TODO add each slot's element type or component - root: 'div', - }, - // TODO add appropriate slots, for example: - // mySlot: resolveShorthand(props.mySlot), - root: getNativeElementProps('div', { - ref, - ...props, - }), - }; -}; diff --git a/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx b/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx new file mode 100644 index 00000000000000..b4efff759239b0 --- /dev/null +++ b/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx @@ -0,0 +1,60 @@ +import * as React from 'react'; +import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; +import type { TagButtonProps, TagButtonState } from './TagButton.types'; +import { Dismiss16Filled } from '@fluentui/react-icons'; +import { Avatar } from '@fluentui/react-avatar'; + +/** + * Create the state required to render TagButton. + * + * The returned state can be modified with hooks such as useTagButtonStyles_unstable, + * before being passed to renderTagButton_unstable. + * + * @param props - props from this instance of TagButton + * @param ref - reference to root HTMLElement of TagButton + */ +export const useTagButton_unstable = (props: TagButtonProps, ref: React.Ref): TagButtonState => { + const { + checked = false, + disabled = false, + dismissable = false, + shape = 'rounded', + size = 'medium', + appearance = 'filled-lighter', + } = props; + + return { + components: { + root: 'div', + contentButton: 'button', + avatar: Avatar, + icon: 'span', + primaryText: 'span', + secondaryText: 'span', + dismissButton: 'button', + }, + checked, + disabled, + dismissable, + shape, + size, + appearance, + root: getNativeElementProps('div', { + ref, + ...props, + }), + contentButton: resolveShorthand(props.contentButton, { required: true }), + avatar: resolveShorthand(props.avatar), + icon: resolveShorthand(props.icon), + primaryText: resolveShorthand(props.primaryText), + secondaryText: resolveShorthand(props.secondaryText), + dismissButton: resolveShorthand(props.dismissButton, { + required: true, + defaultProps: { + disabled: props.disabled, + type: 'button', + children: , + }, + }), + }; +}; diff --git a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.ts b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.ts index 64364e62d1d3c8..bed43ce7ffbca4 100644 --- a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.ts +++ b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.ts @@ -1,11 +1,15 @@ -import { makeStyles, mergeClasses } from '@griffel/react'; +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import type { TagButtonSlots, TagButtonState } from './TagButton.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; export const tagButtonClassNames: SlotClassNames = { root: 'fui-TagButton', - // TODO: add class names for all slots on TagButtonSlots. - // Should be of the form `: 'fui-TagButton__` + contentButton: 'fui-TagButton_contentButton', + avatar: 'fui-TagButton_avatar', + icon: 'fui-TagButton_icon', + primaryText: 'fui-TagButton_primaryText', + secondaryText: 'fui-TagButton_secondaryText', + dismissButton: 'fui-TagButton_dismissButton', }; /** @@ -13,8 +17,30 @@ export const tagButtonClassNames: SlotClassNames = { */ const useStyles = makeStyles({ root: { - // TODO Add default styles for the root element + display: 'inline-flex', }, + contentButton: { + display: 'inline-grid', + gridTemplateColumns: 'auto 8px auto auto 8px auto', + gridTemplateRows: '1fr auto auto 1fr', + gridTemplateAreas: ` + "avatar x icon . y" + "avatar x icon primary y" + "avatar x icon secondary y" + "avatar x icon . y" + `, + }, + avatar: { + alignSelf: 'center', + ...shorthands.gridArea('avatar'), + }, + icon: { + alignSelf: 'center', + ...shorthands.gridArea('icon'), + }, + primaryText: { ...shorthands.gridArea('primary') }, + secondaryText: { ...shorthands.gridArea('secondary') }, + dismissButton: {}, // TODO add additional classes for different states and/or slots }); @@ -25,9 +51,40 @@ const useStyles = makeStyles({ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonState => { const styles = useStyles(); state.root.className = mergeClasses(tagButtonClassNames.root, styles.root, state.root.className); - - // TODO Add class names to slots, for example: - // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className); + if (state.contentButton) { + state.contentButton.className = mergeClasses( + tagButtonClassNames.contentButton, + styles.contentButton, + state.contentButton.className, + ); + } + if (state.avatar) { + state.avatar.className = mergeClasses(tagButtonClassNames.avatar, styles.avatar, state.avatar.className); + } + if (state.icon) { + state.icon.className = mergeClasses(tagButtonClassNames.icon, styles.icon, state.icon.className); + } + if (state.primaryText) { + state.primaryText.className = mergeClasses( + tagButtonClassNames.primaryText, + styles.primaryText, + state.primaryText.className, + ); + } + if (state.secondaryText) { + state.secondaryText.className = mergeClasses( + tagButtonClassNames.secondaryText, + styles.secondaryText, + state.secondaryText.className, + ); + } + if (state.dismissButton) { + state.dismissButton.className = mergeClasses( + tagButtonClassNames.dismissButton, + styles.dismissButton, + state.dismissButton.className, + ); + } return state; }; diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx b/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx index 6956d82a32f358..08c2b41a875738 100644 --- a/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx +++ b/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx @@ -1,4 +1,20 @@ import * as React from 'react'; import { TagButton, TagButtonProps } from '@fluentui/react-tags'; +import { Calendar3Day28Regular } from '@fluentui/react-icons'; -export const Default = (props: Partial) => ; +export const Default = (props: Partial) => ( + } + primaryText="Primary text" + secondaryText="Secondary text" + dismissable={true} + {...props} + /> +); From c02029ce460f4e7b195a6eafa5c877e5df408087 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Mon, 6 Mar 2023 15:26:24 -0800 Subject: [PATCH 05/19] fix dep version --- packages/react-components/react-tags/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-tags/package.json b/packages/react-components/react-tags/package.json index d15dce1c6901cb..febdd0c2542314 100644 --- a/packages/react-components/react-tags/package.json +++ b/packages/react-components/react-tags/package.json @@ -32,7 +32,7 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-avatar": "9.3.7", + "@fluentui/react-avatar": "^9.3.7", "@fluentui/react-theme": "^9.1.5", "@fluentui/react-utilities": "^9.6.0", "@griffel/react": "^1.5.2", From 1345a2e7dda3e76ec1dcb3705e3c6be3a35d9d62 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 7 Mar 2023 07:37:02 -0800 Subject: [PATCH 06/19] add icons to package.json --- packages/react-components/react-tags/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-components/react-tags/package.json b/packages/react-components/react-tags/package.json index febdd0c2542314..a51e00f9619f7c 100644 --- a/packages/react-components/react-tags/package.json +++ b/packages/react-components/react-tags/package.json @@ -34,6 +34,7 @@ "dependencies": { "@fluentui/react-avatar": "^9.3.7", "@fluentui/react-theme": "^9.1.5", + "@fluentui/react-icons": "^2.0.175", "@fluentui/react-utilities": "^9.6.0", "@griffel/react": "^1.5.2", "tslib": "^2.1.0" From 01d968e02e2d1c5b1c2537b98ee202f0b6d0dfa7 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 7 Mar 2023 07:50:57 -0800 Subject: [PATCH 07/19] api update --- .../react-tags/etc/react-tags.api.md | 41 ++++++++++++++++--- 1 file changed, 35 insertions(+), 6 deletions(-) diff --git a/packages/react-components/react-tags/etc/react-tags.api.md b/packages/react-components/react-tags/etc/react-tags.api.md index a96f539e01bfc4..749af6e50ff3d2 100644 --- a/packages/react-components/react-tags/etc/react-tags.api.md +++ b/packages/react-components/react-tags/etc/react-tags.api.md @@ -4,6 +4,9 @@ ```ts +/// + +import { Avatar } from '@fluentui/react-avatar'; import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -27,29 +30,55 @@ export const TagButton: ForwardRefComponent; export const tagButtonClassNames: SlotClassNames; // @public -export type TagButtonProps = ComponentProps & {}; +export type TagButtonProps = ComponentProps & { + size?: 'extra-small' | 'small' | 'medium'; + shape?: 'rounded' | 'circular'; + appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline'; + disabled?: boolean; + checked?: boolean; + dismissable?: boolean; +}; // @public (undocumented) export type TagButtonSlots = { - root: Slot<'div'>; + root: NonNullable>; + contentButton?: Slot<'button'>; + avatar?: Slot; + icon?: Slot<'span'>; + primaryText?: Slot<'span'>; + secondaryText?: Slot<'span'>; + dismissButton?: NonNullable>; }; // @public -export type TagButtonState = ComponentState; +export type TagButtonState = ComponentState & Required>; // @public (undocumented) export const tagClassNames: SlotClassNames; // @public -export type TagProps = ComponentProps & {}; +export type TagProps = ComponentProps & { + size?: 'extra-small' | 'small' | 'medium'; + shape?: 'rounded' | 'circular'; + appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline'; + disabled?: boolean; + checked?: boolean; + dismissable?: boolean; +}; // @public (undocumented) export type TagSlots = { - root: Slot<'div'>; + root: NonNullable>; + content?: Slot<'span'>; + avatar?: Slot; + icon?: Slot<'span'>; + primaryText?: Slot<'span'>; + secondaryText?: Slot<'span'>; + dismissButton?: NonNullable>; }; // @public -export type TagState = ComponentState; +export type TagState = ComponentState & Required>; // @public export const useTag_unstable: (props: TagProps, ref: React_2.Ref) => TagState; From 33b2f8b0aa48e5079cdab7bafafd5e989ef064b0 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Tue, 7 Mar 2023 08:55:59 -0800 Subject: [PATCH 08/19] update tests --- .../src/components/Tag/Tag.test.tsx | 13 ++++- .../Tag/__snapshots__/Tag.test.tsx.snap | 52 ++++++++++++++++++- .../src/components/Tag/useTagStyles.ts | 12 ++--- .../components/TagButton/TagButton.test.tsx | 13 ++++- .../__snapshots__/TagButton.test.tsx.snap | 52 ++++++++++++++++++- .../TagButton/useTagButtonStyles.ts | 12 ++--- 6 files changed, 138 insertions(+), 16 deletions(-) diff --git a/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx b/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx index 80af2199dba4ba..f883681c531f31 100644 --- a/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx +++ b/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx @@ -3,16 +3,27 @@ import { render } from '@testing-library/react'; import { Tag } from './Tag'; import { isConformant } from '../../testing/isConformant'; +const requiredProps = { + avatar: { + name: 'Katri Athokas', + }, + icon: 'i', + primaryText: 'Primary text', + secondaryText: 'Secondary text', + dismissable: true, +}; + describe('Tag', () => { isConformant({ Component: Tag, displayName: 'Tag', + requiredProps, }); // TODO add more tests here, and create visual regression tests in /apps/vr-tests it('renders a default state', () => { - const result = render(Default Tag); + const result = render(Default Tag); expect(result.container).toMatchSnapshot(); }); }); diff --git a/packages/react-components/react-tags/src/components/Tag/__snapshots__/Tag.test.tsx.snap b/packages/react-components/react-tags/src/components/Tag/__snapshots__/Tag.test.tsx.snap index f2701f46afe480..30930745ddda77 100644 --- a/packages/react-components/react-tags/src/components/Tag/__snapshots__/Tag.test.tsx.snap +++ b/packages/react-components/react-tags/src/components/Tag/__snapshots__/Tag.test.tsx.snap @@ -5,7 +5,57 @@ exports[`Tag renders a default state 1`] = `
- Default Tag + + + + KA + + + + i + + + Primary text + + + Secondary text + + +
`; diff --git a/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts b/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts index 590e8cdfcd83af..60988d1ec939fa 100644 --- a/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts +++ b/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts @@ -4,12 +4,12 @@ import type { SlotClassNames } from '@fluentui/react-utilities'; export const tagClassNames: SlotClassNames = { root: 'fui-Tag', - content: 'fui-Tag_content', - avatar: 'fui-Tag_avatar', - icon: 'fui-Tag_icon', - primaryText: 'fui-Tag_primaryText', - secondaryText: 'fui-Tag_secondaryText', - dismissButton: 'fui-Tag_dismissButton', + content: 'fui-Tag__content', + avatar: 'fui-Tag__avatar', + icon: 'fui-Tag__icon', + primaryText: 'fui-Tag__primaryText', + secondaryText: 'fui-Tag__secondaryText', + dismissButton: 'fui-Tag__dismissButton', }; /** diff --git a/packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx b/packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx index a5257d7328b180..00568aabcc30d1 100644 --- a/packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx +++ b/packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx @@ -3,16 +3,27 @@ import { render } from '@testing-library/react'; import { TagButton } from './TagButton'; import { isConformant } from '../../testing/isConformant'; +const requiredProps = { + avatar: { + name: 'Katri Athokas', + }, + icon: 'i', + primaryText: 'Primary text', + secondaryText: 'Secondary text', + dismissable: true, +}; + describe('TagButton', () => { isConformant({ Component: TagButton, displayName: 'TagButton', + requiredProps, }); // TODO add more tests here, and create visual regression tests in /apps/vr-tests it('renders a default state', () => { - const result = render(Default TagButton); + const result = render(Default TagButton); expect(result.container).toMatchSnapshot(); }); }); diff --git a/packages/react-components/react-tags/src/components/TagButton/__snapshots__/TagButton.test.tsx.snap b/packages/react-components/react-tags/src/components/TagButton/__snapshots__/TagButton.test.tsx.snap index 10f50a682bcb66..d6ab63bcb6107c 100644 --- a/packages/react-components/react-tags/src/components/TagButton/__snapshots__/TagButton.test.tsx.snap +++ b/packages/react-components/react-tags/src/components/TagButton/__snapshots__/TagButton.test.tsx.snap @@ -5,7 +5,57 @@ exports[`TagButton renders a default state 1`] = `
- Default TagButton + +
`; diff --git a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.ts b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.ts index bed43ce7ffbca4..ceb61e20ce6047 100644 --- a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.ts +++ b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.ts @@ -4,12 +4,12 @@ import type { SlotClassNames } from '@fluentui/react-utilities'; export const tagButtonClassNames: SlotClassNames = { root: 'fui-TagButton', - contentButton: 'fui-TagButton_contentButton', - avatar: 'fui-TagButton_avatar', - icon: 'fui-TagButton_icon', - primaryText: 'fui-TagButton_primaryText', - secondaryText: 'fui-TagButton_secondaryText', - dismissButton: 'fui-TagButton_dismissButton', + contentButton: 'fui-TagButton__contentButton', + avatar: 'fui-TagButton__avatar', + icon: 'fui-TagButton__icon', + primaryText: 'fui-TagButton__primaryText', + secondaryText: 'fui-TagButton__secondaryText', + dismissButton: 'fui-TagButton__dismissButton', }; /** From bc7dff9ad229a65d9fe3285b73d35bd9554ff5de Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Wed, 8 Mar 2023 08:09:39 -0800 Subject: [PATCH 09/19] Update packages/react-components/react-tags/src/components/Tag/Tag.types.ts Co-authored-by: Esteban Munoz Facusse --- .../react-components/react-tags/src/components/Tag/Tag.types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-tags/src/components/Tag/Tag.types.ts b/packages/react-components/react-tags/src/components/Tag/Tag.types.ts index 1b4d377c6d49e6..8cffeea46be0d1 100644 --- a/packages/react-components/react-tags/src/components/Tag/Tag.types.ts +++ b/packages/react-components/react-tags/src/components/Tag/Tag.types.ts @@ -27,4 +27,4 @@ export type TagProps = ComponentProps & { * State used in rendering Tag */ export type TagState = ComponentState & - Required>; + Required>; From cb8b4f1bbaad16bc3311c715280a0d2ad69377f1 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Wed, 8 Mar 2023 08:10:11 -0800 Subject: [PATCH 10/19] Update packages/react-components/react-tags/src/components/Tag/useTag.tsx Co-authored-by: Esteban Munoz Facusse --- .../react-components/react-tags/src/components/Tag/useTag.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-tags/src/components/Tag/useTag.tsx b/packages/react-components/react-tags/src/components/Tag/useTag.tsx index c80ea7f88f390f..1beed6165cd0a0 100644 --- a/packages/react-components/react-tags/src/components/Tag/useTag.tsx +++ b/packages/react-components/react-tags/src/components/Tag/useTag.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; -import type { TagProps, TagState } from './Tag.types'; import { Dismiss16Filled } from '@fluentui/react-icons'; import { Avatar } from '@fluentui/react-avatar'; +import type { TagProps, TagState } from './Tag.types'; /** * Create the state required to render Tag. From ed79cd6b4a811f1a14a79a5c22a81d9e6c091e1d Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Wed, 8 Mar 2023 08:13:46 -0800 Subject: [PATCH 11/19] Update packages/react-components/react-tags/src/components/TagButton/TagButton.types.ts Co-authored-by: Esteban Munoz Facusse --- .../react-tags/src/components/TagButton/TagButton.types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-tags/src/components/TagButton/TagButton.types.ts b/packages/react-components/react-tags/src/components/TagButton/TagButton.types.ts index 2909aceadc7cc2..807800361a382e 100644 --- a/packages/react-components/react-tags/src/components/TagButton/TagButton.types.ts +++ b/packages/react-components/react-tags/src/components/TagButton/TagButton.types.ts @@ -27,4 +27,4 @@ export type TagButtonProps = ComponentProps & { * State used in rendering TagButton */ export type TagButtonState = ComponentState & - Required>; + Required>; From 30dcbe17ae7891287516d5b904fe29f0b29ed435 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Wed, 8 Mar 2023 08:14:09 -0800 Subject: [PATCH 12/19] Update packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx Co-authored-by: Esteban Munoz Facusse --- .../react-tags/src/components/TagButton/renderTagButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx b/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx index 32503ddad727b8..935bdef3c636b4 100644 --- a/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx +++ b/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx @@ -3,7 +3,7 @@ import { getSlots } from '@fluentui/react-utilities'; import type { TagButtonState, TagButtonSlots } from './TagButton.types'; /** - * Render the final JSX of Tag + * Render the final JSX of TagButton */ export const renderTagButton_unstable = (state: TagButtonState) => { const { slots, slotProps } = getSlots(state); From e0fb356c0efc6ea183bbcff13fffea4752d29759 Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Wed, 8 Mar 2023 08:21:49 -0800 Subject: [PATCH 13/19] remove unnecessary named columns --- .../react-tags/src/components/Tag/useTagStyles.ts | 8 ++++---- .../src/components/TagButton/useTagButtonStyles.ts | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts b/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts index 60988d1ec939fa..d388013ad1ebeb 100644 --- a/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts +++ b/packages/react-components/react-tags/src/components/Tag/useTagStyles.ts @@ -24,10 +24,10 @@ const useStyles = makeStyles({ gridTemplateColumns: 'auto 8px auto auto 8px auto', gridTemplateRows: '1fr auto auto 1fr', gridTemplateAreas: ` - "avatar x icon . y" - "avatar x icon primary y" - "avatar x icon secondary y" - "avatar x icon . y" + "avatar . icon . ." + "avatar . icon primary ." + "avatar . icon secondary ." + "avatar . icon . ." `, }, avatar: { diff --git a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.ts b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.ts index ceb61e20ce6047..c03ad488ae53f5 100644 --- a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.ts +++ b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.ts @@ -24,10 +24,10 @@ const useStyles = makeStyles({ gridTemplateColumns: 'auto 8px auto auto 8px auto', gridTemplateRows: '1fr auto auto 1fr', gridTemplateAreas: ` - "avatar x icon . y" - "avatar x icon primary y" - "avatar x icon secondary y" - "avatar x icon . y" + "avatar . icon . ." + "avatar . icon primary ." + "avatar . icon secondary ." + "avatar . icon . ." `, }, avatar: { From 1248f0a4db16728311a9a09b34188b9048d9fc5b Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Wed, 8 Mar 2023 15:51:47 -0800 Subject: [PATCH 14/19] Update packages/react-components/react-tags/src/components/Tag/useTag.tsx Co-authored-by: Sean Monahan --- .../react-components/react-tags/src/components/Tag/useTag.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-tags/src/components/Tag/useTag.tsx b/packages/react-components/react-tags/src/components/Tag/useTag.tsx index 1beed6165cd0a0..0965e8455d9712 100644 --- a/packages/react-components/react-tags/src/components/Tag/useTag.tsx +++ b/packages/react-components/react-tags/src/components/Tag/useTag.tsx @@ -51,7 +51,7 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref): T dismissButton: resolveShorthand(props.dismissButton, { required: true, defaultProps: { - disabled: props.disabled, + disabled, type: 'button', children: , }, From 0e2dcfb5e6f1761d012e74a4ecd75a01fd4be76f Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Wed, 8 Mar 2023 15:51:57 -0800 Subject: [PATCH 15/19] Update packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx Co-authored-by: Sean Monahan --- .../react-tags/src/components/TagButton/useTagButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx b/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx index b4efff759239b0..5a359ada2eec39 100644 --- a/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx +++ b/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx @@ -51,7 +51,7 @@ export const useTagButton_unstable = (props: TagButtonProps, ref: React.Ref, }, From fbe57979816793b2074cc081dd8386971f54362d Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Wed, 15 Mar 2023 10:45:36 -0700 Subject: [PATCH 16/19] bmp react utils to match master --- packages/react-components/react-tags/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-tags/package.json b/packages/react-components/react-tags/package.json index a51e00f9619f7c..2c419a2617e9db 100644 --- a/packages/react-components/react-tags/package.json +++ b/packages/react-components/react-tags/package.json @@ -35,7 +35,7 @@ "@fluentui/react-avatar": "^9.3.7", "@fluentui/react-theme": "^9.1.5", "@fluentui/react-icons": "^2.0.175", - "@fluentui/react-utilities": "^9.6.0", + "@fluentui/react-utilities": "^9.7.0", "@griffel/react": "^1.5.2", "tslib": "^2.1.0" }, From 9cde259433bebae95f3244a04075316a3019c30d Mon Sep 17 00:00:00 2001 From: Amber Date: Thu, 27 Apr 2023 08:55:49 +0200 Subject: [PATCH 17/19] Update packages/react-components/react-tags/package.json --- packages/react-components/react-tags/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-tags/package.json b/packages/react-components/react-tags/package.json index e8004e3d527471..6df62172ac1f7f 100644 --- a/packages/react-components/react-tags/package.json +++ b/packages/react-components/react-tags/package.json @@ -32,8 +32,8 @@ "@fluentui/scripts-tasks": "*" }, "dependencies": { - "@fluentui/react-avatar": "^9.3.7", - "@fluentui/react-icons": "^2.0.175", + "@fluentui/react-avatar": "^9.4.10", + "@fluentui/react-icons": "^2.0.196", "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", From 0e2b67623f8b9660094bb27f6ea93179c6d2bd32 Mon Sep 17 00:00:00 2001 From: Amber Date: Thu, 27 Apr 2023 09:31:10 +0200 Subject: [PATCH 18/19] Update api.md --- packages/react-components/react-tags/etc/react-tags.api.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-tags/etc/react-tags.api.md b/packages/react-components/react-tags/etc/react-tags.api.md index 749af6e50ff3d2..659e2b81f72266 100644 --- a/packages/react-components/react-tags/etc/react-tags.api.md +++ b/packages/react-components/react-tags/etc/react-tags.api.md @@ -51,7 +51,7 @@ export type TagButtonSlots = { }; // @public -export type TagButtonState = ComponentState & Required>; +export type TagButtonState = ComponentState & Required>; // @public (undocumented) export const tagClassNames: SlotClassNames; @@ -78,7 +78,7 @@ export type TagSlots = { }; // @public -export type TagState = ComponentState & Required>; +export type TagState = ComponentState & Required>; // @public export const useTag_unstable: (props: TagProps, ref: React_2.Ref) => TagState; From 57a0ed2b6d5e751c45406b836421a2baa532cfa7 Mon Sep 17 00:00:00 2001 From: Amber Date: Thu, 27 Apr 2023 10:00:49 +0200 Subject: [PATCH 19/19] Update test snapshot with react-icon update --- .../src/components/Tag/__snapshots__/Tag.test.tsx.snap | 2 +- .../components/TagButton/__snapshots__/TagButton.test.tsx.snap | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-tags/src/components/Tag/__snapshots__/Tag.test.tsx.snap b/packages/react-components/react-tags/src/components/Tag/__snapshots__/Tag.test.tsx.snap index 30930745ddda77..f66f95a0e95775 100644 --- a/packages/react-components/react-tags/src/components/Tag/__snapshots__/Tag.test.tsx.snap +++ b/packages/react-components/react-tags/src/components/Tag/__snapshots__/Tag.test.tsx.snap @@ -51,7 +51,7 @@ exports[`Tag renders a default state 1`] = ` xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/react-components/react-tags/src/components/TagButton/__snapshots__/TagButton.test.tsx.snap b/packages/react-components/react-tags/src/components/TagButton/__snapshots__/TagButton.test.tsx.snap index d6ab63bcb6107c..ad849b8d3f3003 100644 --- a/packages/react-components/react-tags/src/components/TagButton/__snapshots__/TagButton.test.tsx.snap +++ b/packages/react-components/react-tags/src/components/TagButton/__snapshots__/TagButton.test.tsx.snap @@ -51,7 +51,7 @@ exports[`TagButton renders a default state 1`] = ` xmlns="http://www.w3.org/2000/svg" >