RFC: drop support for primitive shorthand values

.github/CONTRIBUTING.md

@@ -84,7 +84,7 @@ In addition to behaviors, ARIA [landmarks][5] and [naming props][6] need to be a
 For example, to make an icon-only Button accessible, `aria-label` prop needs to be used:
 
 ```html
-<button icon="star" iconOnly aria-label="Favorites" primary />
+<button icon={{ name: "star" }} iconOnly aria-label="Favorites" primary />
 ```
 
 ### Focus

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -336,7 +336,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
         disabled: !canCodeBeFormatted,
       },
       {
-        icon: 'refresh',
+        icon: { name: 'refresh' },
         content: 'Reset',
         key: 'reset',
         onClick: this.resetSourceCode,
@@ -359,7 +359,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
       },
       {
         disabled: currentCodeLanguage !== 'ts',
-        icon: 'github',
+        icon: { name: 'github' },
         content: 'Edit',
         href: ghEditHref,
         rel: 'noopener noreferrer',

docs/src/components/DocsLayout.tsx

@@ -10,7 +10,7 @@ import { mergeThemes } from '@fluentui/react/src/utils'
 
 const anchors = new AnchorJS({
   class: 'anchor-link',
-  icon: '#',
+  icon: { name: '#' },
 })
 
 class DocsLayout extends React.Component<any, any> {

docs/src/components/GuidesNavigationFooter.tsx

@@ -22,7 +22,7 @@ const GuidesNavigationFooter: React.FC<GuidesNavigationFooterProps> = ({ previou
         <Button
           as={Link}
           content={previous.name}
-          icon="arrow left"
+          icon={{ name: 'arrow left' }}
           iconPosition="before"
           primary
           to={previous.url}
@@ -32,7 +32,7 @@ const GuidesNavigationFooter: React.FC<GuidesNavigationFooterProps> = ({ previou
         <Button
           as={Link}
           content={next.name}
-          icon="arrow right"
+          icon={{ name: 'arrow right' }}
           iconPosition="after"
           primary
           to={next.url}

docs/src/components/Sidebar/Sidebar.tsx

@@ -135,7 +135,7 @@ class Sidebar extends React.Component<any, any> {
     return [
       {
         key: 'concepts',
-        title: 'Concepts',
+        title: { content: 'Concepts' },
         items: [
           {
             key: 'intro',
@@ -169,7 +169,7 @@ class Sidebar extends React.Component<any, any> {
       },
       {
         key: 'guides',
-        title: 'Guides',
+        title: { content: 'Guides' },
         items: [
           {
             key: 'quickstart',
@@ -249,7 +249,7 @@ class Sidebar extends React.Component<any, any> {
     prototypes = this.removePublicTags(prototypes)
     const prototypeTreeSection = {
       key: 'prototypes',
-      title: 'Prototypes',
+      title: { content: 'Prototypes' },
       items: prototypes,
     }
     return currentSections.concat(prototypeTreeSection)
@@ -388,7 +388,7 @@ class Sidebar extends React.Component<any, any> {
 
     const componentTreeSection = {
       key: 'components',
-      title: 'Components',
+      title: { content: 'Components' },
       items: treeItemsByType[0].items,
     }
 
@@ -540,7 +540,7 @@ class Sidebar extends React.Component<any, any> {
             inverted
             fluid
             clearable
-            icon="search"
+            icon={{ name: 'search' }}
             placeholder="Search"
             iconPosition="end"
             role="search"

docs/src/examples/components/Accordion/Usage/AccordionPanelCustomTitleExample.shorthand.tsx

@@ -7,7 +7,9 @@ const AccordionPanelCustomTitleExample = () => {
       title: (
         <Layout
           key="title"
-          start={<Label icon="error" iconPosition="start" circular content="Warnings" />}
+          start={
+            <Label icon={{ name: 'error' }} iconPosition="start" circular content="Warnings" />
+          }
         />
       ),
       content: {

docs/src/examples/components/Alert/Rtl/AlertExampleDismissAction.rtl.tsx

@@ -12,7 +12,7 @@ const AlertExampleDismissActionRtl = () => (
         content: 'عالم',
       },
     ]}
-    icon="exclamation-triangle"
+    icon={{ name: 'exclamation-triangle' }}
     content="مرحبا العالم"
   />
 )

docs/src/examples/components/Alert/Slots/AlertExampleIcon.shorthand.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Alert } from '@fluentui/react'
 
 const AlertExampleIcon = () => (
-  <Alert icon="exclamation-triangle" content="This is an alert with a warning icon" />
+  <Alert icon={{ name: 'exclamation-triangle' }} content="This is an alert with a warning icon" />
 )
 
 export default AlertExampleIcon

docs/src/examples/components/Alert/Slots/AlertExampleIcon.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Alert } from '@fluentui/react'
 
 const AlertExampleIcon = () => (
-  <Alert icon="exclamation-triangle" content="This is an alert with a warning icon" />
+  <Alert icon={{ name: 'exclamation-triangle' }} content="This is an alert with a warning icon" />
 )
 
 export default AlertExampleIcon

docs/src/examples/components/Alert/Usage/AlertExampleImportantMessage.shorthand.tsx

@@ -4,7 +4,7 @@ import { Alert } from '@fluentui/react'
 const AlertExampleImportantMessage = () => (
   <Alert
     warning
-    icon="exclamation-triangle"
+    icon={{ name: 'exclamation-triangle' }}
     header="Your password may have been compromised"
     content="Please change your password"
     dismissible

docs/src/examples/components/Alert/Usage/AlertExampleImportantMessage.tsx

@@ -4,7 +4,7 @@ import { Alert } from '@fluentui/react'
 const AlertExampleImportantMessage = () => (
   <Alert
     warning
-    icon="exclamation-triangle"
+    icon={{ name: 'exclamation-triangle' }}
     header="Your password may have been compromised"
     content="Please change your password"
     dismissible

docs/src/examples/components/Alert/Usage/AlertExampleWidth.shorthand.tsx

@@ -17,7 +17,7 @@ const AlertExampleWidth = () => {
         actions={[{ content: 'Join and add the room', primary: true }]}
         header="There is a conference room close to you."
         dismissible
-        icon="screencast"
+        icon={{ name: 'screencast' }}
       />
     </div>
   )

docs/src/examples/components/Attachment/Performance/AttachmentSlots.perf.tsx

@@ -4,10 +4,10 @@ import * as React from 'react'
 const AttachmentSlotsPerf = () => (
   <Attachment
     actionable
-    icon="table"
+    icon={{ name: 'table' }}
     header="Document.docx"
     description="800 Kb"
-    action={{ icon: 'more', title: 'More Action' }}
+    action={{ icon: { name: 'more' }, title: 'More Action' }}
     progress={33}
   />
 )

docs/src/examples/components/Attachment/Rtl/AttachmentExample.rtl.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Attachment } from '@fluentui/react'
 
 const AttachmentExampleRtl = () => (
-  <Attachment header="مرحبا العالم" icon="file word outline" progress={70} />
+  <Attachment header="مرحبا العالم" icon={{ name: 'file word outline' }} progress={70} />
 )
 
 export default AttachmentExampleRtl

docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx

@@ -9,11 +9,15 @@ class AttachmentActionExampleShorthand extends React.Component {
       <div>
         <Attachment
           header="Picture.jpg"
-          action={{ icon: 'close', onClick: this.handleClick('Remove'), title: 'Close' }}
+          action={{ icon: { name: 'close' }, onClick: this.handleClick('Remove'), title: 'Close' }}
         />
         <Attachment
           header="Document.docx"
-          action={{ icon: 'more', onClick: this.handleClick('Show more'), title: 'Show more' }}
+          action={{
+            icon: { name: 'more' },
+            onClick: this.handleClick('Show more'),
+            title: 'Show more',
+          }}
         />
       </div>
     )

docs/src/examples/components/Attachment/Slots/AttachmentIconExample.shorthand.tsx

@@ -3,9 +3,9 @@ import { Attachment } from '@fluentui/react'
 
 const AttachmentIconExampleShorthand = () => (
   <div>
-    <Attachment icon="word-color" header="MeetingNotes.docx" />
-    <Attachment icon="excel-color" header="Budget.xlsx" />
-    <Attachment icon="powerpoint-color" header="Presentation.pptx" />
+    <Attachment icon={{ name: 'word-color' }} header="MeetingNotes.docx" />
+    <Attachment icon={{ name: 'excel-color' }} header="Budget.xlsx" />
+    <Attachment icon={{ name: 'powerpoint-color' }} header="Presentation.pptx" />
   </div>
 )
 

docs/src/examples/components/Attachment/Types/AttachmentProgressExample.shorthand.tsx

@@ -4,7 +4,7 @@ import { Attachment } from '@fluentui/react'
 const AttachmentProgressExampleShorthand = () => (
   <Attachment
     header="Photo.jpg"
-    action={{ icon: 'close', onClick: () => alert("'X' is clicked!"), title: 'Close' }}
+    action={{ icon: { name: 'close' }, onClick: () => alert("'X' is clicked!"), title: 'Close' }}
     progress={33}
   />
 )

docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx

@@ -11,10 +11,14 @@ class AttachmentActionableExampleShorthand extends React.Component {
     return (
       <Attachment
         actionable
-        icon="table"
+        icon={{ name: 'table' }}
         header="Document.docx"
         description="800 Kb"
-        action={{ icon: 'more', onClick: this.handleClick('More Action'), title: 'More Action' }}
+        action={{
+          icon: { name: 'more' },
+          onClick: this.handleClick('More Action'),
+          title: 'More Action',
+        }}
         progress={33}
         onClick={this.handleClick('Attachment')}
       />

docs/src/examples/components/Avatar/Rtl/AvatarExample.rtl.tsx

@@ -6,7 +6,7 @@ const AvatarExampleRtl = () => (
     name="جون دو"
     status={{
       color: 'green',
-      icon: 'icon-checkmark',
+      icon: { name: 'icon-checkmark' },
     }}
   />
 )

docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Avatar } from '@fluentui/react'
 
-const status = { color: 'green', icon: 'icon-checkmark', title: 'Available' }
+const status = { color: 'green', icon: { name: 'icon-checkmark' }, title: 'Available' }
 
 const AvatarUsageExampleShorthand = () => (
   <div>

docs/src/examples/components/Avatar/Variations/AvatarExampleExcludedInitials.shorthand.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Avatar } from '@fluentui/react'
 
-const status = { color: 'green', icon: 'icon-checkmark', title: 'Available' }
+const status = { color: 'green', icon: { name: 'icon-checkmark' }, title: 'Available' }
 
 const AvatarExampleExcludedInitialsShorthand = () => (
   <div>

docs/src/examples/components/Avatar/Variations/AvatarExampleGetInitials.shorthand.tsx

@@ -7,7 +7,7 @@ const AvatarExampleGetInitialsShorthand = () => (
   <Avatar
     name="John Doe"
     getInitials={getInitials}
-    status={{ color: 'green', icon: 'icon-checkmark', title: 'Available' }}
+    status={{ color: 'green', icon: { name: 'icon-checkmark' }, title: 'Available' }}
   />
 )
 

docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx

@@ -5,12 +5,12 @@ const AvatarExampleImageCustomizationShorthand = () => (
   <>
     <Avatar
       image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of John Doe' }}
-      status={{ color: 'green', icon: 'icon-checkmark', title: 'Available' }}
+      status={{ color: 'green', icon: { name: 'icon-checkmark' }, title: 'Available' }}
     />
     &emsp;
     <Avatar
       image="public/images/avatar/large/jerry.png"
-      status={{ color: 'green', icon: 'icon-checkmark', title: 'Available' }}
+      status={{ color: 'green', icon: { name: 'icon-checkmark' }, title: 'Available' }}
     />
     &emsp;
     <Avatar
@@ -29,7 +29,7 @@ const AvatarExampleImageCustomizationShorthand = () => (
           />
         ),
       }}
-      status={{ color: 'green', icon: 'icon-checkmark', title: 'Available' }}
+      status={{ color: 'green', icon: { name: 'icon-checkmark' }, title: 'Available' }}
     />
   </>
 )

docs/src/examples/components/Avatar/Variations/AvatarExampleName.shorthand.tsx

@@ -6,7 +6,7 @@ const AvatarExampleNameShorthand = () => (
     name="John Doe"
     status={{
       color: 'green',
-      icon: 'icon-checkmark',
+      icon: { name: 'icon-checkmark' },
       title: 'Available',
     }}
   />

docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Avatar, Grid, SizeValue } from '@fluentui/react'
 
 const statusProps = {
-  icon: 'icon-checkmark',
+  icon: { name: 'icon-checkmark' },
   color: 'green',
   title: 'Available',
 }

docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx

@@ -5,7 +5,7 @@ const AvatarExampleStatusShorthand = () => (
   <div>
     <Avatar
       image="public/images/avatar/small/matt.jpg"
-      status={{ color: 'green', icon: 'icon-checkmark', title: 'Available' }}
+      status={{ color: 'green', icon: { name: 'icon-checkmark' }, title: 'Available' }}
     />
     &emsp;
     <Avatar image="public/images/avatar/small/matt.jpg" status={{ color: 'red', title: 'Busy' }} />

docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx

@@ -6,7 +6,7 @@ const defaultAvatar = (
     image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }}
     status={{
       color: 'green',
-      icon: 'icon-checkmark',
+      icon: { name: 'icon-checkmark' },
       title: 'Available',
     }}
   />
@@ -23,7 +23,7 @@ const AvatarExampleStatusCustomizationShorthand = () => (
       image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }}
       status={{
         color: 'green',
-        icon: 'icon-checkmark',
+        icon: { name: 'icon-checkmark' },
         title: 'Available',
       }}
       variables={{ statusBorderColor: 'orange' }}
@@ -35,7 +35,7 @@ const AvatarExampleStatusCustomizationShorthand = () => (
       size="larger"
       status={{
         color: 'green',
-        icon: 'icon-checkmark',
+        icon: { name: 'icon-checkmark' },
         title: 'Available',
       }}
     />
@@ -45,7 +45,7 @@ const AvatarExampleStatusCustomizationShorthand = () => (
       image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }}
       status={{
         color: 'green',
-        icon: 'icon-checkmark',
+        icon: { name: 'icon-checkmark' },
         title: 'Available',
         size: 'larger',
       }}
@@ -57,7 +57,7 @@ const AvatarExampleStatusCustomizationShorthand = () => (
       size="larger"
       status={{
         color: 'green',
-        icon: 'icon-checkmark',
+        icon: { name: 'icon-checkmark' },
         title: 'Available',
         size: 'medium',
       }}

docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx

@@ -5,9 +5,9 @@ const ButtonGroupCircularExampleShorthand = () => (
   <Button.Group
     circular
     buttons={[
-      { key: 'emoji', icon: 'emoji', primary: true, title: 'Emoji' },
-      { key: 'translation', icon: 'translation', title: 'Translation' },
-      { key: 'play', icon: 'play', primary: true, title: 'Play' },
+      { key: 'emoji', icon: { name: 'emoji' }, primary: true, title: 'Emoji' },
+      { key: 'translation', icon: { name: 'translation' }, title: 'Translation' },
+      { key: 'play', icon: { name: 'play' }, primary: true, title: 'Play' },
     ]}
   />
 )