From e5ffab57939c24b17702081a7030289b6184bcb0 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 18 Dec 2019 10:29:20 +0100 Subject: [PATCH 1/5] wip --- .../components/Accordion/AccordionContent.tsx | 5 +- .../components/Accordion/AccordionTitle.tsx | 2 +- .../src/components/Attachment/Attachment.tsx | 2 +- .../react/src/components/Avatar/Avatar.tsx | 2 +- .../react/src/components/Button/Button.tsx | 2 +- .../src/components/Button/ButtonGroup.tsx | 2 - .../src/components/Carousel/Carousel.tsx | 5 +- .../src/components/Carousel/CarouselItem.tsx | 2 +- .../Carousel/CarouselNavigation.tsx | 5 +- .../Carousel/CarouselNavigationItem.tsx | 5 +- .../react/src/components/Chat/ChatMessage.tsx | 2 +- .../src/components/Checkbox/Checkbox.tsx | 5 +- .../src/components/Dialog/DialogFooter.tsx | 2 +- .../react/src/components/Divider/Divider.tsx | 2 +- .../src/components/Dropdown/DropdownItem.tsx | 2 +- .../Dropdown/DropdownSelectedItem.tsx | 5 +- .../react/src/components/Form/FormField.tsx | 2 +- .../react/src/components/Header/Header.tsx | 2 +- .../components/Header/HeaderDescription.tsx | 1 - .../HierarchicalTree/HierarchicalTree.tsx | 5 +- .../HierarchicalTree/HierarchicalTreeItem.tsx | 5 +- .../HierarchicalTreeTitle.tsx | 5 +- packages/react/src/components/Icon/Icon.tsx | 2 +- packages/react/src/components/Image/Image.tsx | 2 +- .../src/components/ItemLayout/ItemLayout.tsx | 2 +- packages/react/src/components/Label/Label.tsx | 2 +- .../react/src/components/List/ListItem.tsx | 2 +- .../react/src/components/Loader/Loader.tsx | 2 +- packages/react/src/components/Menu/Menu.tsx | 2 +- .../react/src/components/Menu/MenuDivider.tsx | 2 +- .../react/src/components/Menu/MenuItem.tsx | 2 +- .../src/components/MenuButton/MenuButton.tsx | 2 +- packages/react/src/components/Popup/Popup.tsx | 2 +- .../src/components/Popup/PopupContent.tsx | 2 +- .../components/RadioGroup/RadioGroupItem.tsx | 2 +- .../src/components/Reaction/Reaction.tsx | 2 +- .../src/components/Reaction/ReactionGroup.tsx | 6 +- .../react/src/components/Status/Status.tsx | 2 +- .../react/src/components/Table/TableCell.tsx | 2 +- .../react/src/components/Table/TableRow.tsx | 2 +- packages/react/src/components/Text/Text.tsx | 2 +- .../react/src/components/Toolbar/Toolbar.tsx | 2 +- .../components/Toolbar/ToolbarCustomItem.tsx | 5 +- .../src/components/Toolbar/ToolbarDivider.tsx | 2 +- .../src/components/Toolbar/ToolbarItem.tsx | 2 +- .../src/components/Toolbar/ToolbarMenu.tsx | 2 +- .../components/Toolbar/ToolbarMenuDivider.tsx | 5 +- .../components/Toolbar/ToolbarMenuItem.tsx | 5 +- .../components/Toolbar/ToolbarRadioGroup.tsx | 5 +- .../react/src/components/Tooltip/Tooltip.tsx | 2 +- .../src/components/Tooltip/TooltipContent.tsx | 2 +- packages/react/src/components/Tree/Tree.tsx | 5 +- .../react/src/components/Tree/TreeItem.tsx | 5 +- .../react/src/components/Tree/TreeTitle.tsx | 5 +- packages/react/src/components/Video/Video.tsx | 2 +- .../src/utils/createComponentInternal.ts | 5 +- packages/react/src/utils/factories.ts | 69 +----- .../react/test/specs/utils/factories-test.tsx | 199 +----------------- 58 files changed, 65 insertions(+), 369 deletions(-) diff --git a/packages/react/src/components/Accordion/AccordionContent.tsx b/packages/react/src/components/Accordion/AccordionContent.tsx index fbdaebb4e9..4bb2583b5a 100644 --- a/packages/react/src/components/Accordion/AccordionContent.tsx +++ b/packages/react/src/components/Accordion/AccordionContent.tsx @@ -75,10 +75,7 @@ class AccordionContent extends UIComponent, an } } -AccordionContent.create = createShorthandFactory({ - Component: AccordionContent, - mappedProp: 'content', -}) +AccordionContent.create = createShorthandFactory({ Component: AccordionContent }) /** * An AccordionContent displays content hosted in an Accordion. diff --git a/packages/react/src/components/Accordion/AccordionTitle.tsx b/packages/react/src/components/Accordion/AccordionTitle.tsx index c02647ca95..06e099b5f4 100644 --- a/packages/react/src/components/Accordion/AccordionTitle.tsx +++ b/packages/react/src/components/Accordion/AccordionTitle.tsx @@ -142,7 +142,7 @@ class AccordionTitle extends UIComponent, any> { } } -AccordionTitle.create = createShorthandFactory({ Component: AccordionTitle, mappedProp: 'content' }) +AccordionTitle.create = createShorthandFactory({ Component: AccordionTitle }) AccordionTitle.slotClassNames = { content: `${AccordionTitle.className}__content`, diff --git a/packages/react/src/components/Attachment/Attachment.tsx b/packages/react/src/components/Attachment/Attachment.tsx index 8b62267cec..6dfaa54716 100644 --- a/packages/react/src/components/Attachment/Attachment.tsx +++ b/packages/react/src/components/Attachment/Attachment.tsx @@ -141,7 +141,7 @@ class Attachment extends UIComponent> { } } -Attachment.create = createShorthandFactory({ Component: Attachment, mappedProp: 'header' }) +Attachment.create = createShorthandFactory({ Component: Attachment }) Attachment.slotClassNames = { action: `${Attachment.className}__action`, } diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx index ec13bca42d..446f01b857 100644 --- a/packages/react/src/components/Avatar/Avatar.tsx +++ b/packages/react/src/components/Avatar/Avatar.tsx @@ -122,7 +122,7 @@ class Avatar extends UIComponent, any> { } } -Avatar.create = createShorthandFactory({ Component: Avatar, mappedProp: 'name' }) +Avatar.create = createShorthandFactory({ Component: Avatar }) /** * An Avatar is a graphical representation of a user. diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx index f1c9174af2..01f43aa468 100644 --- a/packages/react/src/components/Button/Button.tsx +++ b/packages/react/src/components/Button/Button.tsx @@ -195,7 +195,7 @@ class Button extends UIComponent> { } } -Button.create = createShorthandFactory({ Component: Button, mappedProp: 'content' }) +Button.create = createShorthandFactory({ Component: Button }) /** * A Button enables users to take an action, such as submitting a form, opening a dialog, etc. diff --git a/packages/react/src/components/Button/ButtonGroup.tsx b/packages/react/src/components/Button/ButtonGroup.tsx index ed27a0add5..edf99bb720 100644 --- a/packages/react/src/components/Button/ButtonGroup.tsx +++ b/packages/react/src/components/Button/ButtonGroup.tsx @@ -103,8 +103,6 @@ class ButtonGroup extends UIComponent, any> { ButtonGroup.create = createShorthandFactory({ Component: ButtonGroup, - mappedProp: 'content', - mappedArrayProp: 'buttons', }) /** diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx index 14d84d1d19..fe77ac17bf 100644 --- a/packages/react/src/components/Carousel/Carousel.tsx +++ b/packages/react/src/components/Carousel/Carousel.tsx @@ -416,10 +416,7 @@ class Carousel extends AutoControlledComponent, Carous } } -Carousel.create = createShorthandFactory({ - Component: Carousel, - mappedArrayProp: 'items', -}) +Carousel.create = createShorthandFactory({ Component: Carousel }) /** * A Carousel displays data organised as a gallery. diff --git a/packages/react/src/components/Carousel/CarouselItem.tsx b/packages/react/src/components/Carousel/CarouselItem.tsx index ce4bb6879a..15b7959cc1 100644 --- a/packages/react/src/components/Carousel/CarouselItem.tsx +++ b/packages/react/src/components/Carousel/CarouselItem.tsx @@ -76,7 +76,7 @@ class CarouselItem extends UIComponent> { } } -CarouselItem.create = createShorthandFactory({ Component: CarouselItem, mappedProp: 'content' }) +CarouselItem.create = createShorthandFactory({ Component: CarouselItem }) /** * A Carousel displays data organised as a gallery. diff --git a/packages/react/src/components/Carousel/CarouselNavigation.tsx b/packages/react/src/components/Carousel/CarouselNavigation.tsx index 3c509f0c1b..6f799ef851 100644 --- a/packages/react/src/components/Carousel/CarouselNavigation.tsx +++ b/packages/react/src/components/Carousel/CarouselNavigation.tsx @@ -125,10 +125,7 @@ class CarouselNavigation extends UIComponent } } -CarouselNavigation.create = createShorthandFactory({ - Component: CarouselNavigation, - mappedArrayProp: 'items', -}) +CarouselNavigation.create = createShorthandFactory({ Component: CarouselNavigation }) /** * A Carousel navigation helps switching between Carousel items. diff --git a/packages/react/src/components/Carousel/CarouselNavigationItem.tsx b/packages/react/src/components/Carousel/CarouselNavigationItem.tsx index f723156029..de461e12c1 100644 --- a/packages/react/src/components/Carousel/CarouselNavigationItem.tsx +++ b/packages/react/src/components/Carousel/CarouselNavigationItem.tsx @@ -130,10 +130,7 @@ class CarouselNavigationItem extends UIComponent, ChatMessageS } } -ChatMessage.create = createShorthandFactory({ Component: ChatMessage, mappedProp: 'content' }) +ChatMessage.create = createShorthandFactory({ Component: ChatMessage }) ChatMessage.slotClassNames = { actionMenu: `${ChatMessage.className}__actions`, author: `${ChatMessage.className}__author`, diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx index 8ae819f263..f6cce778fa 100644 --- a/packages/react/src/components/Checkbox/Checkbox.tsx +++ b/packages/react/src/components/Checkbox/Checkbox.tsx @@ -179,10 +179,7 @@ Checkbox.slotClassNames = { indicator: `${Checkbox.className}__indicator`, } -Checkbox.create = createShorthandFactory({ - Component: Checkbox, - mappedProp: 'label', -}) +Checkbox.create = createShorthandFactory({ Component: Checkbox }) /** * A Checkbox allows a user to make a choice between two mutually exclusive options. diff --git a/packages/react/src/components/Dialog/DialogFooter.tsx b/packages/react/src/components/Dialog/DialogFooter.tsx index c3d2c4f026..90782af39c 100644 --- a/packages/react/src/components/Dialog/DialogFooter.tsx +++ b/packages/react/src/components/Dialog/DialogFooter.tsx @@ -39,7 +39,7 @@ class DialogFooter extends UIComponent> { } } -DialogFooter.create = createShorthandFactory({ Component: DialogFooter, mappedProp: 'content' }) +DialogFooter.create = createShorthandFactory({ Component: DialogFooter }) /** * A DialogFooter represents footer content in Dialog, usually shows dialog actions. diff --git a/packages/react/src/components/Divider/Divider.tsx b/packages/react/src/components/Divider/Divider.tsx index 9a42ab5f3f..581c18c56b 100644 --- a/packages/react/src/components/Divider/Divider.tsx +++ b/packages/react/src/components/Divider/Divider.tsx @@ -71,7 +71,7 @@ class Divider extends UIComponent, any> { } } -Divider.create = createShorthandFactory({ Component: Divider, mappedProp: 'content' }) +Divider.create = createShorthandFactory({ Component: Divider }) /** * A Divider visually segments content. diff --git a/packages/react/src/components/Dropdown/DropdownItem.tsx b/packages/react/src/components/Dropdown/DropdownItem.tsx index 9c5d02a181..e1c184c848 100644 --- a/packages/react/src/components/Dropdown/DropdownItem.tsx +++ b/packages/react/src/components/Dropdown/DropdownItem.tsx @@ -154,7 +154,7 @@ DropdownItem.slotClassNames = { checkableIndicator: `${DropdownItem.className}__checkable-indicator`, } -DropdownItem.create = createShorthandFactory({ Component: DropdownItem, mappedProp: 'header' }) +DropdownItem.create = createShorthandFactory({ Component: DropdownItem }) /** * A DropdownItem represents an option of Dropdown list. diff --git a/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx b/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx index 1faac19891..739466027b 100644 --- a/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx +++ b/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx @@ -192,10 +192,7 @@ DropdownSelectedItem.slotClassNames = { image: `${DropdownSelectedItem.className}__image`, } -DropdownSelectedItem.create = createShorthandFactory({ - Component: DropdownSelectedItem, - mappedProp: 'header', -}) +DropdownSelectedItem.create = createShorthandFactory({ Component: DropdownSelectedItem }) /** * A DropdownSelectedItem represents a selected item of 'multiple-selection' Dropdown. diff --git a/packages/react/src/components/Form/FormField.tsx b/packages/react/src/components/Form/FormField.tsx index bfbbbce270..c8f54c0daf 100644 --- a/packages/react/src/components/Form/FormField.tsx +++ b/packages/react/src/components/Form/FormField.tsx @@ -124,7 +124,7 @@ class FormField extends UIComponent, any> { } } -FormField.create = createShorthandFactory({ Component: FormField, mappedProp: 'label' }) +FormField.create = createShorthandFactory({ Component: FormField }) /** * A FormField represents a Form element containing a label and an input. diff --git a/packages/react/src/components/Header/Header.tsx b/packages/react/src/components/Header/Header.tsx index aadc070c39..413bc7d03c 100644 --- a/packages/react/src/components/Header/Header.tsx +++ b/packages/react/src/components/Header/Header.tsx @@ -96,7 +96,7 @@ class Header extends UIComponent, any> { } } -Header.create = createShorthandFactory({ Component: Header, mappedProp: 'content' }) +Header.create = createShorthandFactory({ Component: Header }) /** * A Header organises the content by declaring a content's topic. diff --git a/packages/react/src/components/Header/HeaderDescription.tsx b/packages/react/src/components/Header/HeaderDescription.tsx index 1a91f99665..bb61cbf930 100644 --- a/packages/react/src/components/Header/HeaderDescription.tsx +++ b/packages/react/src/components/Header/HeaderDescription.tsx @@ -59,7 +59,6 @@ class HeaderDescription extends UIComponent, HeaderDescription.create = createShorthandFactory({ Component: HeaderDescription, - mappedProp: 'content', }) /** diff --git a/packages/react/src/components/HierarchicalTree/HierarchicalTree.tsx b/packages/react/src/components/HierarchicalTree/HierarchicalTree.tsx index 664907b74e..85c3d3e604 100644 --- a/packages/react/src/components/HierarchicalTree/HierarchicalTree.tsx +++ b/packages/react/src/components/HierarchicalTree/HierarchicalTree.tsx @@ -202,10 +202,7 @@ class HierarchicalTree extends AutoControlledComponent< } } -HierarchicalTree.create = createShorthandFactory({ - Component: HierarchicalTree, - mappedArrayProp: 'items', -}) +HierarchicalTree.create = createShorthandFactory({ Component: HierarchicalTree }) /** * (DEPRECATED) A Tree displays data organised in tree hierarchy. diff --git a/packages/react/src/components/HierarchicalTree/HierarchicalTreeItem.tsx b/packages/react/src/components/HierarchicalTree/HierarchicalTreeItem.tsx index bf2292df31..c4c3813951 100644 --- a/packages/react/src/components/HierarchicalTree/HierarchicalTreeItem.tsx +++ b/packages/react/src/components/HierarchicalTree/HierarchicalTreeItem.tsx @@ -211,10 +211,7 @@ class HierarchicalTreeItem extends UIComponent, any> { } } -Icon.create = createShorthandFactory({ Component: Icon, mappedProp: 'name', allowsJSX: false }) +Icon.create = createShorthandFactory({ Component: Icon, allowsJSX: false }) /** * An Icon displays a pictogram with semantic meaning. diff --git a/packages/react/src/components/Image/Image.tsx b/packages/react/src/components/Image/Image.tsx index f9876c98ec..ad8229d51a 100644 --- a/packages/react/src/components/Image/Image.tsx +++ b/packages/react/src/components/Image/Image.tsx @@ -61,7 +61,7 @@ class Image extends UIComponent, any> { } } -Image.create = createShorthandFactory({ Component: Image, mappedProp: 'src', allowsJSX: false }) +Image.create = createShorthandFactory({ Component: Image, allowsJSX: false }) /** * An Image is a graphic representation of something. diff --git a/packages/react/src/components/ItemLayout/ItemLayout.tsx b/packages/react/src/components/ItemLayout/ItemLayout.tsx index 2069a939c9..e6d781f847 100644 --- a/packages/react/src/components/ItemLayout/ItemLayout.tsx +++ b/packages/react/src/components/ItemLayout/ItemLayout.tsx @@ -222,7 +222,7 @@ class ItemLayout extends UIComponent, any> { } } -ItemLayout.create = createShorthandFactory({ Component: ItemLayout, mappedProp: 'content' }) +ItemLayout.create = createShorthandFactory({ Component: ItemLayout }) ItemLayout.slotClassNames = { header: `${ItemLayout.className}__header`, headerMedia: `${ItemLayout.className}__headerMedia`, diff --git a/packages/react/src/components/Label/Label.tsx b/packages/react/src/components/Label/Label.tsx index 8c9174c0ab..fe420257ba 100644 --- a/packages/react/src/components/Label/Label.tsx +++ b/packages/react/src/components/Label/Label.tsx @@ -148,7 +148,7 @@ class Label extends UIComponent, any> { } } -Label.create = createShorthandFactory({ Component: Label, mappedProp: 'content' }) +Label.create = createShorthandFactory({ Component: Label }) /** * A Label allows user to classify content. diff --git a/packages/react/src/components/List/ListItem.tsx b/packages/react/src/components/List/ListItem.tsx index 84824d4f0f..7d1c6bfb2f 100644 --- a/packages/react/src/components/List/ListItem.tsx +++ b/packages/react/src/components/List/ListItem.tsx @@ -186,7 +186,7 @@ class ListItem extends UIComponent> { } } -ListItem.create = createShorthandFactory({ Component: ListItem, mappedProp: 'content' }) +ListItem.create = createShorthandFactory({ Component: ListItem }) ListItem.slotClassNames = { header: `${ListItem.className}__header`, headerMedia: `${ListItem.className}__headerMedia`, diff --git a/packages/react/src/components/Loader/Loader.tsx b/packages/react/src/components/Loader/Loader.tsx index 127bd04bdb..a0aa261854 100644 --- a/packages/react/src/components/Loader/Loader.tsx +++ b/packages/react/src/components/Loader/Loader.tsx @@ -143,7 +143,7 @@ class Loader extends UIComponent, LoaderState> { } } -Loader.create = createShorthandFactory({ Component: Loader, mappedProp: 'label' }) +Loader.create = createShorthandFactory({ Component: Loader }) /** * A Loader alerts a user to wait for an activity to complete. diff --git a/packages/react/src/components/Menu/Menu.tsx b/packages/react/src/components/Menu/Menu.tsx index 91fb0aa271..b7f4e736ae 100644 --- a/packages/react/src/components/Menu/Menu.tsx +++ b/packages/react/src/components/Menu/Menu.tsx @@ -254,7 +254,7 @@ class Menu extends AutoControlledComponent, MenuState> { } } -Menu.create = createShorthandFactory({ Component: Menu, mappedArrayProp: 'items' }) +Menu.create = createShorthandFactory({ Component: Menu }) /** * A Menu is a component that offers a grouped list of choices to the user. diff --git a/packages/react/src/components/Menu/MenuDivider.tsx b/packages/react/src/components/Menu/MenuDivider.tsx index a296a7bb17..12e5292b6c 100644 --- a/packages/react/src/components/Menu/MenuDivider.tsx +++ b/packages/react/src/components/Menu/MenuDivider.tsx @@ -64,7 +64,7 @@ class MenuDivider extends UIComponent> { } } -MenuDivider.create = createShorthandFactory({ Component: MenuDivider, mappedProp: 'content' }) +MenuDivider.create = createShorthandFactory({ Component: MenuDivider }) /** * A MenuDivider is non-actionable element that visually segments items of Menu. diff --git a/packages/react/src/components/Menu/MenuItem.tsx b/packages/react/src/components/Menu/MenuItem.tsx index 0ae3ee368e..211decb558 100644 --- a/packages/react/src/components/Menu/MenuItem.tsx +++ b/packages/react/src/components/Menu/MenuItem.tsx @@ -435,7 +435,7 @@ class MenuItem extends AutoControlledComponent, MenuIt } } -MenuItem.create = createShorthandFactory({ Component: MenuItem, mappedProp: 'content' }) +MenuItem.create = createShorthandFactory({ Component: MenuItem }) /** * A MenuItem is an actionable item within a Menu. diff --git a/packages/react/src/components/MenuButton/MenuButton.tsx b/packages/react/src/components/MenuButton/MenuButton.tsx index 04d25d3b71..03a986767e 100644 --- a/packages/react/src/components/MenuButton/MenuButton.tsx +++ b/packages/react/src/components/MenuButton/MenuButton.tsx @@ -304,4 +304,4 @@ export default class MenuButton extends AutoControlledComponent> { } } -Reaction.create = createShorthandFactory({ Component: Reaction, mappedProp: 'content' }) +Reaction.create = createShorthandFactory({ Component: Reaction }) Reaction.slotClassNames = { icon: `${Reaction.className}__icon`, content: `${Reaction.className}__content`, diff --git a/packages/react/src/components/Reaction/ReactionGroup.tsx b/packages/react/src/components/Reaction/ReactionGroup.tsx index 269b43dc6e..d2491cd64f 100644 --- a/packages/react/src/components/Reaction/ReactionGroup.tsx +++ b/packages/react/src/components/Reaction/ReactionGroup.tsx @@ -77,11 +77,7 @@ class ReactionGroup extends UIComponent> { } } -ReactionGroup.create = createShorthandFactory({ - Component: ReactionGroup, - mappedProp: 'content', - mappedArrayProp: 'items', -}) +ReactionGroup.create = createShorthandFactory({ Component: ReactionGroup }) /** * A ReactionGroup groups multiple Reaction elements. diff --git a/packages/react/src/components/Status/Status.tsx b/packages/react/src/components/Status/Status.tsx index b1635a00ee..75e38dadaf 100644 --- a/packages/react/src/components/Status/Status.tsx +++ b/packages/react/src/components/Status/Status.tsx @@ -73,7 +73,7 @@ class Status extends UIComponent, any> { } } -Status.create = createShorthandFactory({ Component: Status, mappedProp: 'state' }) +Status.create = createShorthandFactory({ Component: Status }) /** * A Status represents someone's or something's state. diff --git a/packages/react/src/components/Table/TableCell.tsx b/packages/react/src/components/Table/TableCell.tsx index 69061c31f6..967e83e865 100644 --- a/packages/react/src/components/Table/TableCell.tsx +++ b/packages/react/src/components/Table/TableCell.tsx @@ -110,6 +110,6 @@ class TableCell extends UIComponent, any> { } } -TableCell.create = createShorthandFactory({ Component: TableCell, mappedProp: 'content' }) +TableCell.create = createShorthandFactory({ Component: TableCell }) export default TableCell diff --git a/packages/react/src/components/Table/TableRow.tsx b/packages/react/src/components/Table/TableRow.tsx index b467543080..17042ca9ba 100644 --- a/packages/react/src/components/Table/TableRow.tsx +++ b/packages/react/src/components/Table/TableRow.tsx @@ -143,6 +143,6 @@ class TableRow extends UIComponent, any> { } } -TableRow.create = createShorthandFactory({ Component: TableRow, mappedArrayProp: 'items' }) +TableRow.create = createShorthandFactory({ Component: TableRow }) export default TableRow diff --git a/packages/react/src/components/Text/Text.tsx b/packages/react/src/components/Text/Text.tsx index 29b96575a0..b47ebd29a3 100644 --- a/packages/react/src/components/Text/Text.tsx +++ b/packages/react/src/components/Text/Text.tsx @@ -106,7 +106,7 @@ class Text extends UIComponent, any> { } } -Text.create = createShorthandFactory({ Component: Text, mappedProp: 'content' }) +Text.create = createShorthandFactory({ Component: Text }) /** * A Text consistently styles and formats occurrences of text. diff --git a/packages/react/src/components/Toolbar/Toolbar.tsx b/packages/react/src/components/Toolbar/Toolbar.tsx index dee7555ee0..563babda71 100644 --- a/packages/react/src/components/Toolbar/Toolbar.tsx +++ b/packages/react/src/components/Toolbar/Toolbar.tsx @@ -536,7 +536,7 @@ class Toolbar extends UIComponent> { } } -Toolbar.create = createShorthandFactory({ Component: Toolbar, mappedProp: 'content' }) +Toolbar.create = createShorthandFactory({ Component: Toolbar }) /** * A Toolbar is a container for grouping a set of controls, often action controls (e.g. buttons) or input controls (e.g. checkboxes). diff --git a/packages/react/src/components/Toolbar/ToolbarCustomItem.tsx b/packages/react/src/components/Toolbar/ToolbarCustomItem.tsx index b6da20beaa..f638a06018 100644 --- a/packages/react/src/components/Toolbar/ToolbarCustomItem.tsx +++ b/packages/react/src/components/Toolbar/ToolbarCustomItem.tsx @@ -93,10 +93,7 @@ class ToolbarCustomItem extends UIComponent> } } -ToolbarCustomItem.create = createShorthandFactory({ - Component: ToolbarCustomItem, - mappedProp: 'content', -}) +ToolbarCustomItem.create = createShorthandFactory({ Component: ToolbarCustomItem }) /** * A ToolbarCustomItem renders Toolbar item as a non-actionable `div` with custom content inside. diff --git a/packages/react/src/components/Toolbar/ToolbarDivider.tsx b/packages/react/src/components/Toolbar/ToolbarDivider.tsx index 69c8bb64ab..e45b593ee9 100644 --- a/packages/react/src/components/Toolbar/ToolbarDivider.tsx +++ b/packages/react/src/components/Toolbar/ToolbarDivider.tsx @@ -43,7 +43,7 @@ class ToolbarDivider extends UIComponent> { } } -ToolbarDivider.create = createShorthandFactory({ Component: ToolbarDivider, mappedProp: 'content' }) +ToolbarDivider.create = createShorthandFactory({ Component: ToolbarDivider }) /** * A ToolbarDivider is a non-actionable element that visually segments Toolbar items. diff --git a/packages/react/src/components/Toolbar/ToolbarItem.tsx b/packages/react/src/components/Toolbar/ToolbarItem.tsx index b0b9f4239e..5d214fc8e2 100644 --- a/packages/react/src/components/Toolbar/ToolbarItem.tsx +++ b/packages/react/src/components/Toolbar/ToolbarItem.tsx @@ -345,7 +345,7 @@ class ToolbarItem extends UIComponent> { } } -ToolbarItem.create = createShorthandFactory({ Component: ToolbarItem, mappedProp: 'content' }) +ToolbarItem.create = createShorthandFactory({ Component: ToolbarItem }) /** * A ToolbarItem renders Toolbar item as a button with an icon. diff --git a/packages/react/src/components/Toolbar/ToolbarMenu.tsx b/packages/react/src/components/Toolbar/ToolbarMenu.tsx index e54d66cd01..eb275dab7f 100644 --- a/packages/react/src/components/Toolbar/ToolbarMenu.tsx +++ b/packages/react/src/components/Toolbar/ToolbarMenu.tsx @@ -151,7 +151,7 @@ class ToolbarMenu extends UIComponent { } } -ToolbarMenu.create = createShorthandFactory({ Component: ToolbarMenu, mappedArrayProp: 'items' }) +ToolbarMenu.create = createShorthandFactory({ Component: ToolbarMenu }) /** * A ToolbarMenu creates a pop-up menu attached to a ToolbarItem. diff --git a/packages/react/src/components/Toolbar/ToolbarMenuDivider.tsx b/packages/react/src/components/Toolbar/ToolbarMenuDivider.tsx index 1a9d604dd0..dca3d0f477 100644 --- a/packages/react/src/components/Toolbar/ToolbarMenuDivider.tsx +++ b/packages/react/src/components/Toolbar/ToolbarMenuDivider.tsx @@ -47,10 +47,7 @@ class ToolbarMenuDivider extends UIComponent } } -ToolbarMenuDivider.create = createShorthandFactory({ - Component: ToolbarMenuDivider, - mappedProp: 'content', -}) +ToolbarMenuDivider.create = createShorthandFactory({ Component: ToolbarMenuDivider }) /** * A ToolbarMenuDivider adds non-actionable separator between items of ToolbarMenu. diff --git a/packages/react/src/components/Toolbar/ToolbarMenuItem.tsx b/packages/react/src/components/Toolbar/ToolbarMenuItem.tsx index 55b5a709f0..8fad1191f1 100644 --- a/packages/react/src/components/Toolbar/ToolbarMenuItem.tsx +++ b/packages/react/src/components/Toolbar/ToolbarMenuItem.tsx @@ -417,10 +417,7 @@ class ToolbarMenuItem extends AutoControlledComponent< } } -ToolbarMenuItem.create = createShorthandFactory({ - Component: ToolbarMenuItem, - mappedProp: 'content', -}) +ToolbarMenuItem.create = createShorthandFactory({ Component: ToolbarMenuItem }) /** * A ToolbarMenuItem renders ToolbarMenu item as button. diff --git a/packages/react/src/components/Toolbar/ToolbarRadioGroup.tsx b/packages/react/src/components/Toolbar/ToolbarRadioGroup.tsx index 54b1e9a649..cafa955c4f 100644 --- a/packages/react/src/components/Toolbar/ToolbarRadioGroup.tsx +++ b/packages/react/src/components/Toolbar/ToolbarRadioGroup.tsx @@ -160,10 +160,7 @@ class ToolbarRadioGroup extends UIComponent> } } -ToolbarRadioGroup.create = createShorthandFactory({ - Component: ToolbarRadioGroup, - mappedProp: 'content', -}) +ToolbarRadioGroup.create = createShorthandFactory({ Component: ToolbarRadioGroup }) /** * A ToolbarRadioGroup renders Toolbar item as a group of mutually exclusive options. diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx index 08f3908ddf..9cb0123be5 100644 --- a/packages/react/src/components/Tooltip/Tooltip.tsx +++ b/packages/react/src/components/Tooltip/Tooltip.tsx @@ -323,4 +323,4 @@ export default class Tooltip extends AutoControlledComponent> { } } -TooltipContent.create = createShorthandFactory({ Component: TooltipContent, mappedProp: 'content' }) +TooltipContent.create = createShorthandFactory({ Component: TooltipContent }) /** * A TooltipContent contains the content of a Tooltip component. diff --git a/packages/react/src/components/Tree/Tree.tsx b/packages/react/src/components/Tree/Tree.tsx index ce99f7415c..dafc296a85 100644 --- a/packages/react/src/components/Tree/Tree.tsx +++ b/packages/react/src/components/Tree/Tree.tsx @@ -359,10 +359,7 @@ class Tree extends AutoControlledComponent, TreeState> { } } -Tree.create = createShorthandFactory({ - Component: Tree, - mappedArrayProp: 'items', -}) +Tree.create = createShorthandFactory({ Component: Tree }) /** * A Tree displays data organised in tree hierarchy. diff --git a/packages/react/src/components/Tree/TreeItem.tsx b/packages/react/src/components/Tree/TreeItem.tsx index ee5b1847a1..ad3f7e69a6 100644 --- a/packages/react/src/components/Tree/TreeItem.tsx +++ b/packages/react/src/components/Tree/TreeItem.tsx @@ -231,10 +231,7 @@ class TreeItem extends UIComponent, TreeItemState> { } } -TreeItem.create = createShorthandFactory({ - Component: TreeItem, - mappedProp: 'title', -}) +TreeItem.create = createShorthandFactory({ Component: TreeItem }) /** * A TreeItem renders an item of a Tree. diff --git a/packages/react/src/components/Tree/TreeTitle.tsx b/packages/react/src/components/Tree/TreeTitle.tsx index b3878245d6..af0ec89711 100644 --- a/packages/react/src/components/Tree/TreeTitle.tsx +++ b/packages/react/src/components/Tree/TreeTitle.tsx @@ -99,10 +99,7 @@ class TreeTitle extends UIComponent> { } } -TreeTitle.create = createShorthandFactory({ - Component: TreeTitle, - mappedProp: 'content', -}) +TreeTitle.create = createShorthandFactory({ Component: TreeTitle }) /** * A TreeTitle renders a title of TreeItem. diff --git a/packages/react/src/components/Video/Video.tsx b/packages/react/src/components/Video/Video.tsx index 83c30a52b0..1deb3f02fa 100644 --- a/packages/react/src/components/Video/Video.tsx +++ b/packages/react/src/components/Video/Video.tsx @@ -97,7 +97,7 @@ class Video extends UIComponent> { } } -Video.create = createShorthandFactory({ Component: Video, mappedProp: 'src' }) +Video.create = createShorthandFactory({ Component: Video }) /** * A Video provides ability to embed video content. diff --git a/packages/react/src/utils/createComponentInternal.ts b/packages/react/src/utils/createComponentInternal.ts index 37017d7519..637e502ad0 100644 --- a/packages/react/src/utils/createComponentInternal.ts +++ b/packages/react/src/utils/createComponentInternal.ts @@ -63,10 +63,7 @@ const createComponentInternal =

= any>({ FluentComponent.className = className - FluentComponent.create = createShorthandFactory({ - Component: mergedDefaultProps.as, - mappedProp: shorthandPropName, - }) + FluentComponent.create = createShorthandFactory({ Component: mergedDefaultProps.as }) FluentComponent.displayName = displayName diff --git a/packages/react/src/utils/factories.ts b/packages/react/src/utils/factories.ts index 8c0f4855c8..a6394b9a00 100644 --- a/packages/react/src/utils/factories.ts +++ b/packages/react/src/utils/factories.ts @@ -4,16 +4,12 @@ import * as React from 'react' import { ShorthandValue, Props, - PropsOf, ShorthandRenderCallback, ShorthandRenderFunction, ShorthandRenderer, } from '../types' import { mergeStyles } from './mergeThemes' -type HTMLTag = 'iframe' | 'img' | 'input' -type ShorthandProp = 'children' | 'src' | 'type' - interface CreateShorthandOptions

{ /** Default props object */ defaultProps?: () => Partial> @@ -28,13 +24,6 @@ interface CreateShorthandOptions

