From b207d0f9601008f7c41f76b1698846e6362dec78 Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Mon, 12 Sep 2022 14:03:15 -0700 Subject: [PATCH 1/5] (docs): update Icon docs with examples --- .../src/Concepts/Icons/Icon.stories.mdx | 53 +++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/packages/react-components/react-components/src/Concepts/Icons/Icon.stories.mdx b/packages/react-components/react-components/src/Concepts/Icons/Icon.stories.mdx index 65626d90d08b5b..4cfa9e04ba6eb4 100644 --- a/packages/react-components/react-components/src/Concepts/Icons/Icon.stories.mdx +++ b/packages/react-components/react-components/src/Concepts/Icons/Icon.stories.mdx @@ -25,8 +25,61 @@ You can import the sized icons in a similar way: import { AccessTime24Filled } from '@fluentui/react-icons'; ``` +### List of available props + Each icon also accepts `className` and `primaryFill` props for styling. +| - Name - | Description | Default | +| ----------- | ---------------------------------------------------------------------------------------------------------------------- | -------------- | +| bundleIcon | Pass in the filled and unfilled version of an icon and this will combine them into one icon | - | +| className | Used to style the icon | - | +| filled | Used to determine whether the filled or unfilled version of an icon is the default when `bundleIcon` is used `boolean` | - | +| primaryFill | Used to change the primary fill of the icon | `currentColor` | +| title | Specifies the title attribute for the svg | - | + +### Example + +```tsx +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import { + AccessTimeFilled, + AccessTimeRegular, + bundleIcon, + iconFilledClassName, + iconRegularClassName, +} from '@fluentui/react-icons'; +import { makeStyles } from '@griffel/react'; + +const iconStyleProps: FluentIconsProps = { + primaryFill: 'purple', + className: 'iconClass', +}; + +const useIconStyles = makeStyles({ + icon: { + ':hover': { + [`& .${iconFilledClassName}`]: { + display: 'none', + }, + [`& .${iconRegularClassName}`]: { + display: 'inline', + }, + }, + }, +}); + +const AccessTime = bundleIcon(AccessTimeFilled, AccessTimeRegular); +const rootElement = document.getElementById('root'); +const styles = useIconStyles(); +ReactDOM.render( +
+ +
, + rootElement, +); +``` + ### Fluent icons as fonts Fluent icons can also be consumed as a font. The API is the same as the React element icons, and there are tools to allow you to more seamlessly integrate the font icons From c1f558360aa748a157d0059ef8bfd8395d365a2d Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Mon, 12 Sep 2022 14:23:19 -0700 Subject: [PATCH 2/5] change file --- ...ct-components-eca314cc-3bb0-44aa-bee3-e4a10f37354c.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-components-eca314cc-3bb0-44aa-bee3-e4a10f37354c.json diff --git a/change/@fluentui-react-components-eca314cc-3bb0-44aa-bee3-e4a10f37354c.json b/change/@fluentui-react-components-eca314cc-3bb0-44aa-bee3-e4a10f37354c.json new file mode 100644 index 00000000000000..785cde504bc978 --- /dev/null +++ b/change/@fluentui-react-components-eca314cc-3bb0-44aa-bee3-e4a10f37354c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "(docs): update Icon docs with examples", + "packageName": "@fluentui/react-components", + "email": "ololubek@microsoft.com", + "dependentChangeType": "patch" +} From 9db77783a3cd2b127e3163a79fd7bb61cf5a9f68 Mon Sep 17 00:00:00 2001 From: tomi-msft <66456876+tomi-msft@users.noreply.github.com> Date: Tue, 13 Sep 2022 11:15:17 -0700 Subject: [PATCH 3/5] Apply suggestions from code review Co-authored-by: Oleksandr Fediashov --- ...s-eca314cc-3bb0-44aa-bee3-e4a10f37354c.json | 2 +- .../src/Concepts/Icons/Icon.stories.mdx | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/change/@fluentui-react-components-eca314cc-3bb0-44aa-bee3-e4a10f37354c.json b/change/@fluentui-react-components-eca314cc-3bb0-44aa-bee3-e4a10f37354c.json index 785cde504bc978..193c8475ae6ed0 100644 --- a/change/@fluentui-react-components-eca314cc-3bb0-44aa-bee3-e4a10f37354c.json +++ b/change/@fluentui-react-components-eca314cc-3bb0-44aa-bee3-e4a10f37354c.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "(docs): update Icon docs with examples", + "comment": "docs: update Icon docs with examples", "packageName": "@fluentui/react-components", "email": "ololubek@microsoft.com", "dependentChangeType": "patch" diff --git a/packages/react-components/react-components/src/Concepts/Icons/Icon.stories.mdx b/packages/react-components/react-components/src/Concepts/Icons/Icon.stories.mdx index 4cfa9e04ba6eb4..471445da72854b 100644 --- a/packages/react-components/react-components/src/Concepts/Icons/Icon.stories.mdx +++ b/packages/react-components/react-components/src/Concepts/Icons/Icon.stories.mdx @@ -41,7 +41,6 @@ Each icon also accepts `className` and `primaryFill` props for styling. ```tsx import * as React from 'react'; -import * as ReactDOM from 'react-dom'; import { AccessTimeFilled, AccessTimeRegular, @@ -49,7 +48,7 @@ import { iconFilledClassName, iconRegularClassName, } from '@fluentui/react-icons'; -import { makeStyles } from '@griffel/react'; +import { makeStyles } from '@fluentui/react-components'; const iconStyleProps: FluentIconsProps = { primaryFill: 'purple', @@ -70,13 +69,14 @@ const useIconStyles = makeStyles({ }); const AccessTime = bundleIcon(AccessTimeFilled, AccessTimeRegular); -const rootElement = document.getElementById('root'); -const styles = useIconStyles(); -ReactDOM.render( -
- -
, - rootElement, +function App() { + const styles = useIconStyles(); + + return ( +
+ +
+ ) ); ``` From 09eb2bdcab0471b34c64818bd3656b8a4e33c8a7 Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Tue, 13 Sep 2022 11:33:37 -0700 Subject: [PATCH 4/5] Move bundleIcon from prop list --- .../react-components/src/Concepts/Icons/Icon.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-components/src/Concepts/Icons/Icon.stories.mdx b/packages/react-components/react-components/src/Concepts/Icons/Icon.stories.mdx index 471445da72854b..9bc7abc11824bb 100644 --- a/packages/react-components/react-components/src/Concepts/Icons/Icon.stories.mdx +++ b/packages/react-components/react-components/src/Concepts/Icons/Icon.stories.mdx @@ -28,10 +28,10 @@ import { AccessTime24Filled } from '@fluentui/react-icons'; ### List of available props Each icon also accepts `className` and `primaryFill` props for styling. +You can also use the `bundleIcon` method to bundle a `filled` and unfilled version of an icon and this will combine them into one icon. | - Name - | Description | Default | | ----------- | ---------------------------------------------------------------------------------------------------------------------- | -------------- | -| bundleIcon | Pass in the filled and unfilled version of an icon and this will combine them into one icon | - | | className | Used to style the icon | - | | filled | Used to determine whether the filled or unfilled version of an icon is the default when `bundleIcon` is used `boolean` | - | | primaryFill | Used to change the primary fill of the icon | `currentColor` | From edb78d1a6bee024ac84426e8080c9dd2dbdfc739 Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Thu, 29 Sep 2022 15:11:01 -0700 Subject: [PATCH 5/5] Add example explanation --- .../react-components/src/Concepts/Icons/Icon.stories.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-components/react-components/src/Concepts/Icons/Icon.stories.mdx b/packages/react-components/react-components/src/Concepts/Icons/Icon.stories.mdx index 9bc7abc11824bb..25d1da8bc3622c 100644 --- a/packages/react-components/react-components/src/Concepts/Icons/Icon.stories.mdx +++ b/packages/react-components/react-components/src/Concepts/Icons/Icon.stories.mdx @@ -39,6 +39,9 @@ You can also use the `bundleIcon` method to bundle a `filled` and unfilled versi ### Example +In this example, the `bundleIcon` method is used to combine the `regular` and `filled` versions of the `AccessTime` icons +and toggle between them on hover. + ```tsx import * as React from 'react'; import {