From fe22c579fce6cd89216692f020ad256ee251228e Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 14 Jan 2019 18:05:13 +0100 Subject: [PATCH 01/16] -added option for hiding the submenu indicators as well as shorthands for the vertical and horizontal menus -TODO rethink the names used --- src/components/Menu/Menu.tsx | 20 ++++++++++- src/components/Menu/MenuItem.tsx | 36 ++++++++++++++++++- .../teams/components/Menu/menuItemStyles.ts | 24 +++++++++---- 3 files changed, 71 insertions(+), 9 deletions(-) diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 414b76b00a..5950deb508 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -17,7 +17,7 @@ import { menuBehavior } from '../../lib/accessibility' import { Accessibility } from '../../lib/accessibility/types' import { ComponentVariablesObject } from '../../themes/types' -import { ReactProps, ShorthandCollection } from '../../../types/utils' +import { ReactProps, ShorthandCollection, ShorthandValue } from '../../../types/utils' import MenuDivider from './MenuDivider' export type MenuShorthandKinds = 'divider' | 'item' @@ -68,6 +68,15 @@ export interface MenuProps extends UIComponentProps, ChildrenComponentProps { /** Indicates whether the menu is submenu. */ submenu?: boolean + + /** Indicates whether the submenuIndicatora should be shown. */ + hideSubmenuIndicator?: boolean + + /** Shorthand for the submenu indicators for the vertical menu items. */ + submenuIndicatorVertical?: ShorthandValue + + /** Shorthand for the submenu indicators for horizontal menu items. */ + submenuIndicatorHorizontal?: ShorthandValue } export interface MenuState { @@ -103,6 +112,9 @@ class Menu extends AutoControlledComponent, MenuState> { underlined: PropTypes.bool, vertical: PropTypes.bool, submenu: PropTypes.bool, + hideSubmenuIndicator: PropTypes.bool, + submenuIndicatorVertical: customPropTypes.itemShorthand, + submenuIndicatorHorizontal: customPropTypes.itemShorthand, } static defaultProps = { @@ -145,6 +157,9 @@ class Menu extends AutoControlledComponent, MenuState> { underlined, vertical, submenu, + hideSubmenuIndicator, + submenuIndicatorHorizontal, + submenuIndicatorVertical, } = this.props const { activeIndex } = this.state @@ -177,6 +192,9 @@ class Menu extends AutoControlledComponent, MenuState> { index, active, inSubmenu: submenu, + hideSubmenuIndicator, + submenuIndicatorHorizontal, + submenuIndicatorVertical, }, overrideProps: this.handleItemOverrides, }) diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 24d505e5fa..4aecaff115 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -105,6 +105,15 @@ export interface MenuItemProps /** Indicates whether the menu item is part of submenu. */ inSubmenu?: boolean + + /** Indicates whether the submenuIndicator should be shown, or defines an icon for it. */ + hideSubmenuIndicator?: boolean + + /** Shorthand for the submenu indicator for vertical menu item. */ + submenuIndicatorVertical?: ShorthandValue + + /** Shorthand for the submenu indicator for horizontal menu item. */ + submenuIndicatorHorizontal?: ShorthandValue } export interface MenuItemState { @@ -144,12 +153,16 @@ class MenuItem extends AutoControlledComponent, MenuIt defaultMenuOpen: PropTypes.bool, onActiveChanged: PropTypes.func, inSubmenu: PropTypes.bool, + hideSubmenuIndicator: PropTypes.bool, + submenuIndicatorVertical: customPropTypes.itemShorthand, + submenuIndicatorHorizontal: customPropTypes.itemShorthand, } static defaultProps = { as: 'a', accessibility: menuItemBehavior as Accessibility, wrapper: { as: 'li' }, + hideSubmenuIndicator: false, } static autoControlledProps = ['menuOpen'] @@ -172,7 +185,21 @@ class MenuItem extends AutoControlledComponent, MenuIt } renderComponent({ ElementType, classes, accessibility, unhandledProps, styles }) { - const { children, content, icon, wrapper, menu, primary, secondary, active } = this.props + const { + children, + content, + icon, + wrapper, + menu, + primary, + secondary, + active, + vertical, + hideSubmenuIndicator, + submenuIndicatorHorizontal, + submenuIndicatorVertical, + } = this.props + const showSubmenuIndicatorIcon = menu && !hideSubmenuIndicator const { menuOpen } = this.state @@ -193,6 +220,10 @@ class MenuItem extends AutoControlledComponent, MenuIt defaultProps: { xSpacing: !!content ? 'after' : 'none' }, })} {content} + {showSubmenuIndicatorIcon && + Icon.create(vertical ? submenuIndicatorVertical : submenuIndicatorHorizontal, { + defaultProps: { styles: styles.submenuIndicator }, + })} ) @@ -207,6 +238,9 @@ class MenuItem extends AutoControlledComponent, MenuIt secondary, styles: styles.menu, submenu: true, + hideSubmenuIndicator, + submenuIndicatorHorizontal, + submenuIndicatorVertical, }, })} diff --git a/src/themes/teams/components/Menu/menuItemStyles.ts b/src/themes/teams/components/Menu/menuItemStyles.ts index f0553f481a..b2aea8b808 100644 --- a/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/src/themes/teams/components/Menu/menuItemStyles.ts @@ -335,13 +335,16 @@ const menuItemStyles: ComponentSlotStylesInput ({ + position: 'relative', + float: 'right', + left: pxToRem(10), + userSelect: 'none', + }), } export default menuItemStyles From 6b3a2e1e4457f9ee67735eff11b2194ee7822515 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 14 Jan 2019 18:40:33 +0100 Subject: [PATCH 02/16] -refactored menu item styles --- .../teams/components/Menu/menuItemStyles.ts | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/themes/teams/components/Menu/menuItemStyles.ts b/src/themes/teams/components/Menu/menuItemStyles.ts index b2aea8b808..a34c1af97e 100644 --- a/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/src/themes/teams/components/Menu/menuItemStyles.ts @@ -252,7 +252,19 @@ const menuItemStyles: ComponentSlotStylesInput { - const { active, iconOnly, isFromKeyboard, pointing, primary, underlined, vertical } = props + const { + active, + iconOnly, + isFromKeyboard, + pointing, + primary, + underlined, + vertical, + menu, + hideSubmenuIndicator, + submenuIndicatorHorizontal, + submenuIndicatorVertical, + } = props const { arrowDown } = theme.siteVariables const sideArrow = getSideArrow(theme) @@ -335,10 +347,10 @@ const menuItemStyles: ComponentSlotStylesInput Date: Tue, 15 Jan 2019 12:37:53 +0100 Subject: [PATCH 03/16] -added rotate prop to the Icon -supporting rtl for the icons -added submenu and active indicators in the Menu and AccordionTitle components --- src/components/Accordion/AccordionTitle.tsx | 36 +++++++++++++------ src/components/Icon/Icon.tsx | 5 +++ src/components/Menu/Menu.tsx | 23 ++++-------- src/components/Menu/MenuItem.tsx | 28 +++++---------- .../Accordion/accordionTitleStyles.ts | 12 ++++--- .../teams/components/Icon/iconStyles.ts | 5 ++- .../teams/components/Menu/menuItemStyles.ts | 8 ++--- 7 files changed, 57 insertions(+), 60 deletions(-) diff --git a/src/components/Accordion/AccordionTitle.tsx b/src/components/Accordion/AccordionTitle.tsx index 7e5d024310..7b42a9a503 100644 --- a/src/components/Accordion/AccordionTitle.tsx +++ b/src/components/Accordion/AccordionTitle.tsx @@ -10,8 +10,10 @@ import { ContentComponentProps, ChildrenComponentProps, commonPropTypes, + customPropTypes, } from '../../lib' -import { ReactProps, ComponentEventHandler } from '../../../types/utils' +import { ReactProps, ComponentEventHandler, ShorthandValue } from '../../../types/utils' +import Icon from '../Icon/Icon' export interface AccordionTitleProps extends UIComponentProps, @@ -30,6 +32,9 @@ export interface AccordionTitleProps * @param {object} data - All props. */ onClick?: ComponentEventHandler + + /** Indicates whether the active indicator should be shown, or defines an icon for it. */ + activeIndicator?: boolean | ShorthandValue } /** @@ -47,6 +52,11 @@ class AccordionTitle extends UIComponent, any> { active: PropTypes.bool, index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), onClick: PropTypes.func, + activeIndicator: PropTypes.oneOfType([PropTypes.bool, customPropTypes.itemShorthand]), + } + + static defaultProps = { + activeIndicator: true, } handleClick = e => { @@ -54,19 +64,23 @@ class AccordionTitle extends UIComponent, any> { } renderComponent({ ElementType, classes, unhandledProps }) { - const { children, content } = this.props - - if (childrenExist(children)) { - return ( - - {children} - - ) - } + const { children, content, activeIndicator, active } = this.props + const showActiveIndicatorIcon = typeof activeIndicator !== 'boolean' + const activeIndicatorIcon = Icon.create(activeIndicator, { + defaultProps: { + rotate: active ? 0 : -90, + }, + }) + const contentElement = ( + <> + {showActiveIndicatorIcon && activeIndicatorIcon} + {content} + + ) return ( - {content} + {childrenExist(children) ? children : contentElement} ) } diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index e554e3ad91..74f42616d4 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -37,6 +37,9 @@ export interface IconProps extends UIComponentProps, ColorComponentProps { /** Name of the icon. */ name?: string + /** An icon can be rotated by the degree specified as number. */ + rotate?: number + /** Size of the icon. */ size?: IconSize @@ -65,6 +68,7 @@ class Icon extends UIComponent, any> { circular: PropTypes.bool, disabled: PropTypes.bool, name: PropTypes.string, + rotate: PropTypes.number, size: PropTypes.oneOf(['smallest', 'smaller', 'small', 'medium', 'large', 'larger', 'largest']), xSpacing: PropTypes.oneOf(['none', 'before', 'after', 'both']), } @@ -73,6 +77,7 @@ class Icon extends UIComponent, any> { as: 'span', size: 'medium', accessibility: iconBehavior, + rotate: 0, } private renderFontIcon(ElementType, classes, unhandledProps, accessibility): React.ReactNode { diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 5950deb508..a823fcd601 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -69,14 +69,8 @@ export interface MenuProps extends UIComponentProps, ChildrenComponentProps { /** Indicates whether the menu is submenu. */ submenu?: boolean - /** Indicates whether the submenuIndicatora should be shown. */ - hideSubmenuIndicator?: boolean - - /** Shorthand for the submenu indicators for the vertical menu items. */ - submenuIndicatorVertical?: ShorthandValue - - /** Shorthand for the submenu indicators for horizontal menu items. */ - submenuIndicatorHorizontal?: ShorthandValue + /** Indicates whether the submenuIndicator should be shown, or defines an icon for it. */ + submenuIndicator?: boolean | ShorthandValue } export interface MenuState { @@ -112,14 +106,13 @@ class Menu extends AutoControlledComponent, MenuState> { underlined: PropTypes.bool, vertical: PropTypes.bool, submenu: PropTypes.bool, - hideSubmenuIndicator: PropTypes.bool, - submenuIndicatorVertical: customPropTypes.itemShorthand, - submenuIndicatorHorizontal: customPropTypes.itemShorthand, + submenuIndicator: PropTypes.oneOfType([PropTypes.bool, customPropTypes.itemShorthand]), } static defaultProps = { as: 'ul', accessibility: menuBehavior as Accessibility, + submenuIndicator: true, } static autoControlledProps = ['activeIndex'] @@ -157,9 +150,7 @@ class Menu extends AutoControlledComponent, MenuState> { underlined, vertical, submenu, - hideSubmenuIndicator, - submenuIndicatorHorizontal, - submenuIndicatorVertical, + submenuIndicator, } = this.props const { activeIndex } = this.state @@ -192,9 +183,7 @@ class Menu extends AutoControlledComponent, MenuState> { index, active, inSubmenu: submenu, - hideSubmenuIndicator, - submenuIndicatorHorizontal, - submenuIndicatorVertical, + submenuIndicator, }, overrideProps: this.handleItemOverrides, }) diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 4aecaff115..8b1533ad29 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -107,13 +107,7 @@ export interface MenuItemProps inSubmenu?: boolean /** Indicates whether the submenuIndicator should be shown, or defines an icon for it. */ - hideSubmenuIndicator?: boolean - - /** Shorthand for the submenu indicator for vertical menu item. */ - submenuIndicatorVertical?: ShorthandValue - - /** Shorthand for the submenu indicator for horizontal menu item. */ - submenuIndicatorHorizontal?: ShorthandValue + submenuIndicator?: boolean | ShorthandValue } export interface MenuItemState { @@ -153,16 +147,14 @@ class MenuItem extends AutoControlledComponent, MenuIt defaultMenuOpen: PropTypes.bool, onActiveChanged: PropTypes.func, inSubmenu: PropTypes.bool, - hideSubmenuIndicator: PropTypes.bool, - submenuIndicatorVertical: customPropTypes.itemShorthand, - submenuIndicatorHorizontal: customPropTypes.itemShorthand, + submenuIndicator: PropTypes.oneOfType([PropTypes.bool, customPropTypes.itemShorthand]), } static defaultProps = { as: 'a', accessibility: menuItemBehavior as Accessibility, wrapper: { as: 'li' }, - hideSubmenuIndicator: false, + submenuIndicator: true, } static autoControlledProps = ['menuOpen'] @@ -195,11 +187,9 @@ class MenuItem extends AutoControlledComponent, MenuIt secondary, active, vertical, - hideSubmenuIndicator, - submenuIndicatorHorizontal, - submenuIndicatorVertical, + submenuIndicator, } = this.props - const showSubmenuIndicatorIcon = menu && !hideSubmenuIndicator + const showSubmenuIndicatorIcon = menu && typeof submenuIndicator !== 'boolean' const { menuOpen } = this.state @@ -221,8 +211,8 @@ class MenuItem extends AutoControlledComponent, MenuIt })} {content} {showSubmenuIndicatorIcon && - Icon.create(vertical ? submenuIndicatorVertical : submenuIndicatorHorizontal, { - defaultProps: { styles: styles.submenuIndicator }, + Icon.create(submenuIndicator, { + defaultProps: { styles: styles.submenuIndicator, rotate: vertical ? -90 : 0 }, })} @@ -238,9 +228,7 @@ class MenuItem extends AutoControlledComponent, MenuIt secondary, styles: styles.menu, submenu: true, - hideSubmenuIndicator, - submenuIndicatorHorizontal, - submenuIndicatorVertical, + submenuIndicator, }, })} diff --git a/src/themes/teams/components/Accordion/accordionTitleStyles.ts b/src/themes/teams/components/Accordion/accordionTitleStyles.ts index ca642e8ee1..d0595e9c12 100644 --- a/src/themes/teams/components/Accordion/accordionTitleStyles.ts +++ b/src/themes/teams/components/Accordion/accordionTitleStyles.ts @@ -3,7 +3,7 @@ import { getSideArrow } from '../../utils' const accordionTitleStyles = { root: ({ props, theme }): ICSSInJSStyle => { - const { active } = props + const { active, activeIndicator } = props const { arrowDown } = theme.siteVariables const sideArrow = getSideArrow(theme) return { @@ -11,10 +11,12 @@ const accordionTitleStyles = { verticalAlign: 'middle', padding: '.5rem 0', cursor: 'pointer', - '::before': { - userSelect: 'none', - content: active ? `"${arrowDown}"` : `"${sideArrow}"`, - }, + ...(activeIndicator === true && { + '::before': { + userSelect: 'none', + content: active ? `"${arrowDown}"` : `"${sideArrow}"`, + }, + }), } }, } diff --git a/src/themes/teams/components/Icon/iconStyles.ts b/src/themes/teams/components/Icon/iconStyles.ts index a717a0ebf4..b5b9dbcfe1 100644 --- a/src/themes/teams/components/Icon/iconStyles.ts +++ b/src/themes/teams/components/Icon/iconStyles.ts @@ -92,11 +92,12 @@ const getIconColor = (colorProp: string, variables: IconVariables) => const iconStyles: ComponentSlotStylesInput = { root: ({ - props: { disabled, name, size, bordered, circular, color, xSpacing }, + props: { disabled, name, size, bordered, circular, color, xSpacing, rotate }, variables: v, theme, }): ICSSInJSStyle => { const iconSpec = theme.icons[name] + const rtl = theme.rtl const isFontBased = !iconSpec || !iconSpec.isSvg return { @@ -120,6 +121,8 @@ const iconStyles: ComponentSlotStylesInput = { ...((bordered || v.borderColor || circular) && getBorderedStyles(circular, v.borderColor || getIconColor(color, v))), + + transform: `${rtl ? 'scaleX(-1)' : ''} rotate(${rtl ? -1 * rotate : rotate}deg)`, } }, diff --git a/src/themes/teams/components/Menu/menuItemStyles.ts b/src/themes/teams/components/Menu/menuItemStyles.ts index a34c1af97e..7d74918dcb 100644 --- a/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/src/themes/teams/components/Menu/menuItemStyles.ts @@ -261,9 +261,7 @@ const menuItemStyles: ComponentSlotStylesInput Date: Tue, 15 Jan 2019 14:20:43 +0100 Subject: [PATCH 04/16] -removed boolean from the types of the indicators --- src/components/Accordion/AccordionTitle.tsx | 4 ++-- src/components/Menu/MenuItem.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Accordion/AccordionTitle.tsx b/src/components/Accordion/AccordionTitle.tsx index 7b42a9a503..c9d32eaaec 100644 --- a/src/components/Accordion/AccordionTitle.tsx +++ b/src/components/Accordion/AccordionTitle.tsx @@ -34,7 +34,7 @@ export interface AccordionTitleProps onClick?: ComponentEventHandler /** Indicates whether the active indicator should be shown, or defines an icon for it. */ - activeIndicator?: boolean | ShorthandValue + activeIndicator?: ShorthandValue } /** @@ -52,7 +52,7 @@ class AccordionTitle extends UIComponent, any> { active: PropTypes.bool, index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), onClick: PropTypes.func, - activeIndicator: PropTypes.oneOfType([PropTypes.bool, customPropTypes.itemShorthand]), + activeIndicator: customPropTypes.itemShorthand, } static defaultProps = { diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 8b1533ad29..e7abcbcb59 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -107,7 +107,7 @@ export interface MenuItemProps inSubmenu?: boolean /** Indicates whether the submenuIndicator should be shown, or defines an icon for it. */ - submenuIndicator?: boolean | ShorthandValue + submenuIndicator?: ShorthandValue } export interface MenuItemState { @@ -147,7 +147,7 @@ class MenuItem extends AutoControlledComponent, MenuIt defaultMenuOpen: PropTypes.bool, onActiveChanged: PropTypes.func, inSubmenu: PropTypes.bool, - submenuIndicator: PropTypes.oneOfType([PropTypes.bool, customPropTypes.itemShorthand]), + submenuIndicator: customPropTypes.itemShorthand, } static defaultProps = { From 8e7c437ee09537135238141eeb2bfd872f02f079 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 15 Jan 2019 16:19:48 +0100 Subject: [PATCH 05/16] -added UnicodeCharacter component --- .../UnicodeCharacter/UnicodeCharacter.tsx | 59 +++++++++++++++++++ .../rtlMapUnicodeCharacters.ts | 8 +++ src/index.ts | 8 +++ src/themes/base/componentStyles.ts | 1 + src/themes/base/componentVariables.ts | 3 + .../unicodeCharacterStyles.ts | 18 ++++++ .../unicodeCharacterVariables.ts | 14 +++++ 7 files changed, 111 insertions(+) create mode 100644 src/components/UnicodeCharacter/UnicodeCharacter.tsx create mode 100644 src/components/UnicodeCharacter/rtlMapUnicodeCharacters.ts create mode 100644 src/themes/base/components/UnicodeCharacter/unicodeCharacterStyles.ts create mode 100644 src/themes/base/components/UnicodeCharacter/unicodeCharacterVariables.ts diff --git a/src/components/UnicodeCharacter/UnicodeCharacter.tsx b/src/components/UnicodeCharacter/UnicodeCharacter.tsx new file mode 100644 index 0000000000..b5c71e4ccf --- /dev/null +++ b/src/components/UnicodeCharacter/UnicodeCharacter.tsx @@ -0,0 +1,59 @@ +import * as React from 'react' +import * as PropTypes from 'prop-types' + +import { + createShorthandFactory, + UIComponent, + UIComponentProps, + commonPropTypes, + ColorComponentProps, +} from '../../lib' +import { ReactProps } from '../../../types/utils' +import rtlMapUnicodeCharacters from './rtlMapUnicodeCharacters' + +export interface UnicodeCharacterProps extends UIComponentProps, ColorComponentProps { + /** Hex representation of the unicode character. */ + hex: string +} + +/** + * A unicode character that is rtl aware when displaying the characters. + */ +class UnicodeCharacter extends UIComponent, any> { + static displayName = 'UnicodeCharacter' + + static create: Function + + static className = 'ui-unicode-character' + + static propTypes = { + ...commonPropTypes.createCommon({ children: false, content: false }), + hex: PropTypes.string.isRequired, + } + + static defaultProps = {} + + renderComponent({ ElementType, classes, unhandledProps, rtl }) { + const { hex } = this.props + const hexUnicode = rtl ? rtlMapUnicodeCharacters[hex] || hex : hex + return ( + + ) + } + + private isHex(h) { + return ( + parseInt(h, 16) + .toString(16) + .toUpperCase() === h.toUpperCase() + ) + } +} + +UnicodeCharacter.create = createShorthandFactory(UnicodeCharacter, 'hex') + +export default UnicodeCharacter diff --git a/src/components/UnicodeCharacter/rtlMapUnicodeCharacters.ts b/src/components/UnicodeCharacter/rtlMapUnicodeCharacters.ts new file mode 100644 index 0000000000..bebf86b921 --- /dev/null +++ b/src/components/UnicodeCharacter/rtlMapUnicodeCharacters.ts @@ -0,0 +1,8 @@ +const rtlMapUnicodeCharacters = { + ['9656']: '9666', // BLACK RIGHT-POINTING SMALL TRIANGLE DEC + ['25B8']: '25C2', // BLACK RIGHT-POINTING SMALL TRIANGLE HEX + ['9666']: '9656', // BLACK LEFT-POINTING SMALL TRIANGLE DEC + ['25C2']: '25B8', // BLACK LEFT-POINTING SMALL TRIANGLE HEX +} + +export default rtlMapUnicodeCharacters diff --git a/src/index.ts b/src/index.ts index 1d2a538e92..c7f5633a32 100644 --- a/src/index.ts +++ b/src/index.ts @@ -122,6 +122,14 @@ export { default as Animation, AnimationProps } from './components/Animation/Ani export { default as Tree } from './components/Tree' +export { + default as UnicodeCharacter, + UnicodeCharacterProps, +} from './components/UnicodeCharacter/UnicodeCharacter' +export { + default as rtlMapUnicodeCharacters, +} from './components/UnicodeCharacter/rtlMapUnicodeCharacters' + // // Accessibility // diff --git a/src/themes/base/componentStyles.ts b/src/themes/base/componentStyles.ts index 1c5c9b219a..9d738b1bb5 100644 --- a/src/themes/base/componentStyles.ts +++ b/src/themes/base/componentStyles.ts @@ -1,2 +1,3 @@ export { default as Loader } from './components/Loader/loaderStyles' export { default as Text } from './components/Text/textStyles' +export { default as UnicodeCharacter } from './components/UnicodeCharacter/unicodeCharacterStyles' diff --git a/src/themes/base/componentVariables.ts b/src/themes/base/componentVariables.ts index f3c7863fd4..e8308f38cf 100644 --- a/src/themes/base/componentVariables.ts +++ b/src/themes/base/componentVariables.ts @@ -1,2 +1,5 @@ export { default as Loader } from './components/Loader/loaderVariables' export { default as Text } from './components/Text/textVariables' +export { + default as UnicodeCharacter, +} from './components/UnicodeCharacter/unicodeCharacterVariables' diff --git a/src/themes/base/components/UnicodeCharacter/unicodeCharacterStyles.ts b/src/themes/base/components/UnicodeCharacter/unicodeCharacterStyles.ts new file mode 100644 index 0000000000..be8087cc43 --- /dev/null +++ b/src/themes/base/components/UnicodeCharacter/unicodeCharacterStyles.ts @@ -0,0 +1,18 @@ +import * as _ from 'lodash' +import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' +import { UnicodeCharacterVariables } from './unicodeCharacterVariables' +import { UnicodeCharacterProps } from '@stardust-ui/react' + +export default { + root: ({ + props: { color }, + variables: v, + }: ComponentStyleFunctionParam< + UnicodeCharacterProps, + UnicodeCharacterVariables + >): ICSSInJSStyle => { + return { + ...(color && { color: _.get(v.colors, color) }), + } + }, +} diff --git a/src/themes/base/components/UnicodeCharacter/unicodeCharacterVariables.ts b/src/themes/base/components/UnicodeCharacter/unicodeCharacterVariables.ts new file mode 100644 index 0000000000..a38e4f1aa8 --- /dev/null +++ b/src/themes/base/components/UnicodeCharacter/unicodeCharacterVariables.ts @@ -0,0 +1,14 @@ +import { ColorValues } from '../../../types' +import { mapColorsToScheme } from '../../../../lib' + +export interface UnicodeCharacterVariables { + colors: ColorValues +} + +export default (siteVariables): UnicodeCharacterVariables => { + const colorVariant = 500 + + return { + colors: mapColorsToScheme(siteVariables, colorVariant), + } +} From 48eca8b5e7e3792c996231b066055bbe9f742d28 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 16 Jan 2019 11:40:43 +0100 Subject: [PATCH 06/16] -replaced style unicode characters with UnicodeCharacter usages --- src/components/Accordion/AccordionTitle.tsx | 25 +++++++++---- src/components/Menu/MenuItem.tsx | 14 ++++++++ .../UnicodeCharacter/UnicodeCharacter.tsx | 14 +++++--- .../rtlMapUnicodeCharacters.ts | 7 ++-- .../UnicodeCharacter/unicodeCharacters.ts | 7 ++++ src/index.ts | 1 + .../Accordion/accordionTitleStyles.ts | 29 +++++---------- .../teams/components/Menu/menuItemStyles.ts | 35 ++++++------------- .../UnicodeCharacter/UnicodeCharacter-test.ts | 7 ++++ 9 files changed, 79 insertions(+), 60 deletions(-) create mode 100644 src/components/UnicodeCharacter/unicodeCharacters.ts create mode 100644 test/specs/components/UnicodeCharacter/UnicodeCharacter-test.ts diff --git a/src/components/Accordion/AccordionTitle.tsx b/src/components/Accordion/AccordionTitle.tsx index c9d32eaaec..7a78bbf492 100644 --- a/src/components/Accordion/AccordionTitle.tsx +++ b/src/components/Accordion/AccordionTitle.tsx @@ -14,6 +14,8 @@ import { } from '../../lib' import { ReactProps, ComponentEventHandler, ShorthandValue } from '../../../types/utils' import Icon from '../Icon/Icon' +import UnicodeCharacter from '../UnicodeCharacter/UnicodeCharacter' +import uc from '../UnicodeCharacter/unicodeCharacters' export interface AccordionTitleProps extends UIComponentProps, @@ -63,17 +65,26 @@ class AccordionTitle extends UIComponent, any> { _.invoke(this.props, 'onClick', e, this.props) } - renderComponent({ ElementType, classes, unhandledProps }) { + renderComponent({ ElementType, classes, unhandledProps, styles }) { const { children, content, activeIndicator, active } = this.props const showActiveIndicatorIcon = typeof activeIndicator !== 'boolean' - const activeIndicatorIcon = Icon.create(activeIndicator, { - defaultProps: { - rotate: active ? 0 : -90, - }, - }) + const showActiveIndicatorUnicode = activeIndicator === true + const contentElement = ( <> - {showActiveIndicatorIcon && activeIndicatorIcon} + {showActiveIndicatorIcon && + Icon.create(activeIndicator, { + defaultProps: { + rotate: active ? 0 : -90, + }, + })} + {showActiveIndicatorUnicode && + UnicodeCharacter.create( + active ? uc.blackDownPointingSmallTriangle : uc.blackRightPointingSmallTriangle, + { + defaultProps: { styles: styles.activeIndicator }, + }, + )} {content} ) diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index e7abcbcb59..b014a0387a 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -24,6 +24,8 @@ import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibil import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../../types/utils' import { focusAsync } from '../../lib/accessibility/FocusZone' import Ref from '../Ref/Ref' +import UnicodeCharacter from '../UnicodeCharacter/UnicodeCharacter' +import uc from '../UnicodeCharacter/unicodeCharacters' export interface MenuItemProps extends UIComponentProps, @@ -190,6 +192,7 @@ class MenuItem extends AutoControlledComponent, MenuIt submenuIndicator, } = this.props const showSubmenuIndicatorIcon = menu && typeof submenuIndicator !== 'boolean' + const showSubmenuIndicatorUnicode = menu && submenuIndicator === true const { menuOpen } = this.state @@ -210,6 +213,17 @@ class MenuItem extends AutoControlledComponent, MenuIt defaultProps: { xSpacing: !!content ? 'after' : 'none' }, })} {content} + {showSubmenuIndicatorUnicode && + UnicodeCharacter.create( + { + hex: vertical + ? uc.blackRightPointingSmallTriangle + : uc.blackDownPointingSmallTriangle, + }, + { + defaultProps: { styles: styles.submenuIndicator }, + }, + )} {showSubmenuIndicatorIcon && Icon.create(submenuIndicator, { defaultProps: { styles: styles.submenuIndicator, rotate: vertical ? -90 : 0 }, diff --git a/src/components/UnicodeCharacter/UnicodeCharacter.tsx b/src/components/UnicodeCharacter/UnicodeCharacter.tsx index b5c71e4ccf..3c5cbd2a3b 100644 --- a/src/components/UnicodeCharacter/UnicodeCharacter.tsx +++ b/src/components/UnicodeCharacter/UnicodeCharacter.tsx @@ -13,7 +13,7 @@ import rtlMapUnicodeCharacters from './rtlMapUnicodeCharacters' export interface UnicodeCharacterProps extends UIComponentProps, ColorComponentProps { /** Hex representation of the unicode character. */ - hex: string + hex?: string } /** @@ -24,14 +24,16 @@ class UnicodeCharacter extends UIComponent, an static create: Function - static className = 'ui-unicode-character' + static className = 'ui-unicodecharacter' static propTypes = { ...commonPropTypes.createCommon({ children: false, content: false }), - hex: PropTypes.string.isRequired, + hex: PropTypes.string, } - static defaultProps = {} + static defaultProps = { + as: 'span', + } renderComponent({ ElementType, classes, unhandledProps, rtl }) { const { hex } = this.props @@ -40,7 +42,9 @@ class UnicodeCharacter extends UIComponent, an ) } diff --git a/src/components/UnicodeCharacter/rtlMapUnicodeCharacters.ts b/src/components/UnicodeCharacter/rtlMapUnicodeCharacters.ts index bebf86b921..121d810af4 100644 --- a/src/components/UnicodeCharacter/rtlMapUnicodeCharacters.ts +++ b/src/components/UnicodeCharacter/rtlMapUnicodeCharacters.ts @@ -1,8 +1,7 @@ +import uc from './unicodeCharacters' const rtlMapUnicodeCharacters = { - ['9656']: '9666', // BLACK RIGHT-POINTING SMALL TRIANGLE DEC - ['25B8']: '25C2', // BLACK RIGHT-POINTING SMALL TRIANGLE HEX - ['9666']: '9656', // BLACK LEFT-POINTING SMALL TRIANGLE DEC - ['25C2']: '25B8', // BLACK LEFT-POINTING SMALL TRIANGLE HEX + [uc.blackRightPointingSmallTriangle]: uc.blackLeftPointingSmallTriangle, + [uc.blackLeftPointingSmallTriangle]: uc.blackRightPointingSmallTriangle, } export default rtlMapUnicodeCharacters diff --git a/src/components/UnicodeCharacter/unicodeCharacters.ts b/src/components/UnicodeCharacter/unicodeCharacters.ts new file mode 100644 index 0000000000..c9a933ba47 --- /dev/null +++ b/src/components/UnicodeCharacter/unicodeCharacters.ts @@ -0,0 +1,7 @@ +const unicodeCharacters = { + blackRightPointingSmallTriangle: '25B8', + blackLeftPointingSmallTriangle: '25C2', + blackDownPointingSmallTriangle: '25BE', +} + +export default unicodeCharacters diff --git a/src/index.ts b/src/index.ts index c7f5633a32..754cc51c8d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -129,6 +129,7 @@ export { export { default as rtlMapUnicodeCharacters, } from './components/UnicodeCharacter/rtlMapUnicodeCharacters' +export { default as unicodeCharacters } from './components/UnicodeCharacter/unicodeCharacters' // // Accessibility diff --git a/src/themes/teams/components/Accordion/accordionTitleStyles.ts b/src/themes/teams/components/Accordion/accordionTitleStyles.ts index d0595e9c12..137160f342 100644 --- a/src/themes/teams/components/Accordion/accordionTitleStyles.ts +++ b/src/themes/teams/components/Accordion/accordionTitleStyles.ts @@ -1,24 +1,13 @@ -import { ICSSInJSStyle } from '../../../types' -import { getSideArrow } from '../../utils' - const accordionTitleStyles = { - root: ({ props, theme }): ICSSInJSStyle => { - const { active, activeIndicator } = props - const { arrowDown } = theme.siteVariables - const sideArrow = getSideArrow(theme) - return { - display: 'inline-block', - verticalAlign: 'middle', - padding: '.5rem 0', - cursor: 'pointer', - ...(activeIndicator === true && { - '::before': { - userSelect: 'none', - content: active ? `"${arrowDown}"` : `"${sideArrow}"`, - }, - }), - } - }, + root: () => ({ + display: 'inline-block', + verticalAlign: 'middle', + padding: '.5rem 0', + cursor: 'pointer', + }), + activeIndicator: () => ({ + userSelect: 'none', + }), } export default accordionTitleStyles diff --git a/src/themes/teams/components/Menu/menuItemStyles.ts b/src/themes/teams/components/Menu/menuItemStyles.ts index 7d74918dcb..64b04760ec 100644 --- a/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/src/themes/teams/components/Menu/menuItemStyles.ts @@ -1,4 +1,3 @@ -import { getSideArrow } from '../../utils' import { pxToRem } from '../../../../lib' import { ComponentSlotStyleFunction, ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { MenuVariables } from './menuVariables' @@ -252,19 +251,7 @@ const menuItemStyles: ComponentSlotStylesInput { - const { - active, - iconOnly, - isFromKeyboard, - pointing, - primary, - underlined, - vertical, - menu, - submenuIndicator, - } = props - const { arrowDown } = theme.siteVariables - const sideArrow = getSideArrow(theme) + const { active, iconOnly, isFromKeyboard, pointing, primary, underlined, vertical } = props return { color: 'inherit', @@ -344,16 +331,16 @@ const menuItemStyles: ComponentSlotStylesInput { + isConformant(UnicodeCharacter) +}) From 00738b4f00c9ce802f45f72459e081a6a554fec4 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 16 Jan 2019 12:33:17 +0100 Subject: [PATCH 07/16] -fixed tests --- src/components/Menu/Menu.tsx | 5 ++--- src/components/Menu/MenuItem.tsx | 6 +++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index a823fcd601..d023bf91c6 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -70,7 +70,7 @@ export interface MenuProps extends UIComponentProps, ChildrenComponentProps { submenu?: boolean /** Indicates whether the submenuIndicator should be shown, or defines an icon for it. */ - submenuIndicator?: boolean | ShorthandValue + submenuIndicator?: ShorthandValue } export interface MenuState { @@ -106,13 +106,12 @@ class Menu extends AutoControlledComponent, MenuState> { underlined: PropTypes.bool, vertical: PropTypes.bool, submenu: PropTypes.bool, - submenuIndicator: PropTypes.oneOfType([PropTypes.bool, customPropTypes.itemShorthand]), + submenuIndicator: customPropTypes.itemShorthand, } static defaultProps = { as: 'ul', accessibility: menuBehavior as Accessibility, - submenuIndicator: true, } static autoControlledProps = ['activeIndex'] diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index b014a0387a..4649687c5b 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -156,7 +156,6 @@ class MenuItem extends AutoControlledComponent, MenuIt as: 'a', accessibility: menuItemBehavior as Accessibility, wrapper: { as: 'li' }, - submenuIndicator: true, } static autoControlledProps = ['menuOpen'] @@ -191,8 +190,9 @@ class MenuItem extends AutoControlledComponent, MenuIt vertical, submenuIndicator, } = this.props - const showSubmenuIndicatorIcon = menu && typeof submenuIndicator !== 'boolean' - const showSubmenuIndicatorUnicode = menu && submenuIndicator === true + const submenuIndicatorWithDefault = submenuIndicator === undefined ? true : submenuIndicator + const showSubmenuIndicatorIcon = menu && typeof submenuIndicatorWithDefault !== 'boolean' + const showSubmenuIndicatorUnicode = menu && submenuIndicatorWithDefault === true const { menuOpen } = this.state From 55ec1bd563d1036d2b0a5254e768111d92e35e9a Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 16 Jan 2019 18:20:28 +0100 Subject: [PATCH 08/16] -replaced UnicodeCharacter with Indicator --- src/components/Accordion/AccordionTitle.tsx | 33 +++---- src/components/Indicator/Indicator.tsx | 87 +++++++++++++++++++ src/components/Menu/MenuItem.tsx | 27 ++---- .../UnicodeCharacter/UnicodeCharacter.tsx | 63 -------------- .../rtlMapUnicodeCharacters.ts | 7 -- .../UnicodeCharacter/unicodeCharacters.ts | 7 -- src/index.ts | 9 +- src/themes/base/componentStyles.ts | 2 +- src/themes/base/componentVariables.ts | 4 +- .../indicatorStyles.ts} | 9 +- .../indicatorVariables.ts} | 4 +- .../components/Indicator/Indicator-test.ts | 7 ++ .../UnicodeCharacter/UnicodeCharacter-test.ts | 7 -- 13 files changed, 120 insertions(+), 146 deletions(-) create mode 100644 src/components/Indicator/Indicator.tsx delete mode 100644 src/components/UnicodeCharacter/UnicodeCharacter.tsx delete mode 100644 src/components/UnicodeCharacter/rtlMapUnicodeCharacters.ts delete mode 100644 src/components/UnicodeCharacter/unicodeCharacters.ts rename src/themes/base/components/{UnicodeCharacter/unicodeCharacterStyles.ts => Indicator/indicatorStyles.ts} (50%) rename src/themes/base/components/{UnicodeCharacter/unicodeCharacterVariables.ts => Indicator/indicatorVariables.ts} (68%) create mode 100644 test/specs/components/Indicator/Indicator-test.ts delete mode 100644 test/specs/components/UnicodeCharacter/UnicodeCharacter-test.ts diff --git a/src/components/Accordion/AccordionTitle.tsx b/src/components/Accordion/AccordionTitle.tsx index 7a78bbf492..4ade358924 100644 --- a/src/components/Accordion/AccordionTitle.tsx +++ b/src/components/Accordion/AccordionTitle.tsx @@ -13,10 +13,7 @@ import { customPropTypes, } from '../../lib' import { ReactProps, ComponentEventHandler, ShorthandValue } from '../../../types/utils' -import Icon from '../Icon/Icon' -import UnicodeCharacter from '../UnicodeCharacter/UnicodeCharacter' -import uc from '../UnicodeCharacter/unicodeCharacters' - +import Indicator from '../Indicator/Indicator' export interface AccordionTitleProps extends UIComponentProps, ContentComponentProps, @@ -35,7 +32,7 @@ export interface AccordionTitleProps */ onClick?: ComponentEventHandler - /** Indicates whether the active indicator should be shown, or defines an icon for it. */ + /** Shorthand for the active indicator. */ activeIndicator?: ShorthandValue } @@ -57,9 +54,7 @@ class AccordionTitle extends UIComponent, any> { activeIndicator: customPropTypes.itemShorthand, } - static defaultProps = { - activeIndicator: true, - } + static defaultProps = {} handleClick = e => { _.invoke(this.props, 'onClick', e, this.props) @@ -67,24 +62,16 @@ class AccordionTitle extends UIComponent, any> { renderComponent({ ElementType, classes, unhandledProps, styles }) { const { children, content, activeIndicator, active } = this.props - const showActiveIndicatorIcon = typeof activeIndicator !== 'boolean' - const showActiveIndicatorUnicode = activeIndicator === true + const submenuIndicatorWithDefault = activeIndicator === undefined ? {} : activeIndicator const contentElement = ( <> - {showActiveIndicatorIcon && - Icon.create(activeIndicator, { - defaultProps: { - rotate: active ? 0 : -90, - }, - })} - {showActiveIndicatorUnicode && - UnicodeCharacter.create( - active ? uc.blackDownPointingSmallTriangle : uc.blackRightPointingSmallTriangle, - { - defaultProps: { styles: styles.activeIndicator }, - }, - )} + {Indicator.create(submenuIndicatorWithDefault, { + defaultProps: { + direction: active ? 'bottom' : 'forward', + styles: styles.activeIndicator, + }, + })} {content} ) diff --git a/src/components/Indicator/Indicator.tsx b/src/components/Indicator/Indicator.tsx new file mode 100644 index 0000000000..43fd8a856d --- /dev/null +++ b/src/components/Indicator/Indicator.tsx @@ -0,0 +1,87 @@ +import * as React from 'react' +import * as PropTypes from 'prop-types' + +import { + createShorthandFactory, + UIComponent, + UIComponentProps, + commonPropTypes, + ColorComponentProps, + customPropTypes, +} from '../../lib' +import { ReactProps, ShorthandValue } from '../../../types/utils' +import Icon from '../Icon/Icon' + +export interface IndicatorProps extends UIComponentProps, ColorComponentProps { + /** The indicator can be direction in different directions. */ + direction?: 'forward' | 'back' | 'top' | 'bottom' + + /** The indicator can show specific icon if provided. */ + icon?: ShorthandValue +} + +/** + * An indicator is suggest additional content next to the element it is inside. + */ +class Indicator extends UIComponent, any> { + static displayName = 'Indicator' + + static create: Function + + static className = 'ui-indicator' + + static directionMap = { + forward: { unicode: '25B8', rotation: -90 }, + back: { unicode: '25C2', rotation: 90 }, + top: { unicode: '25B4', rotation: 180 }, + bottom: { unicode: '25BE', rotation: 0 }, + } + + static propTypes = { + ...commonPropTypes.createCommon({ children: false, content: false }), + direction: PropTypes.oneOf(['forward', 'back', 'top', 'bottom']), + icon: customPropTypes.itemShorthand, + } + + static defaultProps = { + as: 'span', + direction: 'bottom', + } + + renderComponent({ ElementType, classes, unhandledProps, rtl }) { + const { direction, icon, color } = this.props + const hexUnicode = + direction && Indicator.directionMap[this.getDirectionBasedOnRtl(rtl, direction)].unicode + const contentProps = !icon + ? { + dangerouslySetInnerHTML: { + __html: hexUnicode && this.isHex(hexUnicode) ? `&#x${hexUnicode};` : '', + }, + } + : { + children: Icon.create(icon, { + defaultProps: { color, rotate: Indicator.directionMap[direction].rotation }, + }), + } + return + } + + private isHex(h) { + return ( + parseInt(h, 16) + .toString(16) + .toUpperCase() === h.toUpperCase() + ) + } + + private getDirectionBasedOnRtl = (rtl: boolean, direction) => { + if (!rtl) return direction + if (direction === 'forward') return 'back' + if (direction === 'back') return 'forward' + return direction + } +} + +Indicator.create = createShorthandFactory(Indicator, 'hex') + +export default Indicator diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 4649687c5b..a8e8b0c657 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -24,8 +24,7 @@ import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibil import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../../types/utils' import { focusAsync } from '../../lib/accessibility/FocusZone' import Ref from '../Ref/Ref' -import UnicodeCharacter from '../UnicodeCharacter/UnicodeCharacter' -import uc from '../UnicodeCharacter/unicodeCharacters' +import Indicator from '../Indicator/Indicator' export interface MenuItemProps extends UIComponentProps, @@ -108,7 +107,7 @@ export interface MenuItemProps /** Indicates whether the menu item is part of submenu. */ inSubmenu?: boolean - /** Indicates whether the submenuIndicator should be shown, or defines an icon for it. */ + /** Shorthand for the submenu indicator. */ submenuIndicator?: ShorthandValue } @@ -190,9 +189,7 @@ class MenuItem extends AutoControlledComponent, MenuIt vertical, submenuIndicator, } = this.props - const submenuIndicatorWithDefault = submenuIndicator === undefined ? true : submenuIndicator - const showSubmenuIndicatorIcon = menu && typeof submenuIndicatorWithDefault !== 'boolean' - const showSubmenuIndicatorUnicode = menu && submenuIndicatorWithDefault === true + const submenuIndicatorWithDefault = submenuIndicator === undefined ? {} : submenuIndicator const { menuOpen } = this.state @@ -213,20 +210,12 @@ class MenuItem extends AutoControlledComponent, MenuIt defaultProps: { xSpacing: !!content ? 'after' : 'none' }, })} {content} - {showSubmenuIndicatorUnicode && - UnicodeCharacter.create( - { - hex: vertical - ? uc.blackRightPointingSmallTriangle - : uc.blackDownPointingSmallTriangle, + {menu && + Indicator.create(submenuIndicatorWithDefault, { + defaultProps: { + direction: vertical ? 'forward' : 'bottom', + styles: styles.submenuIndicator, }, - { - defaultProps: { styles: styles.submenuIndicator }, - }, - )} - {showSubmenuIndicatorIcon && - Icon.create(submenuIndicator, { - defaultProps: { styles: styles.submenuIndicator, rotate: vertical ? -90 : 0 }, })} diff --git a/src/components/UnicodeCharacter/UnicodeCharacter.tsx b/src/components/UnicodeCharacter/UnicodeCharacter.tsx deleted file mode 100644 index 3c5cbd2a3b..0000000000 --- a/src/components/UnicodeCharacter/UnicodeCharacter.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import * as React from 'react' -import * as PropTypes from 'prop-types' - -import { - createShorthandFactory, - UIComponent, - UIComponentProps, - commonPropTypes, - ColorComponentProps, -} from '../../lib' -import { ReactProps } from '../../../types/utils' -import rtlMapUnicodeCharacters from './rtlMapUnicodeCharacters' - -export interface UnicodeCharacterProps extends UIComponentProps, ColorComponentProps { - /** Hex representation of the unicode character. */ - hex?: string -} - -/** - * A unicode character that is rtl aware when displaying the characters. - */ -class UnicodeCharacter extends UIComponent, any> { - static displayName = 'UnicodeCharacter' - - static create: Function - - static className = 'ui-unicodecharacter' - - static propTypes = { - ...commonPropTypes.createCommon({ children: false, content: false }), - hex: PropTypes.string, - } - - static defaultProps = { - as: 'span', - } - - renderComponent({ ElementType, classes, unhandledProps, rtl }) { - const { hex } = this.props - const hexUnicode = rtl ? rtlMapUnicodeCharacters[hex] || hex : hex - return ( - - ) - } - - private isHex(h) { - return ( - parseInt(h, 16) - .toString(16) - .toUpperCase() === h.toUpperCase() - ) - } -} - -UnicodeCharacter.create = createShorthandFactory(UnicodeCharacter, 'hex') - -export default UnicodeCharacter diff --git a/src/components/UnicodeCharacter/rtlMapUnicodeCharacters.ts b/src/components/UnicodeCharacter/rtlMapUnicodeCharacters.ts deleted file mode 100644 index 121d810af4..0000000000 --- a/src/components/UnicodeCharacter/rtlMapUnicodeCharacters.ts +++ /dev/null @@ -1,7 +0,0 @@ -import uc from './unicodeCharacters' -const rtlMapUnicodeCharacters = { - [uc.blackRightPointingSmallTriangle]: uc.blackLeftPointingSmallTriangle, - [uc.blackLeftPointingSmallTriangle]: uc.blackRightPointingSmallTriangle, -} - -export default rtlMapUnicodeCharacters diff --git a/src/components/UnicodeCharacter/unicodeCharacters.ts b/src/components/UnicodeCharacter/unicodeCharacters.ts deleted file mode 100644 index c9a933ba47..0000000000 --- a/src/components/UnicodeCharacter/unicodeCharacters.ts +++ /dev/null @@ -1,7 +0,0 @@ -const unicodeCharacters = { - blackRightPointingSmallTriangle: '25B8', - blackLeftPointingSmallTriangle: '25C2', - blackDownPointingSmallTriangle: '25BE', -} - -export default unicodeCharacters diff --git a/src/index.ts b/src/index.ts index 754cc51c8d..470bec2c70 100644 --- a/src/index.ts +++ b/src/index.ts @@ -122,14 +122,7 @@ export { default as Animation, AnimationProps } from './components/Animation/Ani export { default as Tree } from './components/Tree' -export { - default as UnicodeCharacter, - UnicodeCharacterProps, -} from './components/UnicodeCharacter/UnicodeCharacter' -export { - default as rtlMapUnicodeCharacters, -} from './components/UnicodeCharacter/rtlMapUnicodeCharacters' -export { default as unicodeCharacters } from './components/UnicodeCharacter/unicodeCharacters' +export { default as Indicator, IndicatorProps } from './components/Indicator/Indicator' // // Accessibility diff --git a/src/themes/base/componentStyles.ts b/src/themes/base/componentStyles.ts index 9d738b1bb5..2d183e1951 100644 --- a/src/themes/base/componentStyles.ts +++ b/src/themes/base/componentStyles.ts @@ -1,3 +1,3 @@ export { default as Loader } from './components/Loader/loaderStyles' export { default as Text } from './components/Text/textStyles' -export { default as UnicodeCharacter } from './components/UnicodeCharacter/unicodeCharacterStyles' +export { default as Indicator } from './components/Indicator/indicatorStyles' diff --git a/src/themes/base/componentVariables.ts b/src/themes/base/componentVariables.ts index e8308f38cf..41d07d6e86 100644 --- a/src/themes/base/componentVariables.ts +++ b/src/themes/base/componentVariables.ts @@ -1,5 +1,3 @@ export { default as Loader } from './components/Loader/loaderVariables' export { default as Text } from './components/Text/textVariables' -export { - default as UnicodeCharacter, -} from './components/UnicodeCharacter/unicodeCharacterVariables' +export { default as UnicodeCharacter } from './components/Indicator/indicatorVariables' diff --git a/src/themes/base/components/UnicodeCharacter/unicodeCharacterStyles.ts b/src/themes/base/components/Indicator/indicatorStyles.ts similarity index 50% rename from src/themes/base/components/UnicodeCharacter/unicodeCharacterStyles.ts rename to src/themes/base/components/Indicator/indicatorStyles.ts index be8087cc43..a34bac0390 100644 --- a/src/themes/base/components/UnicodeCharacter/unicodeCharacterStyles.ts +++ b/src/themes/base/components/Indicator/indicatorStyles.ts @@ -1,16 +1,13 @@ import * as _ from 'lodash' import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' -import { UnicodeCharacterVariables } from './unicodeCharacterVariables' -import { UnicodeCharacterProps } from '@stardust-ui/react' +import { IndicatorVariables } from './indicatorVariables' +import { IndicatorProps } from '@stardust-ui/react' export default { root: ({ props: { color }, variables: v, - }: ComponentStyleFunctionParam< - UnicodeCharacterProps, - UnicodeCharacterVariables - >): ICSSInJSStyle => { + }: ComponentStyleFunctionParam): ICSSInJSStyle => { return { ...(color && { color: _.get(v.colors, color) }), } diff --git a/src/themes/base/components/UnicodeCharacter/unicodeCharacterVariables.ts b/src/themes/base/components/Indicator/indicatorVariables.ts similarity index 68% rename from src/themes/base/components/UnicodeCharacter/unicodeCharacterVariables.ts rename to src/themes/base/components/Indicator/indicatorVariables.ts index a38e4f1aa8..050c5c5bcf 100644 --- a/src/themes/base/components/UnicodeCharacter/unicodeCharacterVariables.ts +++ b/src/themes/base/components/Indicator/indicatorVariables.ts @@ -1,11 +1,11 @@ import { ColorValues } from '../../../types' import { mapColorsToScheme } from '../../../../lib' -export interface UnicodeCharacterVariables { +export interface IndicatorVariables { colors: ColorValues } -export default (siteVariables): UnicodeCharacterVariables => { +export default (siteVariables): IndicatorVariables => { const colorVariant = 500 return { diff --git a/test/specs/components/Indicator/Indicator-test.ts b/test/specs/components/Indicator/Indicator-test.ts new file mode 100644 index 0000000000..dd21346825 --- /dev/null +++ b/test/specs/components/Indicator/Indicator-test.ts @@ -0,0 +1,7 @@ +import { isConformant } from 'test/specs/commonTests' + +import Indicator from 'src/components/Indicator/Indicator' + +describe('Indicator', () => { + isConformant(Indicator) +}) diff --git a/test/specs/components/UnicodeCharacter/UnicodeCharacter-test.ts b/test/specs/components/UnicodeCharacter/UnicodeCharacter-test.ts deleted file mode 100644 index 8294c8d76d..0000000000 --- a/test/specs/components/UnicodeCharacter/UnicodeCharacter-test.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { isConformant } from 'test/specs/commonTests' - -import UnicodeCharacter from 'src/components/UnicodeCharacter/UnicodeCharacter' - -describe('UnicodeCharacter', () => { - isConformant(UnicodeCharacter) -}) From a20f12b8b63308ca82d63c3bfd451715551c2e5b Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 17 Jan 2019 12:10:45 +0100 Subject: [PATCH 09/16] -renamed indicator* props to indicator -refactored icon styles to be more readable --- src/components/Accordion/AccordionTitle.tsx | 12 ++++++------ src/components/Menu/Menu.tsx | 10 +++++----- src/components/Menu/MenuItem.tsx | 14 +++++++------- src/themes/base/componentStyles.ts | 1 - src/themes/base/componentVariables.ts | 1 - .../base/components/Indicator/indicatorStyles.ts | 15 --------------- .../components/Indicator/indicatorVariables.ts | 14 -------------- .../components/Accordion/accordionTitleStyles.ts | 2 +- src/themes/teams/components/Icon/iconStyles.ts | 8 +++++++- .../teams/components/Menu/menuItemStyles.ts | 13 +------------ 10 files changed, 27 insertions(+), 63 deletions(-) delete mode 100644 src/themes/base/components/Indicator/indicatorStyles.ts delete mode 100644 src/themes/base/components/Indicator/indicatorVariables.ts diff --git a/src/components/Accordion/AccordionTitle.tsx b/src/components/Accordion/AccordionTitle.tsx index 4ade358924..e6771d6878 100644 --- a/src/components/Accordion/AccordionTitle.tsx +++ b/src/components/Accordion/AccordionTitle.tsx @@ -33,7 +33,7 @@ export interface AccordionTitleProps onClick?: ComponentEventHandler /** Shorthand for the active indicator. */ - activeIndicator?: ShorthandValue + indicator?: ShorthandValue } /** @@ -51,7 +51,7 @@ class AccordionTitle extends UIComponent, any> { active: PropTypes.bool, index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), onClick: PropTypes.func, - activeIndicator: customPropTypes.itemShorthand, + indicator: customPropTypes.itemShorthand, } static defaultProps = {} @@ -61,15 +61,15 @@ class AccordionTitle extends UIComponent, any> { } renderComponent({ ElementType, classes, unhandledProps, styles }) { - const { children, content, activeIndicator, active } = this.props - const submenuIndicatorWithDefault = activeIndicator === undefined ? {} : activeIndicator + const { children, content, indicator, active } = this.props + const indicatorWithDefaults = indicator === undefined ? {} : indicator const contentElement = ( <> - {Indicator.create(submenuIndicatorWithDefault, { + {Indicator.create(indicatorWithDefaults, { defaultProps: { direction: active ? 'bottom' : 'forward', - styles: styles.activeIndicator, + styles: styles.indicator, }, })} {content} diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index d023bf91c6..6dc9ffc374 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -69,8 +69,8 @@ export interface MenuProps extends UIComponentProps, ChildrenComponentProps { /** Indicates whether the menu is submenu. */ submenu?: boolean - /** Indicates whether the submenuIndicator should be shown, or defines an icon for it. */ - submenuIndicator?: ShorthandValue + /** Shorthand for the submenu indicator. */ + indicator?: ShorthandValue } export interface MenuState { @@ -106,7 +106,7 @@ class Menu extends AutoControlledComponent, MenuState> { underlined: PropTypes.bool, vertical: PropTypes.bool, submenu: PropTypes.bool, - submenuIndicator: customPropTypes.itemShorthand, + indicator: customPropTypes.itemShorthand, } static defaultProps = { @@ -149,7 +149,7 @@ class Menu extends AutoControlledComponent, MenuState> { underlined, vertical, submenu, - submenuIndicator, + indicator, } = this.props const { activeIndex } = this.state @@ -182,7 +182,7 @@ class Menu extends AutoControlledComponent, MenuState> { index, active, inSubmenu: submenu, - submenuIndicator, + indicator, }, overrideProps: this.handleItemOverrides, }) diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index a8e8b0c657..ec942462ee 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -108,7 +108,7 @@ export interface MenuItemProps inSubmenu?: boolean /** Shorthand for the submenu indicator. */ - submenuIndicator?: ShorthandValue + indicator?: ShorthandValue } export interface MenuItemState { @@ -148,7 +148,7 @@ class MenuItem extends AutoControlledComponent, MenuIt defaultMenuOpen: PropTypes.bool, onActiveChanged: PropTypes.func, inSubmenu: PropTypes.bool, - submenuIndicator: customPropTypes.itemShorthand, + indicator: customPropTypes.itemShorthand, } static defaultProps = { @@ -187,9 +187,9 @@ class MenuItem extends AutoControlledComponent, MenuIt secondary, active, vertical, - submenuIndicator, + indicator, } = this.props - const submenuIndicatorWithDefault = submenuIndicator === undefined ? {} : submenuIndicator + const indicatorWithDefaults = indicator === undefined ? {} : indicator const { menuOpen } = this.state @@ -211,10 +211,10 @@ class MenuItem extends AutoControlledComponent, MenuIt })} {content} {menu && - Indicator.create(submenuIndicatorWithDefault, { + Indicator.create(indicatorWithDefaults, { defaultProps: { direction: vertical ? 'forward' : 'bottom', - styles: styles.submenuIndicator, + styles: styles.indicator, }, })} @@ -231,7 +231,7 @@ class MenuItem extends AutoControlledComponent, MenuIt secondary, styles: styles.menu, submenu: true, - submenuIndicator, + indicator, }, })} diff --git a/src/themes/base/componentStyles.ts b/src/themes/base/componentStyles.ts index 2d183e1951..1c5c9b219a 100644 --- a/src/themes/base/componentStyles.ts +++ b/src/themes/base/componentStyles.ts @@ -1,3 +1,2 @@ export { default as Loader } from './components/Loader/loaderStyles' export { default as Text } from './components/Text/textStyles' -export { default as Indicator } from './components/Indicator/indicatorStyles' diff --git a/src/themes/base/componentVariables.ts b/src/themes/base/componentVariables.ts index 41d07d6e86..f3c7863fd4 100644 --- a/src/themes/base/componentVariables.ts +++ b/src/themes/base/componentVariables.ts @@ -1,3 +1,2 @@ export { default as Loader } from './components/Loader/loaderVariables' export { default as Text } from './components/Text/textVariables' -export { default as UnicodeCharacter } from './components/Indicator/indicatorVariables' diff --git a/src/themes/base/components/Indicator/indicatorStyles.ts b/src/themes/base/components/Indicator/indicatorStyles.ts deleted file mode 100644 index a34bac0390..0000000000 --- a/src/themes/base/components/Indicator/indicatorStyles.ts +++ /dev/null @@ -1,15 +0,0 @@ -import * as _ from 'lodash' -import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' -import { IndicatorVariables } from './indicatorVariables' -import { IndicatorProps } from '@stardust-ui/react' - -export default { - root: ({ - props: { color }, - variables: v, - }: ComponentStyleFunctionParam): ICSSInJSStyle => { - return { - ...(color && { color: _.get(v.colors, color) }), - } - }, -} diff --git a/src/themes/base/components/Indicator/indicatorVariables.ts b/src/themes/base/components/Indicator/indicatorVariables.ts deleted file mode 100644 index 050c5c5bcf..0000000000 --- a/src/themes/base/components/Indicator/indicatorVariables.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { ColorValues } from '../../../types' -import { mapColorsToScheme } from '../../../../lib' - -export interface IndicatorVariables { - colors: ColorValues -} - -export default (siteVariables): IndicatorVariables => { - const colorVariant = 500 - - return { - colors: mapColorsToScheme(siteVariables, colorVariant), - } -} diff --git a/src/themes/teams/components/Accordion/accordionTitleStyles.ts b/src/themes/teams/components/Accordion/accordionTitleStyles.ts index 137160f342..d368fb80d5 100644 --- a/src/themes/teams/components/Accordion/accordionTitleStyles.ts +++ b/src/themes/teams/components/Accordion/accordionTitleStyles.ts @@ -5,7 +5,7 @@ const accordionTitleStyles = { padding: '.5rem 0', cursor: 'pointer', }), - activeIndicator: () => ({ + indicator: () => ({ userSelect: 'none', }), } diff --git a/src/themes/teams/components/Icon/iconStyles.ts b/src/themes/teams/components/Icon/iconStyles.ts index b5b9dbcfe1..888871e41f 100644 --- a/src/themes/teams/components/Icon/iconStyles.ts +++ b/src/themes/teams/components/Icon/iconStyles.ts @@ -122,7 +122,13 @@ const iconStyles: ComponentSlotStylesInput = { ...((bordered || v.borderColor || circular) && getBorderedStyles(circular, v.borderColor || getIconColor(color, v))), - transform: `${rtl ? 'scaleX(-1)' : ''} rotate(${rtl ? -1 * rotate : rotate}deg)`, + ...(rtl && { + transform: `scaleX(-1) rotate(${-1 * rotate}deg)`, + }), + + ...(!rtl && { + transform: `rotate(${rotate}deg)`, + }), } }, diff --git a/src/themes/teams/components/Menu/menuItemStyles.ts b/src/themes/teams/components/Menu/menuItemStyles.ts index 64b04760ec..1f817245cd 100644 --- a/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/src/themes/teams/components/Menu/menuItemStyles.ts @@ -330,17 +330,6 @@ const menuItemStyles: ComponentSlotStylesInput ({ + indicator: () => ({ position: 'relative', float: 'right', left: pxToRem(10), From 670ee7681850016320a822b445bb14c560c4babb Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 17 Jan 2019 12:43:03 +0100 Subject: [PATCH 10/16] -removed color prop in the indicator -added examples --- .../Types/IndicatorExample.shorthand.tsx | 6 +++++ .../IndicatorExampleDirection.shorthand.tsx | 11 ++++++++ .../Types/IndicatorExampleIcon.shorthand.tsx | 12 +++++++++ .../components/Indicator/Types/index.tsx | 25 +++++++++++++++++++ .../examples/components/Indicator/index.tsx | 10 ++++++++ src/components/Indicator/Indicator.tsx | 7 +++--- 6 files changed, 67 insertions(+), 4 deletions(-) create mode 100644 docs/src/examples/components/Indicator/Types/IndicatorExample.shorthand.tsx create mode 100644 docs/src/examples/components/Indicator/Types/IndicatorExampleDirection.shorthand.tsx create mode 100644 docs/src/examples/components/Indicator/Types/IndicatorExampleIcon.shorthand.tsx create mode 100644 docs/src/examples/components/Indicator/Types/index.tsx create mode 100644 docs/src/examples/components/Indicator/index.tsx diff --git a/docs/src/examples/components/Indicator/Types/IndicatorExample.shorthand.tsx b/docs/src/examples/components/Indicator/Types/IndicatorExample.shorthand.tsx new file mode 100644 index 0000000000..5e5dd0572a --- /dev/null +++ b/docs/src/examples/components/Indicator/Types/IndicatorExample.shorthand.tsx @@ -0,0 +1,6 @@ +import * as React from 'react' +import { Indicator } from '@stardust-ui/react' + +const IndicatorExample = () => + +export default IndicatorExample diff --git a/docs/src/examples/components/Indicator/Types/IndicatorExampleDirection.shorthand.tsx b/docs/src/examples/components/Indicator/Types/IndicatorExampleDirection.shorthand.tsx new file mode 100644 index 0000000000..08a4529224 --- /dev/null +++ b/docs/src/examples/components/Indicator/Types/IndicatorExampleDirection.shorthand.tsx @@ -0,0 +1,11 @@ +import * as React from 'react' +import { Indicator } from '@stardust-ui/react' + +const IndicatorExampleDirection = () => ( +
+ {' '} + {' '} +
+) + +export default IndicatorExampleDirection diff --git a/docs/src/examples/components/Indicator/Types/IndicatorExampleIcon.shorthand.tsx b/docs/src/examples/components/Indicator/Types/IndicatorExampleIcon.shorthand.tsx new file mode 100644 index 0000000000..65612e650f --- /dev/null +++ b/docs/src/examples/components/Indicator/Types/IndicatorExampleIcon.shorthand.tsx @@ -0,0 +1,12 @@ +import * as React from 'react' +import { Indicator } from '@stardust-ui/react' + +const IndicatorExampleIcon = () => ( +
+ {' '} + {' '} + {' '} + {' '} +
+) +export default IndicatorExampleIcon diff --git a/docs/src/examples/components/Indicator/Types/index.tsx b/docs/src/examples/components/Indicator/Types/index.tsx new file mode 100644 index 0000000000..0f540d4608 --- /dev/null +++ b/docs/src/examples/components/Indicator/Types/index.tsx @@ -0,0 +1,25 @@ +import * as React from 'react' +import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' +import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' + +const Types = () => ( + + + + + +) + +export default Types diff --git a/docs/src/examples/components/Indicator/index.tsx b/docs/src/examples/components/Indicator/index.tsx new file mode 100644 index 0000000000..b53f825ada --- /dev/null +++ b/docs/src/examples/components/Indicator/index.tsx @@ -0,0 +1,10 @@ +import * as React from 'react' +import Types from './Types' + +const IndicatorExamples = () => ( +
+ +
+) + +export default IndicatorExamples diff --git a/src/components/Indicator/Indicator.tsx b/src/components/Indicator/Indicator.tsx index 43fd8a856d..53e1d458cf 100644 --- a/src/components/Indicator/Indicator.tsx +++ b/src/components/Indicator/Indicator.tsx @@ -6,14 +6,13 @@ import { UIComponent, UIComponentProps, commonPropTypes, - ColorComponentProps, customPropTypes, } from '../../lib' import { ReactProps, ShorthandValue } from '../../../types/utils' import Icon from '../Icon/Icon' -export interface IndicatorProps extends UIComponentProps, ColorComponentProps { - /** The indicator can be direction in different directions. */ +export interface IndicatorProps extends UIComponentProps { + /** The indicator can point towards different directions. */ direction?: 'forward' | 'back' | 'top' | 'bottom' /** The indicator can show specific icon if provided. */ @@ -21,7 +20,7 @@ export interface IndicatorProps extends UIComponentProps, ColorComponentProps { } /** - * An indicator is suggest additional content next to the element it is inside. + * An indicator is suggesting additional content next to the element it is used in. */ class Indicator extends UIComponent, any> { static displayName = 'Indicator' From 4c7cbd91c403e8236325fe595da82b51079ae262 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 17 Jan 2019 15:38:24 +0100 Subject: [PATCH 11/16] -renamed forward and back direction to start and end -moved the rotate icon prop from default to override props in the Indicator component --- .../IndicatorExampleDirection.shorthand.tsx | 4 ++-- .../Types/IndicatorExampleIcon.shorthand.tsx | 4 ++-- src/components/Accordion/AccordionTitle.tsx | 2 +- src/components/Indicator/Indicator.tsx | 17 ++++++++++------- src/components/Menu/MenuItem.tsx | 2 +- 5 files changed, 16 insertions(+), 13 deletions(-) diff --git a/docs/src/examples/components/Indicator/Types/IndicatorExampleDirection.shorthand.tsx b/docs/src/examples/components/Indicator/Types/IndicatorExampleDirection.shorthand.tsx index 08a4529224..4783a6d8c3 100644 --- a/docs/src/examples/components/Indicator/Types/IndicatorExampleDirection.shorthand.tsx +++ b/docs/src/examples/components/Indicator/Types/IndicatorExampleDirection.shorthand.tsx @@ -3,8 +3,8 @@ import { Indicator } from '@stardust-ui/react' const IndicatorExampleDirection = () => (
- {' '} - {' '} + {' '} + {' '}
) diff --git a/docs/src/examples/components/Indicator/Types/IndicatorExampleIcon.shorthand.tsx b/docs/src/examples/components/Indicator/Types/IndicatorExampleIcon.shorthand.tsx index 65612e650f..b673d6a722 100644 --- a/docs/src/examples/components/Indicator/Types/IndicatorExampleIcon.shorthand.tsx +++ b/docs/src/examples/components/Indicator/Types/IndicatorExampleIcon.shorthand.tsx @@ -3,9 +3,9 @@ import { Indicator } from '@stardust-ui/react' const IndicatorExampleIcon = () => (
- {' '} + {' '} {' '} - {' '} + {' '} {' '}
) diff --git a/src/components/Accordion/AccordionTitle.tsx b/src/components/Accordion/AccordionTitle.tsx index e6771d6878..005eac1b73 100644 --- a/src/components/Accordion/AccordionTitle.tsx +++ b/src/components/Accordion/AccordionTitle.tsx @@ -68,7 +68,7 @@ class AccordionTitle extends UIComponent, any> { <> {Indicator.create(indicatorWithDefaults, { defaultProps: { - direction: active ? 'bottom' : 'forward', + direction: active ? 'bottom' : 'end', styles: styles.indicator, }, })} diff --git a/src/components/Indicator/Indicator.tsx b/src/components/Indicator/Indicator.tsx index 53e1d458cf..fa00075c00 100644 --- a/src/components/Indicator/Indicator.tsx +++ b/src/components/Indicator/Indicator.tsx @@ -13,7 +13,7 @@ import Icon from '../Icon/Icon' export interface IndicatorProps extends UIComponentProps { /** The indicator can point towards different directions. */ - direction?: 'forward' | 'back' | 'top' | 'bottom' + direction?: 'start' | 'end' | 'top' | 'bottom' /** The indicator can show specific icon if provided. */ icon?: ShorthandValue @@ -30,15 +30,15 @@ class Indicator extends UIComponent, any> { static className = 'ui-indicator' static directionMap = { - forward: { unicode: '25B8', rotation: -90 }, - back: { unicode: '25C2', rotation: 90 }, + end: { unicode: '25B8', rotation: -90 }, + start: { unicode: '25C2', rotation: 90 }, top: { unicode: '25B4', rotation: 180 }, bottom: { unicode: '25BE', rotation: 0 }, } static propTypes = { ...commonPropTypes.createCommon({ children: false, content: false }), - direction: PropTypes.oneOf(['forward', 'back', 'top', 'bottom']), + direction: PropTypes.oneOf(['start', 'end', 'top', 'bottom']), icon: customPropTypes.itemShorthand, } @@ -59,7 +59,10 @@ class Indicator extends UIComponent, any> { } : { children: Icon.create(icon, { - defaultProps: { color, rotate: Indicator.directionMap[direction].rotation }, + defaultProps: { color }, + overrideProps: ({ rotate }) => ({ + rotate: (Indicator.directionMap[direction].rotation || 0) + (rotate || 0), + }), }), } return @@ -75,8 +78,8 @@ class Indicator extends UIComponent, any> { private getDirectionBasedOnRtl = (rtl: boolean, direction) => { if (!rtl) return direction - if (direction === 'forward') return 'back' - if (direction === 'back') return 'forward' + if (direction === 'start') return 'end' + if (direction === 'end') return 'start' return direction } } diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index ec942462ee..d55b775a4c 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -213,7 +213,7 @@ class MenuItem extends AutoControlledComponent, MenuIt {menu && Indicator.create(indicatorWithDefaults, { defaultProps: { - direction: vertical ? 'forward' : 'bottom', + direction: vertical ? 'end' : 'bottom', styles: styles.indicator, }, })} From 1073c5ec530e089e8d85fa571971be7f70f80ea7 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 17 Jan 2019 16:02:10 +0100 Subject: [PATCH 12/16] -updated changelog --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9dea16127c..e2959f3926 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ## [Unreleased] +### Features +- Add `Indicator` component and used it in `MenuItem` and `AccordionTitle` @mnajdova ([#721](https://github.com/stardust-ui/react/pull/721)) + ## [v0.17.0](https://github.com/stardust-ui/react/tree/v0.17.0) (2019-01-17) [Compare changes](https://github.com/stardust-ui/react/compare/v0.16.2...v0.17.0) From 3b481f713291724cd2e7cdf23a695b4f70ef5630 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 17 Jan 2019 16:09:01 +0100 Subject: [PATCH 13/16] -remove default props in AccordionTitle --- src/components/Accordion/AccordionTitle.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Accordion/AccordionTitle.tsx b/src/components/Accordion/AccordionTitle.tsx index 005eac1b73..db5a604703 100644 --- a/src/components/Accordion/AccordionTitle.tsx +++ b/src/components/Accordion/AccordionTitle.tsx @@ -54,8 +54,6 @@ class AccordionTitle extends UIComponent, any> { indicator: customPropTypes.itemShorthand, } - static defaultProps = {} - handleClick = e => { _.invoke(this.props, 'onClick', e, this.props) } From ad4040a0eb5c34a29eb195ce68a4bf90d0d38711 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 17 Jan 2019 16:14:44 +0100 Subject: [PATCH 14/16] -removed arrow unicode chars from the teams theme -remove helper methods for getting the mapping arrow in rtl --- src/themes/teams/siteVariables.ts | 7 ------- src/themes/teams/utils/index.ts | 7 ------- 2 files changed, 14 deletions(-) delete mode 100644 src/themes/teams/utils/index.ts diff --git a/src/themes/teams/siteVariables.ts b/src/themes/teams/siteVariables.ts index 43c0e2d8a7..96228fbc2e 100644 --- a/src/themes/teams/siteVariables.ts +++ b/src/themes/teams/siteVariables.ts @@ -98,10 +98,3 @@ export const bodyFontSize = '1.4rem' export const bodyBackground = white export const bodyColor = black export const bodyLineHeight = lineHeightBase - -// -// UNICODE CHARACTERS -// -export const arrowRight = '\u25B8' -export const arrowDown = '\u25BE' -export const arrowLeft = '\u25C2' diff --git a/src/themes/teams/utils/index.ts b/src/themes/teams/utils/index.ts deleted file mode 100644 index e818cf91b3..0000000000 --- a/src/themes/teams/utils/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { ThemeInput } from '../../types' - -export const getSideArrow = (theme: ThemeInput) => { - const { rtl, siteVariables } = theme - const { arrowLeft, arrowRight } = siteVariables - return rtl ? arrowLeft : arrowRight -} From 048bc08d49aaef461e77b27578d8a8f34b0461ee Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 21 Jan 2019 16:04:26 +0100 Subject: [PATCH 15/16] -addressed comments on the PR --- .../IndicatorExampleDirection.shorthand.tsx | 4 +- .../Types/IndicatorExampleIcon.shorthand.tsx | 4 +- src/components/Indicator/Indicator.tsx | 38 +++++++------------ 3 files changed, 18 insertions(+), 28 deletions(-) diff --git a/docs/src/examples/components/Indicator/Types/IndicatorExampleDirection.shorthand.tsx b/docs/src/examples/components/Indicator/Types/IndicatorExampleDirection.shorthand.tsx index 4783a6d8c3..5a0df21481 100644 --- a/docs/src/examples/components/Indicator/Types/IndicatorExampleDirection.shorthand.tsx +++ b/docs/src/examples/components/Indicator/Types/IndicatorExampleDirection.shorthand.tsx @@ -2,10 +2,10 @@ import * as React from 'react' import { Indicator } from '@stardust-ui/react' const IndicatorExampleDirection = () => ( -
+ <> {' '} {' '} -
+ ) export default IndicatorExampleDirection diff --git a/docs/src/examples/components/Indicator/Types/IndicatorExampleIcon.shorthand.tsx b/docs/src/examples/components/Indicator/Types/IndicatorExampleIcon.shorthand.tsx index b673d6a722..a2a611cf92 100644 --- a/docs/src/examples/components/Indicator/Types/IndicatorExampleIcon.shorthand.tsx +++ b/docs/src/examples/components/Indicator/Types/IndicatorExampleIcon.shorthand.tsx @@ -2,11 +2,11 @@ import * as React from 'react' import { Indicator } from '@stardust-ui/react' const IndicatorExampleIcon = () => ( -
+ <> {' '} {' '} {' '} {' '} -
+ ) export default IndicatorExampleIcon diff --git a/src/components/Indicator/Indicator.tsx b/src/components/Indicator/Indicator.tsx index fa00075c00..f0b93896dc 100644 --- a/src/components/Indicator/Indicator.tsx +++ b/src/components/Indicator/Indicator.tsx @@ -30,10 +30,10 @@ class Indicator extends UIComponent, any> { static className = 'ui-indicator' static directionMap = { - end: { unicode: '25B8', rotation: -90 }, - start: { unicode: '25C2', rotation: 90 }, - top: { unicode: '25B4', rotation: 180 }, - bottom: { unicode: '25BE', rotation: 0 }, + end: { unicode: '\u25B8', rotation: -90 }, + start: { unicode: '\u25C2', rotation: 90 }, + top: { unicode: '\u25B4', rotation: 180 }, + bottom: { unicode: '\u25BE', rotation: 0 }, } static propTypes = { @@ -51,28 +51,18 @@ class Indicator extends UIComponent, any> { const { direction, icon, color } = this.props const hexUnicode = direction && Indicator.directionMap[this.getDirectionBasedOnRtl(rtl, direction)].unicode - const contentProps = !icon - ? { - dangerouslySetInnerHTML: { - __html: hexUnicode && this.isHex(hexUnicode) ? `&#x${hexUnicode};` : '', - }, - } - : { - children: Icon.create(icon, { - defaultProps: { color }, - overrideProps: ({ rotate }) => ({ - rotate: (Indicator.directionMap[direction].rotation || 0) + (rotate || 0), - }), - }), - } - return - } - private isHex(h) { return ( - parseInt(h, 16) - .toString(16) - .toUpperCase() === h.toUpperCase() + + {icon + ? Icon.create(icon, { + defaultProps: { color }, + overrideProps: ({ rotate }) => ({ + rotate: (Indicator.directionMap[direction].rotation || 0) + (rotate || 0), + }), + }) + : hexUnicode} + ) } From 2426e20683fce3a7fa3f7208dcf85e3552d54ef3 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 21 Jan 2019 16:08:44 +0100 Subject: [PATCH 16/16] -replaced div with fragment --- docs/src/examples/components/Indicator/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/examples/components/Indicator/index.tsx b/docs/src/examples/components/Indicator/index.tsx index b53f825ada..8c27ea542f 100644 --- a/docs/src/examples/components/Indicator/index.tsx +++ b/docs/src/examples/components/Indicator/index.tsx @@ -2,9 +2,9 @@ import * as React from 'react' import Types from './Types' const IndicatorExamples = () => ( -
+ <> -
+ ) export default IndicatorExamples