{ render?: ShorthandRenderFunction

} -// It's only necessary to map props that don't use 'children' as value ('children' is the default) -const mappedProps: { [key in HTMLTag]: ShorthandProp } = { - iframe: 'src', - img: 'src', - input: 'type', -} - // ============================================================ // Factories // ============================================================ @@ -43,15 +32,11 @@ const mappedProps: { [key in HTMLTag]: ShorthandProp } = { export function createShorthand

({ allowsJSX, Component, - mappedProp, - mappedArrayProp, valueOrRenderCallback, options = {}, }: { Component: React.ElementType allowsJSX?: boolean - mappedProp?: string - mappedArrayProp?: string valueOrRenderCallback?: ShorthandValue

| ShorthandRenderCallback

options?: CreateShorthandOptions

}): React.ReactElement | null | undefined { @@ -72,8 +57,6 @@ export function createShorthand

({ allowsJSX, Component, renderCallback: valueOrRenderCallback as ShorthandRenderCallback

, - mappedProp, - mappedArrayProp, options, }) } @@ -81,8 +64,6 @@ export function createShorthand

({ return createShorthandFromValue({ allowsJSX, Component, - mappedProp, - mappedArrayProp, value: valueOrRenderCallback as ShorthandValue, options, }) @@ -105,29 +86,18 @@ export function createShorthandFactory< >(config: { /** A ReactClass or string */ Component: TStringElement - /** A function that maps a primitive value to the Component props */ - mappedProp?: keyof PropsOf - /** A function that maps an array value to the Component props */ - mappedArrayProp?: keyof PropsOf /** Indicates if factory supports React Elements */ allowsJSX?: boolean }): ShorthandFactory

export function createShorthandFactory< TFunctionComponent extends React.FunctionComponent, P ->(config: { - Component: TFunctionComponent - mappedProp?: keyof PropsOf - mappedArrayProp?: keyof PropsOf - allowsJSX?: boolean -}): ShorthandFactory

+>(config: { Component: TFunctionComponent; allowsJSX?: boolean }): ShorthandFactory

export function createShorthandFactory(config: { Component: { new (...args: any[]): TInstance } - mappedProp?: keyof PropsOf - mappedArrayProp?: keyof PropsOf allowsJSX?: boolean }): ShorthandFactory

-export function createShorthandFactory

({ Component, mappedProp, mappedArrayProp, allowsJSX }) { +export function createShorthandFactory

({ Component, allowsJSX }) { if (typeof Component !== 'function' && typeof Component !== 'string') { throw new Error('createShorthandFactory() Component must be a string or function.') } @@ -135,8 +105,6 @@ export function createShorthandFactory

({ Component, mappedProp, mappedArrayPr return (val, options: CreateShorthandOptions

) => createShorthand({ Component, - mappedProp, - mappedArrayProp, allowsJSX, valueOrRenderCallback: val, options, @@ -149,15 +117,11 @@ export function createShorthandFactory

({ Component, mappedProp, mappedArrayPr function createShorthandFromValue

({ Component, - mappedProp, - mappedArrayProp, value, options, allowsJSX = true, }: { Component: React.ElementType - mappedProp?: string - mappedArrayProp?: string allowsJSX?: boolean value?: ShorthandValue

options?: CreateShorthandOptions

@@ -169,16 +133,14 @@ function createShorthandFromValue

({ const valIsNoop = _.isNil(value) || typeof value === 'boolean' if (valIsNoop && !options.render) return null - const valIsPrimitive = typeof value === 'string' || typeof value === 'number' const valIsPropsObject = _.isPlainObject(value) - const valIsArray = _.isArray(value) const valIsReactElement = React.isValidElement(value) // unhandled type warning if (process.env.NODE_ENV !== 'production') { const displayName = typeof Component === 'string' ? Component : Component.displayName - if (!valIsPrimitive && !valIsPropsObject && !valIsArray && !valIsReactElement && !valIsNoop) { + if (!valIsPropsObject && !valIsReactElement && !valIsNoop) { /* eslint-disable-next-line no-console */ console.error( [ @@ -221,18 +183,6 @@ function createShorthandFromValue

({ // Merge props const props: Props

= { ...defaultProps, ...usersProps, ...overrideProps } - const mappedHTMLProps = mappedProps[overrideProps.as || defaultProps.as] - - // Map prop for primitive value - if (valIsPrimitive || valIsReactElement) { - ;(props as any)[mappedHTMLProps || mappedProp || 'children'] = value - } - - // Map prop for array value - if (valIsArray) { - ;(props as any)[mappedHTMLProps || mappedArrayProp || 'children'] = value - } - // Merge className if (defaultProps.className || overrideProps.className || usersProps.className) { const mergedClassesNames = cx( @@ -264,11 +214,6 @@ function createShorthandFromValue

({ // Use key or generate key if (generateKey && _.isNil(props.key)) { - if (valIsPrimitive) { - // use string/number shorthand values as the key - ;(props as any).key = value - } - if (valIsReactElement) { // use the key from React Element const elementKey = (value as React.ReactElement).key @@ -302,7 +247,7 @@ function createShorthandFromValue

({ } // Create ReactElements from built up props - if (valIsPrimitive || valIsPropsObject || valIsArray || valIsReactElement) { + if (valIsPropsObject || valIsReactElement) { return React.createElement(Component, props) } @@ -312,23 +257,17 @@ function createShorthandFromValue

({ function createShorthandFromRenderCallback

({ Component, renderCallback, - mappedProp, - mappedArrayProp, allowsJSX, options, }: { Component: React.ReactType renderCallback: ShorthandRenderCallback

- mappedProp?: string - mappedArrayProp?: string allowsJSX?: boolean options?: CreateShorthandOptions

}) { const render: ShorthandRenderer

= (shorthandValue, renderTree) => { return createShorthandFromValue({ Component, - mappedProp, - mappedArrayProp, allowsJSX, value: shorthandValue, options: { diff --git a/packages/react/test/specs/utils/factories-test.tsx b/packages/react/test/specs/utils/factories-test.tsx index bcee29f62e..bba0e67ce1 100644 --- a/packages/react/test/specs/utils/factories-test.tsx +++ b/packages/react/test/specs/utils/factories-test.tsx @@ -13,8 +13,6 @@ import { consoleUtil } from 'test/utils' type ShorthandConfig = { Component?: React.ReactType defaultProps?: () => Props - mappedProp?: string - mappedArrayProp?: string overrideProps?: (Props & ((props: Props) => Props)) | Props generateKey?: boolean valueOrRenderCallback?: ShorthandValue @@ -27,8 +25,6 @@ type ShorthandConfig = { const getShorthand = ({ Component = 'div', defaultProps, - mappedProp = '', - mappedArrayProp = '', overrideProps, generateKey, valueOrRenderCallback, @@ -36,8 +32,6 @@ const getShorthand = ({ }: ShorthandConfig) => createShorthand({ Component, - mappedProp, - mappedArrayProp, valueOrRenderCallback, options: { defaultProps, @@ -93,19 +87,10 @@ const itAppliesDefaultProps = (valueOrRenderCallback: ShorthandValue) => }) } -const itDoesNotIncludePropsFromMappedProp = valueOrRenderCallback => { - test('does not include props from mappedProp', () => { - const mappedProp = 'data-foo' - const wrapper = shallow(getShorthand({ valueOrRenderCallback, mappedProp })) - - expect(wrapper.prop(mappedProp)).not.toBeDefined() - }) -} - const itMergesClassNames = ( classNameSource: string, extraClassName: string, - shorthandConfig: { valueOrRenderCallback?: ShorthandValue; mappedProp?: string }, + shorthandConfig: { valueOrRenderCallback?: ShorthandValue }, ) => { test(`merges defaultProps className and ${classNameSource} className`, () => { const defaultProps = () => ({ className: 'default' }) @@ -124,28 +109,12 @@ const itMergesClassNames = ( }) } -const itAppliesProps = ( - propsSource: string, - expectedProps: Props, - shorthandConfig: ShorthandConfig, -) => { - test(`applies props from the ${propsSource} props`, () => { - testCreateShorthand(shorthandConfig, expectedProps) - }) -} - const itOverridesDefaultProps = (propsSource, defaultProps, expectedProps, shorthandConfig) => { test(`overrides defaultProps with ${propsSource} props`, () => { testCreateShorthand({ defaultProps, ...shorthandConfig }, expectedProps) }) } -const mappedProps = { - iframe: 'src', - img: 'src', - input: 'type', -} - const itOverridesDefaultPropsWithFalseyProps = (propsSource, shorthandConfig) => { test(`overrides defaultProps with falsey ${propsSource} props`, () => { const defaultProps = () => ({ undef: '-', nil: '-', zero: '-', empty: '-' }) @@ -166,20 +135,13 @@ describe('factories', () => { }) test('does not throw if passed a function Component', () => { - const goodUsage = () => - createShorthandFactory({ Component: () =>

, mappedProp: 'children' }) + const goodUsage = () => createShorthandFactory({ Component: () =>
}) expect(goodUsage).not.toThrowError() }) test('does not throw if passed a string Component', () => { - const goodUsage = () => createShorthandFactory({ Component: 'div', mappedProp: 'className' }) - - expect(goodUsage).not.toThrowError() - }) - - test('does not throw if do not passed `mappedProp`', () => { - const goodUsage = () => createShorthandFactory({ Component: () =>
}) + const goodUsage = () => createShorthandFactory({ Component: 'div' }) expect(goodUsage).not.toThrowError() }) @@ -189,7 +151,7 @@ describe('factories', () => { const badComponents: any = [undefined, null, true, false, [], {}, 123] _.each(badComponents, badComponent => { - const badUsage = () => createShorthandFactory({ Component: badComponent, mappedProp: '' }) + const badUsage = () => createShorthandFactory({ Component: badComponent }) expect(badUsage).toThrowError() }) @@ -202,13 +164,13 @@ describe('factories', () => { }) test('does not throw if passed a function Component', () => { - const goodUsage = () => createShorthand({ Component: () =>
, mappedProp: '' }) + const goodUsage = () => createShorthand({ Component: () =>
}) expect(goodUsage).not.toThrowError() }) test('does not throw if passed a string Component', () => { - const goodUsage = () => createShorthand({ Component: 'div', mappedProp: '' }) + const goodUsage = () => createShorthand({ Component: 'div' }) expect(goodUsage).not.toThrowError() }) @@ -218,7 +180,7 @@ describe('factories', () => { const badComponents: any[] = [undefined, null, true, false, [], {}, 123] _.each(badComponents, badComponent => { - const badUsage = () => createShorthand({ Component: badComponent, mappedProp: '' }) + const badUsage = () => createShorthand({ Component: badComponent }) expect(badUsage).toThrowError() }) @@ -613,138 +575,14 @@ describe('factories', () => { describe('from an element', () => { itReturnsAValidElement(
) itAppliesDefaultProps(
) - itMergesClassNames('mappedProp', 'mapped', { - valueOrRenderCallback:
, - mappedProp: 'className', - }) - - itAppliesProps( - 'mappedProp', - { 'data-prop':
}, - { - valueOrRenderCallback:
, - mappedProp: 'data-prop', - }, - ) - itOverridesDefaultProps( - 'mappedProp', - () => ({ some: 'defaults', overridden: null }), - { some: 'defaults', overridden:
}, - { - valueOrRenderCallback:
, - mappedProp: 'overridden', - }, - ) }) describe('from a string', () => { itReturnsAValidElement('foo') itAppliesDefaultProps('foo') - itMergesClassNames('mappedProp', 'mapped', { - valueOrRenderCallback: 'foo', - mappedProp: 'className', - }) - - itAppliesProps( - 'mappedProp', - { 'data-prop': 'foo' }, - { - valueOrRenderCallback: 'foo', - mappedProp: 'data-prop', - }, - ) - - itOverridesDefaultProps( - 'mappedProp', - () => ({ some: 'defaults', overridden: 'false' }), - { some: 'defaults', overridden: 'true' }, - { - valueOrRenderCallback: 'true', - mappedProp: 'overridden', - }, - ) - const mappedProp = 'test-mapped-prop' const value = 'test-value' - describe(`when sending HTML tag `, () => { - _.forEach(mappedProps, (val, as) => { - const testMsg = `spreads { ${[mappedProps[as]]}: '${value}' }` - - describe(`'${as}' as 'as' prop to defaultProps`, () => { - test(`overrides ${mappedProp} and ${testMsg}`, () => { - testCreateShorthand( - { mappedProp, valueOrRenderCallback: value, defaultProps: () => ({ as }) }, - { as, [mappedProps[as]]: value }, - ) - }) - }) - - describe(`'${as}' as 'as' prop to overrideProps`, () => { - test(`overrides ${mappedProp} and ${testMsg}`, () => { - testCreateShorthand( - { mappedProp, valueOrRenderCallback: value, overrideProps: { as } }, - { as, [mappedProps[as]]: value }, - ) - }) - }) - - describe(`'${as}' as 'as' prop to overrideProps`, () => { - test(`overrides defaultProps, ${mappedProp} and ${testMsg}`, () => { - testCreateShorthand( - { - mappedProp, - valueOrRenderCallback: value, - defaultProps: () => ({ as: 'overriden' }), - overrideProps: { as }, - }, - { as, [mappedProps[as]]: value }, - ) - }) - }) - }) - }) - - describe(`when sending ${mappedProp} as mappedProp`, () => { - const testMsg = `spreads { ${[mappedProp]}: '${value}' }` - - describe(`and an unsupported tag as 'as' prop to defaultProps`, () => { - test(testMsg, () => { - testCreateShorthand( - { - mappedProp, - valueOrRenderCallback: value, - defaultProps: () => ({ as: 'unsupported' }), - }, - { as: 'unsupported', [mappedProp]: value }, - ) - }) - }) - - describe(`and an unsupported tag as 'as' prop to overrideProps`, () => { - test(testMsg, () => { - testCreateShorthand( - { mappedProp, valueOrRenderCallback: value, overrideProps: { as: 'unsupported' } }, - { as: 'unsupported', [mappedProp]: value }, - ) - }) - }) - - describe(`an unsupported tag as 'as' prop to overrideProps and a supported tag to defaultProps`, () => { - test(testMsg, () => { - testCreateShorthand( - { - mappedProp, - valueOrRenderCallback: value, - defaultProps: () => ({ as: 'div' }), - overrideProps: { as: 'unsupported' }, - }, - { as: 'unsupported', [mappedProp]: value }, - ) - }) - }) - }) - describe(`when sending no mappedProp`, () => { const testMsg = `spreads { children: '${value}' } by default` @@ -784,7 +622,6 @@ describe('factories', () => { describe('from a props object', () => { itReturnsAValidElement({}) itAppliesDefaultProps({}) - itDoesNotIncludePropsFromMappedProp({}) itMergesClassNames('props object', 'user', { valueOrRenderCallback: { className: 'user' }, }) @@ -803,28 +640,6 @@ describe('factories', () => { }) }) - describe('from an array', () => { - const mappedArrayProp = 'test-mapped-prop-ar-array' - const value = ['test-value'] - - describe(`when sending mappedArrayProp`, () => { - const testMsg = `spreads { ${mappedArrayProp}: '${value}' }` - - describe(`and an unsupported tag as 'as' prop to defaultProps`, () => { - test(testMsg, () => { - testCreateShorthand( - { - mappedArrayProp, - valueOrRenderCallback: value, - defaultProps: () => ({ as: 'unsupported' }), - }, - { as: 'unsupported', [mappedArrayProp]: value }, - ) - }) - }) - }) - }) - describe('style', () => { test('merges style prop', () => { const defaultProps = () => ({ style: { left: 5 } }) From 84cd6cbe11edb4950ab5a45a12082978bc5bf184 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 3 Jan 2020 11:54:00 +0100 Subject: [PATCH 2/5] -cleanups --- docs/src/components/Sidebar/Sidebar.tsx | 10 +++++----- .../react/src/components/Chat/ChatItem.tsx | 2 +- .../HierarchicalTree/HierarchicalTree.tsx | 2 +- .../HierarchicalTree/HierarchicalTreeItem.tsx | 19 ++++++++++-------- packages/react/src/components/Input/Input.tsx | 2 +- packages/react/src/types.ts | 20 +++++++++---------- 6 files changed, 29 insertions(+), 26 deletions(-) diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx index 583941f2c1..da2b628cd9 100644 --- a/docs/src/components/Sidebar/Sidebar.tsx +++ b/docs/src/components/Sidebar/Sidebar.tsx @@ -135,7 +135,7 @@ class Sidebar extends React.Component { return [ { key: 'concepts', - title: 'Concepts', + title: { content: 'Concepts' }, items: [ { key: 'intro', @@ -169,7 +169,7 @@ class Sidebar extends React.Component { }, { key: 'guides', - title: 'Guides', + title: { content: 'Guides' }, items: [ { key: 'quickstart', @@ -249,7 +249,7 @@ class Sidebar extends React.Component { 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 { const componentTreeSection = { key: 'components', - title: 'Components', + title: { content: 'Components' }, items: treeItemsByType[0].items, } @@ -540,7 +540,7 @@ class Sidebar extends React.Component { inverted fluid clearable - icon="search" + icon={{ name: 'search' }} placeholder="Search" iconPosition="end" role="search" diff --git a/packages/react/src/components/Chat/ChatItem.tsx b/packages/react/src/components/Chat/ChatItem.tsx index dfc5013f69..de0a1d1869 100644 --- a/packages/react/src/components/Chat/ChatItem.tsx +++ b/packages/react/src/components/Chat/ChatItem.tsx @@ -141,7 +141,7 @@ class ChatItem extends UIComponent, any> { } } -ChatItem.create = createShorthandFactory({ Component: ChatItem, mappedProp: 'message' }) +ChatItem.create = createShorthandFactory({ Component: ChatItem }) ChatItem.slotClassNames = { message: `${ChatItem.className}__message`, gutter: `${ChatItem.className}__gutter`, diff --git a/packages/react/src/components/HierarchicalTree/HierarchicalTree.tsx b/packages/react/src/components/HierarchicalTree/HierarchicalTree.tsx index 85c3d3e604..cbb7f28a5d 100644 --- a/packages/react/src/components/HierarchicalTree/HierarchicalTree.tsx +++ b/packages/react/src/components/HierarchicalTree/HierarchicalTree.tsx @@ -44,7 +44,7 @@ export interface HierarchicalTreeProps extends UIComponentProps, ChildrenCompone exclusive?: boolean /** Shorthand array of props for Tree. */ - items?: ShorthandCollection + items?: ShorthandValue | ShorthandCollection /** * A custom render function for the title slot. diff --git a/packages/react/src/components/HierarchicalTree/HierarchicalTreeItem.tsx b/packages/react/src/components/HierarchicalTree/HierarchicalTreeItem.tsx index c4c3813951..c32bb841c9 100644 --- a/packages/react/src/components/HierarchicalTree/HierarchicalTreeItem.tsx +++ b/packages/react/src/components/HierarchicalTree/HierarchicalTreeItem.tsx @@ -178,14 +178,17 @@ class HierarchicalTreeItem extends UIComponent - {HierarchicalTree.create(items, { - defaultProps: () => ({ - accessibility: hierarchicalSubtreeBehavior, - className: HierarchicalTreeItem.slotClassNames.subtree, - exclusive, - renderItemTitle, - }), - })} + {HierarchicalTree.create( + { items }, + { + defaultProps: () => ({ + accessibility: hierarchicalSubtreeBehavior, + className: HierarchicalTreeItem.slotClassNames.subtree, + exclusive, + renderItemTitle, + }), + }, + )} )} diff --git a/packages/react/src/components/Input/Input.tsx b/packages/react/src/components/Input/Input.tsx index 30a4945d0e..109212c332 100644 --- a/packages/react/src/components/Input/Input.tsx +++ b/packages/react/src/components/Input/Input.tsx @@ -152,7 +152,7 @@ class Input extends AutoControlledComponent, InputState> handleRef(inputRef, inputElement) }} > - {Box.create(input || type, { + {Box.create(input || { type }, { defaultProps: () => ({ ...htmlInputProps, as: 'input', diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index e3024e2d9f..406e092b3d 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -64,19 +64,19 @@ export type ShorthandRenderer

= ( export type ShorthandRenderCallback

= (render: ShorthandRenderer

) => React.ReactElement // The ReactFragment here is replaced from the original typings with ReactNodeArray because of incorrect inheriting of the type when it is defined as {} -type ReactNode = - | React.ReactChild - | React.ReactNodeArray - | React.ReactPortal - | boolean - | null - | undefined +// type ReactNode = +// | React.ReactChild +// | React.ReactNodeArray +// | React.ReactPortal +// | boolean +// | null +// | undefined export type ShorthandRenderProp

= (Component: React.ElementType, props: P) => React.ReactNode -export type ShorthandValue

= - | ReactNode - | (Props

& { children?: P['children'] | ShorthandRenderProp

}) +export type ShorthandValue

= Props

& { + children?: P['children'] | ShorthandRenderProp

+} export type ShorthandCollection = ShorthandValue

[] // ======================================================== From ae49f8e9f4c437469bcabc1d9d8828f2beb463cf Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 3 Jan 2020 16:13:09 +0100 Subject: [PATCH 3/5] -some icon replacement --- .github/CONTRIBUTING.md | 2 +- .../src/components/GuidesNavigationFooter.tsx | 4 +- .../Rtl/AlertExampleDismissAction.rtl.tsx | 2 +- .../Slots/AttachmentIconExample.shorthand.tsx | 6 +- .../AttachmentActionableExample.shorthand.tsx | 2 +- .../ButtonExampleDisabled.shorthand.tsx | 6 +- .../Types/ButtonExampleIconOnly.shorthand.tsx | 4 +- .../Types/ButtonExampleText.shorthand.tsx | 18 ++++-- .../ButtonExampleCircular.shorthand.tsx | 4 +- docs/src/examples/components/Flex/Recipes.mdx | 4 +- .../InputExampleFluid.shorthand.tsx | 2 +- .../Variations/InputExampleIcon.shorthand.tsx | 2 +- .../InputExampleIconClearable.shorthand.tsx | 2 +- .../InputExampleIconPosition.shorthand.tsx | 2 +- ...utExampleInlineIconClearable.shorthand.tsx | 4 +- .../Content/LabelExampleIcon.shorthand.tsx | 2 +- .../LabelExampleIconPosition.shorthand.tsx | 2 +- .../ListExampleHorizontal.shorthand.tsx | 4 +- .../PopupControlledExample.shorthand.tsx | 12 +++- .../Popup/Types/PopupControlledExample.tsx | 12 +++- .../PopupCustomTargetExample.shorthand.tsx | 9 ++- .../Popup/Types/PopupCustomTargetExample.tsx | 2 +- .../Popup/Types/PopupExample.shorthand.tsx | 5 +- .../components/Popup/Types/PopupExample.tsx | 2 +- .../Popup/Types/PopupExampleInline.tsx | 2 +- .../Types/PopupFocusTrapExample.shorthand.tsx | 8 +-- .../Usage/PopupExampleAsync.shorthand.tsx | 2 +- .../Popup/Usage/PopupExampleOn.shorthand.tsx | 8 +-- .../PopupExampleOnMultiple.shorthand.tsx | 18 ++++-- .../PopupExampleOnWithFocusTrap.shorthand.tsx | 8 +-- .../Content/ToolbarExamplePopup.shorthand.tsx | 2 +- .../Types/ToolbarExampleEditor.shorthand.tsx | 2 +- .../ToolbarExamplePopupInMenu.shorthand.tsx | 4 +- .../AsyncShorthand/AsyncShorthand.tsx | 7 +- docs/src/prototypes/CopyToClipboard/index.tsx | 2 +- .../chatPane/services/messageFactoryMock.tsx | 4 +- docs/src/prototypes/popups/emojiPicker.tsx | 2 +- docs/src/prototypes/popups/stickerPicker.tsx | 2 +- docs/src/views/Accessibility.tsx | 6 +- docs/src/views/Layout.tsx | 4 +- docs/src/views/QuickStart.tsx | 2 +- docs/src/views/Theming.tsx | 8 +-- docs/src/views/ThemingExamples.tsx | 64 +++++++++---------- e2e/tests/popupClickHandling-example.tsx | 2 +- .../popupInSubmenuInToolbarMenu-example.tsx | 2 +- e2e/tests/popupInToolbarMenu-example.tsx | 6 +- .../specs/components/Button/Button-test.tsx | 14 ++-- 47 files changed, 174 insertions(+), 119 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 1111254447..258581c18c 100644 --- a/.github/CONTRIBUTING.md +++ b/.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 -

diff --git a/docs/src/examples/components/Button/Types/ButtonExampleText.shorthand.tsx b/docs/src/examples/components/Button/Types/ButtonExampleText.shorthand.tsx index bd4662d2f4..e3397500db 100644 --- a/docs/src/examples/components/Button/Types/ButtonExampleText.shorthand.tsx +++ b/docs/src/examples/components/Button/Types/ButtonExampleText.shorthand.tsx @@ -6,16 +6,26 @@ const ButtonExampleTextShorthand = () => (
) diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx index 9349705e0d..3badf3ebb6 100644 --- a/docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx +++ b/docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx @@ -4,8 +4,8 @@ import { Button, Flex } from '@fluentui/react' const ButtonExampleCircular = () => (
) @@ -266,10 +266,10 @@ export default () => ( >
@@ -287,10 +287,10 @@ export default () => ( {/* Default theming */}
@@ -340,10 +340,10 @@ export default () => (
, )) @@ -70,7 +74,9 @@ describe('Button', () => { await htmlIsAccessibilityCompliant()) test('button with text and icon', async () => - await htmlIsAccessibilityCompliant(
) diff --git a/docs/src/examples/components/Attachment/Performance/AttachmentSlots.perf.tsx b/docs/src/examples/components/Attachment/Performance/AttachmentSlots.perf.tsx index bbf71eccff..081fc21592 100644 --- a/docs/src/examples/components/Attachment/Performance/AttachmentSlots.perf.tsx +++ b/docs/src/examples/components/Attachment/Performance/AttachmentSlots.perf.tsx @@ -4,7 +4,7 @@ import * as React from 'react' const AttachmentSlotsPerf = () => ( ( - + ) export default AttachmentExampleRtl diff --git a/docs/src/examples/components/Button/Performance/ButtonSlots.perf.tsx b/docs/src/examples/components/Button/Performance/ButtonSlots.perf.tsx index 316a73c470..58cb488028 100644 --- a/docs/src/examples/components/Button/Performance/ButtonSlots.perf.tsx +++ b/docs/src/examples/components/Button/Performance/ButtonSlots.perf.tsx @@ -3,7 +3,7 @@ import * as React from 'react' const ButtonSlotsPerf = () => (
diff --git a/docs/src/prototypes/EditorToolbar/EditorToolbar.tsx b/docs/src/prototypes/EditorToolbar/EditorToolbar.tsx index fa3722e676..5634eba4bd 100644 --- a/docs/src/prototypes/EditorToolbar/EditorToolbar.tsx +++ b/docs/src/prototypes/EditorToolbar/EditorToolbar.tsx @@ -72,7 +72,7 @@ const EditorToolbar: React.FC = props => { { toolbarItem: { key: 'bold', - icon: 'bold', + icon: { name: 'bold' }, active: props.bold, onClick: () => props.dispatch({ type: 'BOLD', value: !props.bold }), }, @@ -80,7 +80,7 @@ const EditorToolbar: React.FC = props => { { toolbarItem: { key: 'italic', - icon: 'italic', + icon: { name: 'italic' }, active: props.italic, onClick: () => props.dispatch({ type: 'ITALIC', value: !props.italic }), }, @@ -88,7 +88,7 @@ const EditorToolbar: React.FC = props => { { toolbarItem: { key: 'underline', - icon: 'underline', + icon: { name: 'underline' }, active: props.underline, onClick: () => props.dispatch({ type: 'UNDERLINE', value: !props.underline }), }, @@ -96,9 +96,9 @@ const EditorToolbar: React.FC = props => { { toolbarItem: { key: 'divider-1', kind: 'divider' } }, - { toolbarItem: { key: 'highlight', icon: 'highlight', active: props.fontHighlight } }, - { toolbarItem: { key: 'font-color', icon: 'font-color', active: props.fontColor } }, - { toolbarItem: { key: 'font-size', icon: 'font-size', active: props.fontSize } }, + { toolbarItem: { key: 'highlight', icon: { name: 'highlight' }, active: props.fontHighlight } }, + { toolbarItem: { key: 'font-color', icon: { name: 'font-color' }, active: props.fontColor } }, + { toolbarItem: { key: 'font-size', icon: { name: 'font-size' }, active: props.fontSize } }, { toolbarItem: { @@ -133,31 +133,35 @@ const EditorToolbar: React.FC = props => { }, open: props.fontFormattingOpen, }, - icon: 'question', + icon: { name: 'question' }, content: props.fontFormatting, }, }, { - toolbarItem: { key: 'remove-format', icon: 'remove-format' }, - overflowItem: { key: 'remove-format', icon: 'remove-format', content: 'Clear formatting' }, + toolbarItem: { key: 'remove-format', icon: { name: 'remove-format' } }, + overflowItem: { + key: 'remove-format', + icon: { name: 'remove-format' }, + content: 'Clear formatting', + }, }, { toolbarItem: { key: 'divider-2', kind: 'divider' } }, { - toolbarItem: { key: 'bullets', icon: 'bullets', active: props.itemList }, + toolbarItem: { key: 'bullets', icon: { name: 'bullets' }, active: props.itemList }, overflowItem: { key: 'bullets', - icon: 'bullets', + icon: { name: 'bullets' }, active: props.itemList, content: 'Bulleted list', }, }, { - toolbarItem: { key: 'number-list', icon: 'number-list', active: props.numberList }, + toolbarItem: { key: 'number-list', icon: { name: 'number-list' }, active: props.numberList }, overflowItem: { key: 'number-list', - icon: 'number-list', + icon: { name: 'number-list' }, active: props.numberList, content: 'Number list', }, @@ -168,7 +172,7 @@ const EditorToolbar: React.FC = props => { { toolbarItem: { key: 'link', - icon: 'link', + icon: { name: 'link' }, active: props.link, children: (Component, props) => ( @@ -179,7 +183,7 @@ const EditorToolbar: React.FC = props => { }, overflowItem: { key: 'link', - icon: 'link', + icon: { name: 'link' }, content: 'Insert link', onClick: () => props.dispatch({ type: 'LINK', value: true }), }, @@ -187,12 +191,12 @@ const EditorToolbar: React.FC = props => { { toolbarItem: { key: 'code', - icon: 'code-snippet', + icon: { name: 'code-snippet' }, active: props.code, }, overflowItem: { key: 'code', - icon: 'code-snippet', + icon: { name: 'code-snippet' }, content: 'Code snippet', active: props.code, }, @@ -200,7 +204,7 @@ const EditorToolbar: React.FC = props => { { toolbarItem: { key: 'table', - icon: 'table', + icon: { name: 'table' }, content: 'Insert table', active: props.table, diff --git a/docs/src/prototypes/alerts/BannerAlerts.tsx b/docs/src/prototypes/alerts/BannerAlerts.tsx index a2b7e7e147..00e9a0c78f 100644 --- a/docs/src/prototypes/alerts/BannerAlerts.tsx +++ b/docs/src/prototypes/alerts/BannerAlerts.tsx @@ -89,7 +89,7 @@ class BannerAlerts extends React.Component<{}, BannerAlertsState> { content: getBannerContent(selectedBannerName), ...(isAlertClosable(selectedBannerName) && { open, - action: { icon: 'close', onClick: this.closeSelectedBanner }, + action: { icon: { name: 'close' }, onClick: this.closeSelectedBanner }, }), }} /> diff --git a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx index 74b4266d8f..410cee38bc 100644 --- a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx +++ b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx @@ -13,13 +13,13 @@ import { Ref } from '@fluentui/react-component-ref' const reactions: ShorthandCollection = [ { - icon: 'thumbs up', + icon: { name: 'thumbs up' }, content: '1K', key: 'likes', variables: { meReacting: true }, }, { - icon: 'emoji', + icon: { name: 'emoji' }, content: 2, key: 'smiles', }, @@ -31,7 +31,7 @@ const reactionsWithPopup = reactions.map(reaction => render => const janeAvatar = { image: 'public/images/avatar/small/ade.jpg', - status: { color: 'green', icon: 'check' }, + status: { color: 'green', icon: { name: 'check' } }, } const ChatWithPopover = () => { diff --git a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/Popover.tsx b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/Popover.tsx index a82ed899f1..9b7e631969 100644 --- a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/Popover.tsx +++ b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/Popover.tsx @@ -54,34 +54,34 @@ class Popover extends React.Component { items={[ { key: 'smile', - icon: 'smile', + icon: { name: 'smile' }, className: 'smile-emoji', 'aria-label': 'smile one', onClick: this.handleActionableItemClick, }, { key: 'smile2', - icon: 'smile', + icon: { name: 'smile' }, className: 'smile-emoji', 'aria-label': 'smile two', onClick: this.handleActionableItemClick, }, { key: 'smile3', - icon: 'smile', + icon: { name: 'smile' }, className: 'smile-emoji', 'aria-label': 'smile three', onClick: this.handleActionableItemClick, }, { key: 'a', - icon: 'thumbs up', + icon: { name: 'thumbs up' }, 'aria-label': 'thumbs up', onClick: this.handleActionableItemClick, }, { key: 'c', - icon: 'ellipsis horizontal', + icon: { name: 'ellipsis horizontal' }, onMenuOpenChange: (e, { menuOpen }) => { onShowActionMenuChange(true) onForceShowActionMenuChange(menuOpen) @@ -91,9 +91,9 @@ class Popover extends React.Component { menu: { pills: true, items: [ - { key: 'bookmark', icon: 'folder', content: 'Save this message' }, - { key: 'linkify', icon: 'linkify', content: 'Copy link' }, - { key: 'translate', icon: 'translate', content: 'Translate' }, + { key: 'bookmark', icon: { name: 'folder' }, content: 'Save this message' }, + { key: 'linkify', icon: { name: 'linkify' }, content: 'Copy link' }, + { key: 'translate', icon: { name: 'translate' }, content: 'Translate' }, ], }, }, diff --git a/docs/src/prototypes/chatMessages/ControlMessages/index.tsx b/docs/src/prototypes/chatMessages/ControlMessages/index.tsx index 364796191b..77c91d2960 100644 --- a/docs/src/prototypes/chatMessages/ControlMessages/index.tsx +++ b/docs/src/prototypes/chatMessages/ControlMessages/index.tsx @@ -15,7 +15,7 @@ const janeAvatar = { image: 'public/images/avatar/small/ade.jpg', status: { color: 'green', - icon: 'check', + icon: { name: 'check' }, }, } diff --git a/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx b/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx index 2519507033..d3921138c8 100644 --- a/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx +++ b/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx @@ -3,7 +3,7 @@ import { Avatar, Chat, ChatItemProps, ShorthandCollection } from '@fluentui/reac const janeAvatar = { image: 'public/images/avatar/small/ade.jpg', - status: { color: 'green', icon: 'check' }, + status: { color: 'green', icon: { name: 'check' } }, } const items: ShorthandCollection = [ @@ -14,7 +14,7 @@ const items: ShorthandCollection = [ author="John Doe" timestamp="Yesterday, 10:15 PM" mine - badge={{ icon: 'redbang' }} + badge={{ icon: { name: 'redbang' } }} variables={{ isImportant: true }} /> ), @@ -29,7 +29,7 @@ const items: ShorthandCollection = [ content="This is another important message (see how the borders radius respect the grouped ones)" author="Jane Doe" timestamp="Yesterday, 10:15 PM" - badge={{ icon: 'redbang' }} + badge={{ icon: { name: 'redbang' } }} variables={{ isImportant: true }} /> ), @@ -43,7 +43,7 @@ const items: ShorthandCollection = [ content="This is mention message @John" author="Jane Doe" timestamp="Yesterday, 10:15 PM" - badge={{ icon: 'mention' }} + badge={{ icon: { name: 'mention' } }} variables={{ hasMention: true }} /> ), @@ -57,7 +57,7 @@ const items: ShorthandCollection = [ content="This is another mention message @John with custom color" author="Jane Doe" timestamp="Yesterday, 10:15 PM" - badge={{ icon: 'mention' }} + badge={{ icon: { name: 'mention' } }} variables={siteVars => ({ hasMention: true, hasMentionColor: siteVars.colors.brand[600], @@ -74,7 +74,7 @@ const items: ShorthandCollection = [ author="John Doe" timestamp="Yesterday, 10:16 PM" mine - badge={{ icon: 'redbang' }} + badge={{ icon: { name: 'redbang' } }} variables={siteVars => ({ isImportant: true, isImportantColor: siteVars.colors.yellow[400], diff --git a/docs/src/prototypes/chatMessages/ThreadedMessages/ThreadedMessage.tsx b/docs/src/prototypes/chatMessages/ThreadedMessages/ThreadedMessage.tsx index 3e617c7700..eaac7b241a 100644 --- a/docs/src/prototypes/chatMessages/ThreadedMessages/ThreadedMessage.tsx +++ b/docs/src/prototypes/chatMessages/ThreadedMessages/ThreadedMessage.tsx @@ -36,7 +36,7 @@ class ThreadedMessage extends React.Component { header={meeting.header} description={meeting.description} action={{ - icon: 'more', + icon: { name: 'more' }, }} /> )} diff --git a/docs/src/prototypes/chatMessages/ThreadedMessages/mockData.tsx b/docs/src/prototypes/chatMessages/ThreadedMessages/mockData.tsx index c746b1cc49..5e66d393c6 100644 --- a/docs/src/prototypes/chatMessages/ThreadedMessages/mockData.tsx +++ b/docs/src/prototypes/chatMessages/ThreadedMessages/mockData.tsx @@ -6,12 +6,12 @@ export const actionMenu = { items: [ { key: 'like', - icon: 'like', + icon: { name: 'like' }, title: 'Like', }, { key: 'more', - icon: 'more', + icon: { name: 'more' }, title: 'More actions', }, ], @@ -21,7 +21,7 @@ export const janeAvatar = { image: 'public/images/avatar/small/ade.jpg', status: { color: 'green', - icon: 'check', + icon: { name: 'check' }, }, } diff --git a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx index f5b2b267ab..6d07ae1cb4 100644 --- a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx +++ b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx @@ -38,9 +38,9 @@ type ChatItem = { type StatusPropsExtendable = Extendable const statusMap: Map = new Map([ - ['Available', { color: 'green', icon: 'check', title: 'Available' }], - ['DoNotDisturb', { color: 'red', icon: 'minus', title: 'Do not disturb' }], - ['Away', { color: 'yellow', icon: 'clock', title: 'Away' }], + ['Available', { color: 'green', icon: { name: 'check' }, title: 'Available' }], + ['DoNotDisturb', { color: 'red', icon: { name: 'minus' }, title: 'Do not disturb' }], + ['Away', { color: 'yellow', icon: { name: 'clock' }, title: 'Away' }], ['Offline', { color: 'grey', title: 'Offline' }], ] as [UserStatus, StatusPropsExtendable][]) @@ -97,19 +97,19 @@ function createMessageContentWithAttachments(content: string, messageId: string) { key: 'download', content: 'Download', - icon: 'download', + icon: { name: 'download' }, onClick: menuClickHandler('Download'), }, { key: 'linkify', content: 'Get link', - icon: 'linkify', + icon: { name: 'linkify' }, onClick: menuClickHandler('Get link'), }, { key: 'tab', content: 'Make this a tab', - icon: 'folder open', + icon: { name: 'folder open' }, onClick: menuClickHandler('Make tab'), }, ]} diff --git a/docs/src/prototypes/customToolbar/CustomToolbar.tsx b/docs/src/prototypes/customToolbar/CustomToolbar.tsx index 9137a9224d..9df9b1597f 100644 --- a/docs/src/prototypes/customToolbar/CustomToolbar.tsx +++ b/docs/src/prototypes/customToolbar/CustomToolbar.tsx @@ -16,7 +16,7 @@ import { const tooltips = { videoOn: 'Turn camera off', videoOff: 'Turn camera on', - micOn: 'Mute', + micon: { name: 'Mute' }, micOff: 'Unmute', share: 'Share', shareStop: 'Stop sharing', diff --git a/docs/src/prototypes/employeeCard/index.tsx b/docs/src/prototypes/employeeCard/index.tsx index 43ca4ece65..c1de004bf0 100644 --- a/docs/src/prototypes/employeeCard/index.tsx +++ b/docs/src/prototypes/employeeCard/index.tsx @@ -15,7 +15,7 @@ class EmployeeCardPrototype extends React.Component email: 'John.Doe@company.com', avatar: { label: { variables: { backgroundColor: '#00b5ad', color: 'white' } }, - status: { color: 'green', icon: 'check', title: 'Available' }, + status: { color: 'green', icon: { name: 'check' }, title: 'Available' }, }, } return ( diff --git a/docs/src/prototypes/hexagonalAvatar/index.tsx b/docs/src/prototypes/hexagonalAvatar/index.tsx index 3d2dac3ac5..bdcfb5f6ff 100644 --- a/docs/src/prototypes/hexagonalAvatar/index.tsx +++ b/docs/src/prototypes/hexagonalAvatar/index.tsx @@ -4,7 +4,7 @@ import { Flex, StatusProps, WithAsProp, Extendable, Text } from '@fluentui/react import CustomAvatar from './CustomAvatar' const statusProps: Extendable> = { - icon: 'icon-checkmark', + icon: { name: 'icon-checkmark' }, state: 'success', title: 'Available', } diff --git a/docs/src/prototypes/popups/GridImagePicker/GridImagePicker.tsx b/docs/src/prototypes/popups/GridImagePicker/GridImagePicker.tsx index 565878fc0a..703940409c 100644 --- a/docs/src/prototypes/popups/GridImagePicker/GridImagePicker.tsx +++ b/docs/src/prototypes/popups/GridImagePicker/GridImagePicker.tsx @@ -27,7 +27,7 @@ const inputStyles = { class GridImagePicker extends React.Component { static defaultProps = { gridColumns: 5, - inputIcon: 'search', + inputicon: { name: 'search' }, inputPlaceholder: 'Search...', } diff --git a/e2e/tests/popupInSubmenuInToolbarMenu-example.tsx b/e2e/tests/popupInSubmenuInToolbarMenu-example.tsx index 7b9f5866b8..e86a7814db 100644 --- a/e2e/tests/popupInSubmenuInToolbarMenu-example.tsx +++ b/e2e/tests/popupInSubmenuInToolbarMenu-example.tsx @@ -20,7 +20,7 @@ const ToolbarExamplePopupInMenu = () => { { id: selectors.menuButtonId, key: 'menu', - icon: 'more', + icon: { name: 'more' }, active: menuOpen, menu: { id: selectors.toolbarMenuId, diff --git a/e2e/tests/popupInToolbarMenu-example.tsx b/e2e/tests/popupInToolbarMenu-example.tsx index bf5e27b445..dc4aa1632d 100644 --- a/e2e/tests/popupInToolbarMenu-example.tsx +++ b/e2e/tests/popupInToolbarMenu-example.tsx @@ -19,7 +19,7 @@ const ToolbarExamplePopupInMenu = () => { { id: selectors.menuButtonId, key: 'menu', - icon: 'more', + icon: { name: 'more' }, active: menuOpen, menu: { items: [ diff --git a/e2e/tests/submenuInToolbarMenu-example.tsx b/e2e/tests/submenuInToolbarMenu-example.tsx index 577965871b..e22b303c23 100644 --- a/e2e/tests/submenuInToolbarMenu-example.tsx +++ b/e2e/tests/submenuInToolbarMenu-example.tsx @@ -21,7 +21,7 @@ const ToolbarExampleMenuWithSubmenuShorthand = () => { { id: selectors.moreButtonId, key: 'more', - icon: 'more', + icon: { name: 'more' }, active: menuOpen, menu: { id: selectors.toolbarMenuId, @@ -29,7 +29,7 @@ const ToolbarExampleMenuWithSubmenuShorthand = () => { { key: 'play', content: 'Play', - icon: 'play', + icon: { name: 'play' }, id: selectors.playId, menu: { id: selectors.toolbarMenuSubmenuId, @@ -44,7 +44,7 @@ const ToolbarExampleMenuWithSubmenuShorthand = () => { ], }, }, - { key: 'pause', content: 'Pause', icon: 'pause' }, + { key: 'pause', content: 'Pause', icon: { name: 'pause' } }, { key: 'divider', kind: 'divider' }, 'Without icon', ], diff --git a/e2e/tests/toolbarMenu-example.tsx b/e2e/tests/toolbarMenu-example.tsx index 099776400a..cc33f1d1ba 100644 --- a/e2e/tests/toolbarMenu-example.tsx +++ b/e2e/tests/toolbarMenu-example.tsx @@ -18,17 +18,17 @@ const ToolbarExampleMenuShorthand = () => { items={[ { key: 'highlight', - icon: 'highlight', + icon: { name: 'highlight' }, }, { key: 'more', - icon: 'more', + icon: { name: 'more' }, active: menuOpen, id: selectors.triggerButtonId, menu: { items: [ - { key: 'play', content: 'Play', icon: 'play' }, - { key: 'pause', content: 'Pause', icon: 'pause' }, + { key: 'play', content: 'Play', icon: { name: 'play' } }, + { key: 'pause', content: 'Pause', icon: { name: 'pause' } }, { key: 'divider', kind: 'divider' }, 'Without icon', ], @@ -40,7 +40,7 @@ const ToolbarExampleMenuShorthand = () => { }, { key: 'bold', - icon: 'bold', + icon: { name: 'bold' }, }, ]} /> diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx index 03df5c174c..1fc4763e60 100644 --- a/packages/react/src/components/Alert/Alert.tsx +++ b/packages/react/src/components/Alert/Alert.tsx @@ -148,7 +148,7 @@ class Alert extends AutoControlledComponent, AlertState> static defaultProps = { accessibility: alertBehavior, - dismissAction: { icon: 'close' }, + dismissAction: { icon: { name: 'close' } }, body: {}, } diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx index fe77ac17bf..60babc3855 100644 --- a/packages/react/src/components/Carousel/Carousel.tsx +++ b/packages/react/src/components/Carousel/Carousel.tsx @@ -329,7 +329,7 @@ class Carousel extends AutoControlledComponent, Carous defaultProps: () => ({ className: Carousel.slotClassNames.paddlePrevious, iconOnly: true, - icon: 'icon-chevron-start', + icon: { name: 'icon-chevron-start' }, styles: styles.paddlePrevious, ...accessibility.attributes.paddlePrevious, ...applyAccessibilityKeyHandlers( @@ -346,7 +346,7 @@ class Carousel extends AutoControlledComponent, Carous defaultProps: () => ({ className: Carousel.slotClassNames.paddleNext, iconOnly: true, - icon: 'icon-chevron-end', + icon: { name: 'icon-chevron-end' }, styles: styles.paddleNext, ...accessibility.attributes.paddleNext, ...applyAccessibilityKeyHandlers(accessibility.keyHandlers.paddleNext, paddleNext), diff --git a/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx b/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx index 739466027b..fa9089fe46 100644 --- a/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx +++ b/packages/react/src/components/Dropdown/DropdownSelectedItem.tsx @@ -92,7 +92,7 @@ class DropdownSelectedItem extends UIComponent, defaultProps: () => ({ className: SplitButton.slotClassNames.toggleButton, disabled, - icon: 'icon-arrow-down', + icon: { name: 'icon-arrow-down' }, iconOnly: true, primary, secondary, diff --git a/packages/react/test/specs/components/Attachment/Attachment-test.tsx b/packages/react/test/specs/components/Attachment/Attachment-test.tsx index 3f683d3969..433ce02984 100644 --- a/packages/react/test/specs/components/Attachment/Attachment-test.tsx +++ b/packages/react/test/specs/components/Attachment/Attachment-test.tsx @@ -16,7 +16,7 @@ const getAttachment = (onClickAttachment: jest.Mock, onClickButton: jest.Mock):