From 713e4a4af181509f4817d09ba961395271e2b4ab Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 27 Mar 2019 18:32:09 +0100 Subject: [PATCH 01/18] -initial commit --- .../ComponentSidebarSection.tsx | 4 +- .../Indicator/Rtl/IndicatorExample.rtl.tsx | 13 --- .../components/Indicator/Rtl/index.tsx | 12 --- .../Types/IndicatorExample.shorthand.tsx | 6 -- .../IndicatorExampleDirection.shorthand.tsx | 13 --- .../Types/IndicatorExampleIcon.shorthand.tsx | 12 --- .../components/Indicator/Types/index.tsx | 25 ------ .../examples/components/Indicator/index.tsx | 13 --- .../components/Accordion/AccordionTitle.tsx | 6 +- .../src/components/Dropdown/Dropdown.tsx | 9 +- .../src/components/Indicator/Indicator.tsx | 88 ------------------- .../react/src/components/Menu/MenuItem.tsx | 5 +- packages/react/src/index.ts | 2 - .../components/Icon/fontAwesomeIconStyles.ts | 4 +- .../icons-triangle-up-small.tsx | 1 + .../teams/components/Icon/svg/icons/index.ts | 2 + .../components/Icon/svg/icons/triangleUp.tsx | 11 +++ packages/react/src/themes/teams/index.ts | 25 ++++-- .../src/themes/teams/withProcessedIcons.ts | 27 ++++-- packages/react/src/themes/types.ts | 9 +- .../components/Indicator/Indicator-test.ts | 7 -- 21 files changed, 74 insertions(+), 220 deletions(-) delete mode 100644 docs/src/examples/components/Indicator/Rtl/IndicatorExample.rtl.tsx delete mode 100644 docs/src/examples/components/Indicator/Rtl/index.tsx delete mode 100644 docs/src/examples/components/Indicator/Types/IndicatorExample.shorthand.tsx delete mode 100644 docs/src/examples/components/Indicator/Types/IndicatorExampleDirection.shorthand.tsx delete mode 100644 docs/src/examples/components/Indicator/Types/IndicatorExampleIcon.shorthand.tsx delete mode 100644 docs/src/examples/components/Indicator/Types/index.tsx delete mode 100644 docs/src/examples/components/Indicator/index.tsx delete mode 100644 packages/react/src/components/Indicator/Indicator.tsx create mode 100644 packages/react/src/themes/teams/components/Icon/svg/icons/triangleUp.tsx delete mode 100644 packages/react/test/specs/components/Indicator/Indicator-test.ts diff --git a/docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.tsx b/docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.tsx index fab4ca8975..8566b29f82 100644 --- a/docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.tsx +++ b/docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash' import * as PropTypes from 'prop-types' import * as React from 'react' -import { Indicator, Tree } from '@stardust-ui/react' +import { Icon, Tree } from '@stardust-ui/react' import { examplePathToHash } from 'docs/src/utils' @@ -98,7 +98,7 @@ export default class ComponentSidebarSection extends React.PureComponent {content} - {hasSubtree && } + {hasSubtree && } ) diff --git a/docs/src/examples/components/Indicator/Rtl/IndicatorExample.rtl.tsx b/docs/src/examples/components/Indicator/Rtl/IndicatorExample.rtl.tsx deleted file mode 100644 index 7626aad0a0..0000000000 --- a/docs/src/examples/components/Indicator/Rtl/IndicatorExample.rtl.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react' -import { Indicator, Flex } from '@stardust-ui/react' - -const IndicatorExampleRtl = () => ( - - - - - - -) - -export default IndicatorExampleRtl diff --git a/docs/src/examples/components/Indicator/Rtl/index.tsx b/docs/src/examples/components/Indicator/Rtl/index.tsx deleted file mode 100644 index 0ffe2f912f..0000000000 --- a/docs/src/examples/components/Indicator/Rtl/index.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react' - -import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' -import NonPublicSection from 'docs/src/components/ComponentDoc/NonPublicSection' - -const Rtl = () => ( - - - -) - -export default Rtl diff --git a/docs/src/examples/components/Indicator/Types/IndicatorExample.shorthand.tsx b/docs/src/examples/components/Indicator/Types/IndicatorExample.shorthand.tsx deleted file mode 100644 index 5e5dd0572a..0000000000 --- a/docs/src/examples/components/Indicator/Types/IndicatorExample.shorthand.tsx +++ /dev/null @@ -1,6 +0,0 @@ -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 deleted file mode 100644 index 131abcb4c0..0000000000 --- a/docs/src/examples/components/Indicator/Types/IndicatorExampleDirection.shorthand.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react' -import { Indicator, Flex } 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 deleted file mode 100644 index acf746e04a..0000000000 --- a/docs/src/examples/components/Indicator/Types/IndicatorExampleIcon.shorthand.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react' -import { Indicator, Flex } 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 deleted file mode 100644 index 47ec05cd3d..0000000000 --- a/docs/src/examples/components/Indicator/Types/index.tsx +++ /dev/null @@ -1,25 +0,0 @@ -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 deleted file mode 100644 index 31402d37f9..0000000000 --- a/docs/src/examples/components/Indicator/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react' - -import Rtl from './Rtl' -import Types from './Types' - -const IndicatorExamples = () => ( - <> - - - -) - -export default IndicatorExamples diff --git a/packages/react/src/components/Accordion/AccordionTitle.tsx b/packages/react/src/components/Accordion/AccordionTitle.tsx index 45b4aeb344..a0a17e6d47 100644 --- a/packages/react/src/components/Accordion/AccordionTitle.tsx +++ b/packages/react/src/components/Accordion/AccordionTitle.tsx @@ -14,7 +14,7 @@ import { rtlTextContainer, } from '../../lib' import { ReactProps, ComponentEventHandler, ShorthandValue } from '../../types' -import Indicator from '../Indicator/Indicator' +import Icon from '../Icon/Icon' import Layout from '../Layout/Layout' export interface AccordionTitleProps @@ -67,9 +67,9 @@ class AccordionTitle extends UIComponent, any> { const contentElement = ( , Dropdo }, }), }) - : Indicator.create(toggleIndicator, { + : Icon.create(toggleIndicator, { defaultProps: { className: Dropdown.slotClassNames.toggleIndicator, - direction: open ? 'top' : 'bottom', + name: open ? 'arrow-up' : 'arrow-down', styles: styles.toggleIndicator, }, - overrideProps: (predefinedProps: IndicatorProps) => ({ - onClick: (e, indicatorProps: IndicatorProps) => { + overrideProps: (predefinedProps: IconProps) => ({ + onClick: (e, indicatorProps: IconProps) => { _.invoke(predefinedProps, 'onClick', e, indicatorProps) getToggleButtonProps().onClick(e) }, diff --git a/packages/react/src/components/Indicator/Indicator.tsx b/packages/react/src/components/Indicator/Indicator.tsx deleted file mode 100644 index 0ca741a8ae..0000000000 --- a/packages/react/src/components/Indicator/Indicator.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import * as React from 'react' -import * as PropTypes from 'prop-types' - -import { - createShorthandFactory, - UIComponent, - UIComponentProps, - commonPropTypes, - customPropTypes, -} from '../../lib' -import { Accessibility } from '../../lib/accessibility/types' -import { iconBehavior } from '../../lib/accessibility' -import { ReactProps, ShorthandValue } from '../../types' -import Icon from '../Icon/Icon' - -export interface IndicatorProps extends UIComponentProps { - /** - * Accessibility behavior if overridden by the user. - * @default iconBehavior - */ - accessibility?: Accessibility - - /** The indicator can point towards different directions. */ - direction?: 'start' | 'end' | 'top' | 'bottom' - - /** The indicator can show specific icon if provided. */ - icon?: ShorthandValue -} - -/** - * An indicator is suggesting additional content next to the element it is used in. - */ -class Indicator extends UIComponent, any> { - static displayName = 'Indicator' - - static create: Function - - static className = 'ui-indicator' - - static directionMap = { - end: { unicode: '\u25B8', rotation: -90 }, - start: { unicode: '\u25C2', rotation: 90 }, - top: { unicode: '\u25B4', rotation: 180 }, - bottom: { unicode: '\u25BE', rotation: 0 }, - } - - static propTypes = { - ...commonPropTypes.createCommon({ children: false, content: false }), - direction: PropTypes.oneOf(['start', 'end', 'top', 'bottom']), - icon: customPropTypes.itemShorthand, - } - - static defaultProps = { - accessibility: iconBehavior, - as: 'span', - direction: 'bottom', - } - - renderComponent({ accessibility, ElementType, classes, unhandledProps, rtl }) { - const { direction, icon, color } = this.props - const hexUnicode = - direction && Indicator.directionMap[this.getDirectionBasedOnRtl(rtl, direction)].unicode - - return ( - - {icon - ? Icon.create(icon, { - defaultProps: { color }, - overrideProps: ({ rotate }) => ({ - rotate: (Indicator.directionMap[direction].rotation || 0) + (rotate || 0), - }), - }) - : hexUnicode} - - ) - } - - private getDirectionBasedOnRtl = (rtl: boolean, direction) => { - if (!rtl) return direction - if (direction === 'start') return 'end' - if (direction === 'end') return 'start' - return direction - } -} - -Indicator.create = createShorthandFactory({ Component: Indicator, mappedProp: 'icon' }) - -export default Indicator diff --git a/packages/react/src/components/Menu/MenuItem.tsx b/packages/react/src/components/Menu/MenuItem.tsx index 916e192ada..380696abcb 100644 --- a/packages/react/src/components/Menu/MenuItem.tsx +++ b/packages/react/src/components/Menu/MenuItem.tsx @@ -26,7 +26,6 @@ import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibil import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../types' import { focusAsync } from '../../lib/accessibility/FocusZone' import Ref from '../Ref/Ref' -import Indicator from '../Indicator/Indicator' export interface MenuItemSlotClassNames { wrapper: string @@ -215,9 +214,9 @@ class MenuItem extends AutoControlledComponent, MenuIt })} {rtlTextContainer.createFor({ element: content })} {menu && - Indicator.create(indicatorWithDefaults, { + Icon.create(indicatorWithDefaults, { defaultProps: { - direction: vertical ? 'end' : 'bottom', + name: vertical ? 'arrow-end' : 'arrow-down', styles: styles.indicator, }, })} diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index eaf525dab5..a60c53f318 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -152,8 +152,6 @@ export { default as Animation, AnimationProps } from './components/Animation/Ani export { default as Tree } from './components/Tree' -export { default as Indicator, IndicatorProps } from './components/Indicator/Indicator' - export { default as Reaction, ReactionProps, ReactionState } from './components/Reaction/Reaction' export { default as ReactionGroup, ReactionGroupProps } from './components/Reaction/ReactionGroup' diff --git a/packages/react/src/themes/teams/components/Icon/fontAwesomeIconStyles.ts b/packages/react/src/themes/teams/components/Icon/fontAwesomeIconStyles.ts index 71a31ac268..92d8b4440d 100644 --- a/packages/react/src/themes/teams/components/Icon/fontAwesomeIconStyles.ts +++ b/packages/react/src/themes/teams/components/Icon/fontAwesomeIconStyles.ts @@ -1,4 +1,4 @@ -import { ThemeIcons, ThemeIconSpec } from '../../../types' +import { ThemeIconSpec } from '../../../types' const fontIcon = (content: string, fontFamily: string): ThemeIconSpec => ({ icon: { content: `'\\${content}'`, fontFamily }, @@ -11,7 +11,7 @@ const brand = (content: string) => fontIcon(content, '"Font Awesome 5 Brands"') // Originally generated from: // https://github.com/Semantic-Org/Semantic-UI-CSS/blob/master/components/icon.css // Corrections were made to duplicate icon names and incorrectly mapped alternates -const fontAwesomeIcons: ThemeIcons = { +const fontAwesomeIcons: { [key: string]: ThemeIconSpec } = { // Deprecated *In/Out Naming Conflict) 'linkedin in': brand('f0e1'), 'zoom in': normal('f00e'), diff --git a/packages/react/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-triangle-up-small.tsx b/packages/react/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-triangle-up-small.tsx index 81824a2ac3..d865782eef 100644 --- a/packages/react/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-triangle-up-small.tsx +++ b/packages/react/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-triangle-up-small.tsx @@ -8,4 +8,5 @@ export default { ), styles: {}, + exportedAs: 'triangle-up', } as TeamsProcessedSvgIconSpec diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts b/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts index 1a8dde233e..19dc2f1e11 100644 --- a/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts +++ b/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts @@ -96,6 +96,7 @@ import translation from './translation' import trashCan from './trashCan' import triangleDown from './triangleDown' import triangleRight from './triangleRight' +import triangleUp from './triangleUp' import underline from './underline' import undo from './undo' import urgent from './urgent' @@ -189,6 +190,7 @@ export default { 'trash-can': trashCan, 'triangle-down': triangleDown, 'triangle-right': triangleRight, + 'triangle-up': triangleUp, 'team-create': teamCreate, underline, undo, diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/triangleUp.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/triangleUp.tsx new file mode 100644 index 0000000000..81824a2ac3 --- /dev/null +++ b/packages/react/src/themes/teams/components/Icon/svg/icons/triangleUp.tsx @@ -0,0 +1,11 @@ +import * as React from 'react' +import { TeamsProcessedSvgIconSpec } from '../types' + +export default { + icon: ({ classes }) => ( + + + + ), + styles: {}, +} as TeamsProcessedSvgIconSpec diff --git a/packages/react/src/themes/teams/index.ts b/packages/react/src/themes/teams/index.ts index 60fcbfdf23..0a1f5beb7f 100644 --- a/packages/react/src/themes/teams/index.ts +++ b/packages/react/src/themes/teams/index.ts @@ -21,22 +21,35 @@ const declareSvg = (svgIcon: SvgIconSpec): ThemeIconSpec => ({ const declareFontBased = (fontIcon: FontIconSpec): ThemeIconSpec => ({ icon: fontIcon }) -const icons: ThemeIcons = Object.keys(svgIconsAndStyles as { +const getIcon = iconAndMaybeStyles => { + return (iconAndMaybeStyles as any).styles + ? (iconAndMaybeStyles as SvgIconSpecWithStyles).icon + : (iconAndMaybeStyles as SvgIconSpec) +} + +const themeIcons: { [key: string]: ThemeIconSpec } = Object.keys(svgIconsAndStyles as { [iconName: string]: TeamsSvgIconSpec -}).reduce((accIcons, iconName) => { +}).reduce<{ [key: string]: ThemeIconSpec }>((accIcons, iconName) => { const iconAndMaybeStyles = svgIconsAndStyles[iconName] - const icon: SvgIconSpec = (iconAndMaybeStyles as any).styles - ? (iconAndMaybeStyles as SvgIconSpecWithStyles).icon - : (iconAndMaybeStyles as SvgIconSpec) + const icon: SvgIconSpec = getIcon(iconAndMaybeStyles) return { ...accIcons, ...{ [iconName]: declareSvg(icon) } } }, {}) Object.keys(fontIcons).forEach(iconName => { - icons[iconName] = declareFontBased(fontIcons[iconName]) + themeIcons[iconName] = declareFontBased(fontIcons[iconName]) }) +const icons: ThemeIcons = { + ...themeIcons, + close: themeIcons['close'], + 'arrow-up': themeIcons['triangle-up'], + 'arrow-down': themeIcons['triangle-down'], + 'arrow-start': themeIcons['triangle-left'], + 'arrow-end': themeIcons['triangle-right'], +} + export default mergeThemes(base, { siteVariables, componentVariables, diff --git a/packages/react/src/themes/teams/withProcessedIcons.ts b/packages/react/src/themes/teams/withProcessedIcons.ts index 7cd2ac6075..0439a4e15b 100644 --- a/packages/react/src/themes/teams/withProcessedIcons.ts +++ b/packages/react/src/themes/teams/withProcessedIcons.ts @@ -1,4 +1,4 @@ -import { ThemeInput, ThemeIcons, ThemeIconSpec, SvgIconSpec } from '../types' +import { ThemeInput, ThemeIconSpec, SvgIconSpec } from '../types' import { default as svgIconsAndStyles } from './components/Icon/svg/ProcessedIcons' import { TeamsProcessedSvgIconSpec, SvgIconSpecWithStyles } from './components/Icon/svg/types' @@ -12,14 +12,18 @@ const declareSvg = (svgIcon: SvgIconSpec, exportedAs?: string): ThemeProcessedIc exportedAs, }) -const processedIcons: ThemeIcons = Object.keys(svgIconsAndStyles as { +const getIcon = iconAndMaybeStyles => { + return (iconAndMaybeStyles as any).styles + ? (iconAndMaybeStyles as SvgIconSpecWithStyles).icon + : (iconAndMaybeStyles as SvgIconSpec) +} + +const processedIcons: { [key: string]: ThemeIconSpec } = Object.keys(svgIconsAndStyles as { [iconName: string]: TeamsProcessedSvgIconSpec -}).reduce((accIcons, iconName) => { +}).reduce<{ [key: string]: ThemeIconSpec }>((accIcons, iconName) => { const iconAndMaybeStyles = svgIconsAndStyles[iconName] - const icon: SvgIconSpec = (iconAndMaybeStyles as any).styles - ? (iconAndMaybeStyles as SvgIconSpecWithStyles).icon - : (iconAndMaybeStyles as SvgIconSpec) + const icon: SvgIconSpec = getIcon(iconAndMaybeStyles) return { ...accIcons, @@ -27,6 +31,15 @@ const processedIcons: ThemeIcons = Object.keys(svgIconsAndStyles as { } }, {}) -const theme: ThemeInput = { icons: processedIcons } +const theme: ThemeInput = { + icons: { + ...processedIcons, + close: getIcon(svgIconsAndStyles['close']) as ThemeIconSpec, + 'arrow-up': getIcon(svgIconsAndStyles['triangle-up'] || {}) as ThemeIconSpec, + 'arrow-down': getIcon(svgIconsAndStyles['triangle-down'] || {}) as ThemeIconSpec, + 'arrow-start': getIcon(svgIconsAndStyles['triangle-left'] || {}) as ThemeIconSpec, + 'arrow-end': getIcon(svgIconsAndStyles['triangle-right'] || {}) as ThemeIconSpec, + }, +} export default theme diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index 9a0aed8ef9..a2c5591f1a 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -505,4 +505,11 @@ export type ThemeIconSpec = { icon: FontIconSpec | SvgIconSpec } -export type ThemeIcons = { [iconName: string]: ThemeIconSpec } +export type ThemeIcons = { + close: ThemeIconSpec + 'arrow-end': ThemeIconSpec + 'arrow-start': ThemeIconSpec + 'arrow-up': ThemeIconSpec + 'arrow-down': ThemeIconSpec + [iconName: string]: ThemeIconSpec +} diff --git a/packages/react/test/specs/components/Indicator/Indicator-test.ts b/packages/react/test/specs/components/Indicator/Indicator-test.ts deleted file mode 100644 index dd21346825..0000000000 --- a/packages/react/test/specs/components/Indicator/Indicator-test.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { isConformant } from 'test/specs/commonTests' - -import Indicator from 'src/components/Indicator/Indicator' - -describe('Indicator', () => { - isConformant(Indicator) -}) From 3a3b5e5d2f32c8aaa405412c9ae6bca82d982b79 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 27 Mar 2019 18:51:41 +0100 Subject: [PATCH 02/18] -temporary adding option icon names --- packages/react/src/themes/types.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index a2c5591f1a..7020afdaf5 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -506,10 +506,10 @@ export type ThemeIconSpec = { } export type ThemeIcons = { - close: ThemeIconSpec - 'arrow-end': ThemeIconSpec - 'arrow-start': ThemeIconSpec - 'arrow-up': ThemeIconSpec - 'arrow-down': ThemeIconSpec + close?: ThemeIconSpec + 'arrow-end'?: ThemeIconSpec + 'arrow-start'?: ThemeIconSpec + 'arrow-up'?: ThemeIconSpec + 'arrow-down'?: ThemeIconSpec [iconName: string]: ThemeIconSpec } From c80f392a281c3f430db106e80f55692ded960197 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 28 Mar 2019 11:34:13 +0100 Subject: [PATCH 03/18] -renamed icons --- .../react/src/components/Accordion/AccordionTitle.tsx | 2 +- packages/react/src/components/Dropdown/Dropdown.tsx | 4 ++-- packages/react/src/components/Input/Input.tsx | 2 +- packages/react/src/themes/teams/index.ts | 9 ++++----- packages/react/src/themes/teams/withProcessedIcons.ts | 9 ++++----- packages/react/src/themes/types.ts | 9 ++++----- 6 files changed, 16 insertions(+), 19 deletions(-) diff --git a/packages/react/src/components/Accordion/AccordionTitle.tsx b/packages/react/src/components/Accordion/AccordionTitle.tsx index a0a17e6d47..e655dd5bd9 100644 --- a/packages/react/src/components/Accordion/AccordionTitle.tsx +++ b/packages/react/src/components/Accordion/AccordionTitle.tsx @@ -69,7 +69,7 @@ class AccordionTitle extends UIComponent, any> { , Dropdo static defaultProps: DropdownProps = { as: 'div', - clearIndicator: 'close', + clearIndicator: 'stardust-close', itemToString: item => { if (!item || React.isValidElement(item)) { return '' @@ -396,7 +396,7 @@ class Dropdown extends AutoControlledComponent, Dropdo : Icon.create(toggleIndicator, { defaultProps: { className: Dropdown.slotClassNames.toggleIndicator, - name: open ? 'arrow-up' : 'arrow-down', + name: open ? 'stardust-arrow-up' : 'stardust-arrow-down', styles: styles.toggleIndicator, }, overrideProps: (predefinedProps: IconProps) => ({ diff --git a/packages/react/src/components/Input/Input.tsx b/packages/react/src/components/Input/Input.tsx index 26a2dd2126..cdbad190a8 100644 --- a/packages/react/src/components/Input/Input.tsx +++ b/packages/react/src/components/Input/Input.tsx @@ -203,7 +203,7 @@ class Input extends AutoControlledComponent, InputState> const { value } = this.state if (clearable && (value as string).length !== 0) { - return 'close' + return 'stardust-close' } return icon || null diff --git a/packages/react/src/themes/teams/index.ts b/packages/react/src/themes/teams/index.ts index 0a1f5beb7f..afaa7490bb 100644 --- a/packages/react/src/themes/teams/index.ts +++ b/packages/react/src/themes/teams/index.ts @@ -43,11 +43,10 @@ Object.keys(fontIcons).forEach(iconName => { const icons: ThemeIcons = { ...themeIcons, - close: themeIcons['close'], - 'arrow-up': themeIcons['triangle-up'], - 'arrow-down': themeIcons['triangle-down'], - 'arrow-start': themeIcons['triangle-left'], - 'arrow-end': themeIcons['triangle-right'], + 'stardust-close': themeIcons['close'], + 'stardust-arrow-up': themeIcons['triangle-up'], + 'stardust-arrow-down': themeIcons['triangle-down'], + 'stardust-arrow-end': themeIcons['triangle-right'], } export default mergeThemes(base, { diff --git a/packages/react/src/themes/teams/withProcessedIcons.ts b/packages/react/src/themes/teams/withProcessedIcons.ts index 0439a4e15b..3ec08da0dd 100644 --- a/packages/react/src/themes/teams/withProcessedIcons.ts +++ b/packages/react/src/themes/teams/withProcessedIcons.ts @@ -34,11 +34,10 @@ const processedIcons: { [key: string]: ThemeIconSpec } = Object.keys(svgIconsAnd const theme: ThemeInput = { icons: { ...processedIcons, - close: getIcon(svgIconsAndStyles['close']) as ThemeIconSpec, - 'arrow-up': getIcon(svgIconsAndStyles['triangle-up'] || {}) as ThemeIconSpec, - 'arrow-down': getIcon(svgIconsAndStyles['triangle-down'] || {}) as ThemeIconSpec, - 'arrow-start': getIcon(svgIconsAndStyles['triangle-left'] || {}) as ThemeIconSpec, - 'arrow-end': getIcon(svgIconsAndStyles['triangle-right'] || {}) as ThemeIconSpec, + 'stardust-close': processedIcons['close'], + 'stardust-arrow-up': processedIcons['triangle-up'], + 'stardust-arrow-down': processedIcons['triangle-down'], + 'stardust-arrow-end': processedIcons['triangle-right'], }, } diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index 7020afdaf5..b4ffb77db4 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -506,10 +506,9 @@ export type ThemeIconSpec = { } export type ThemeIcons = { - close?: ThemeIconSpec - 'arrow-end'?: ThemeIconSpec - 'arrow-start'?: ThemeIconSpec - 'arrow-up'?: ThemeIconSpec - 'arrow-down'?: ThemeIconSpec + 'stardust-close'?: ThemeIconSpec + 'stardust-arrow-end'?: ThemeIconSpec + 'stardust-arrow-up'?: ThemeIconSpec + 'stardust-arrow-down'?: ThemeIconSpec [iconName: string]: ThemeIconSpec } From b0058c421ad54513ebccbe07a72e28e801d797b2 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 28 Mar 2019 14:05:22 +0100 Subject: [PATCH 04/18] -added base theme icons --- .../react/src/themes/base/componentStyles.ts | 1 + .../src/themes/base/componentVariables.ts | 1 + .../components/Icon/fontAwesomeIconStyles.ts | 21 +++ .../themes/base/components/Icon/iconStyles.ts | 136 ++++++++++++++++++ .../base/components/Icon/iconVariables.ts | 35 +++++ 5 files changed, 194 insertions(+) create mode 100644 packages/react/src/themes/base/components/Icon/fontAwesomeIconStyles.ts create mode 100644 packages/react/src/themes/base/components/Icon/iconStyles.ts create mode 100644 packages/react/src/themes/base/components/Icon/iconVariables.ts diff --git a/packages/react/src/themes/base/componentStyles.ts b/packages/react/src/themes/base/componentStyles.ts index df909e9c02..0ef748a20e 100644 --- a/packages/react/src/themes/base/componentStyles.ts +++ b/packages/react/src/themes/base/componentStyles.ts @@ -1,4 +1,5 @@ export { default as Dialog } from './components/Dialog/dialogStyles' +export { default as Icon } from './components/Icon/iconStyles' export { default as Loader } from './components/Loader/loaderStyles' export { default as ProviderBox } from './components/Provider/providerBoxStyles' export { default as Text } from './components/Text/textStyles' diff --git a/packages/react/src/themes/base/componentVariables.ts b/packages/react/src/themes/base/componentVariables.ts index 6f21a8a05f..a8e758be8f 100644 --- a/packages/react/src/themes/base/componentVariables.ts +++ b/packages/react/src/themes/base/componentVariables.ts @@ -1,4 +1,5 @@ export { default as Dialog } from './components/Dialog/dialogVariables' +export { default as Icon } from './components/Icon/iconVariables' export { default as Loader } from './components/Loader/loaderVariables' export { default as ProviderBox } from './components/Provider/providerBoxVariables' export { default as Text } from './components/Text/textVariables' diff --git a/packages/react/src/themes/base/components/Icon/fontAwesomeIconStyles.ts b/packages/react/src/themes/base/components/Icon/fontAwesomeIconStyles.ts new file mode 100644 index 0000000000..73ffa0a3fc --- /dev/null +++ b/packages/react/src/themes/base/components/Icon/fontAwesomeIconStyles.ts @@ -0,0 +1,21 @@ +import { ThemeIcons, ThemeIconSpec } from '../../../types' + +const fontIcon = (content: string, fontFamily: string): ThemeIconSpec => ({ + icon: { content: `'\\${content}'`, fontFamily }, +}) + +const normal = (content: string) => fontIcon(content, '"Font Awesome 5 Free"') + +// Originally generated from: +// https://github.com/Semantic-Org/Semantic-UI-CSS/blob/master/components/icon.css +// Corrections were made to duplicate icon names and incorrectly mapped alternates +const fontAwesomeIcons: ThemeIcons = { + 'stardust-close': normal('f00d'), + 'stardust-arrow-down': normal('f0d7'), + 'stardust-arrow-end': normal('f0da'), + 'stardust-arrow-up': normal('f0d8'), +} + +const emptyIcon = { icon: { content: '?', fontFamily: '' } } + +export default (name: string): ThemeIconSpec => fontAwesomeIcons[name] || emptyIcon diff --git a/packages/react/src/themes/base/components/Icon/iconStyles.ts b/packages/react/src/themes/base/components/Icon/iconStyles.ts new file mode 100644 index 0000000000..b13792f748 --- /dev/null +++ b/packages/react/src/themes/base/components/Icon/iconStyles.ts @@ -0,0 +1,136 @@ +import * as _ from 'lodash' + +import fontAwesomeIcons from './fontAwesomeIconStyles' +import { callable, pxToRem, SizeValue } from '../../../../lib' +import { ComponentSlotStylesInput, ICSSInJSStyle, FontIconSpec } from '../../../types' +import { ResultOf } from '../../../../types' +import { IconXSpacing, IconProps } from '../../../../components/Icon/Icon' +import { IconVariables, IconSizeModifier } from './iconVariables' + +const sizes: Record = { + smallest: 7, + smaller: 10, + small: 12, + medium: 16, + large: 20, + larger: 32, + largest: 40, +} + +const getDefaultFontIcon = (iconName: string) => { + return callable(fontAwesomeIcons(iconName).icon)() +} + +const getFontStyles = ( + size: number, + iconName: string, + themeIcon?: ResultOf, +): ICSSInJSStyle => { + const { fontFamily, content } = themeIcon || getDefaultFontIcon(iconName) + const sizeInRems = pxToRem(size) + + return { + fontFamily, + fontSize: sizeInRems, + lineHeight: 1, + + display: 'inline-flex', + justifyContent: 'center', + alignItems: 'center', + + width: sizeInRems, + height: sizeInRems, + + '::before': { + content, + }, + } +} + +const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICSSInJSStyle => { + switch (xSpacing) { + case 'none': + return { marginLeft: 0, marginRight: 0 } + case 'before': + return { marginLeft: horizontalSpace, marginRight: 0 } + case 'after': + return { marginLeft: 0, marginRight: horizontalSpace } + case 'both': + return { marginLeft: horizontalSpace, marginRight: horizontalSpace } + } +} + +const getBorderedStyles = (boxShadowColor: string): ICSSInJSStyle => { + return { + ...getPaddedStyle(), + + boxShadow: `0 0 0 .05rem ${boxShadowColor} inset`, + } +} + +const getPaddedStyle = (): ICSSInJSStyle => ({ + padding: pxToRem(4), +}) + +const getIconSize = (size: SizeValue, sizeModifier: IconSizeModifier): number => { + if (!sizeModifier) { + return sizes[size] + } + + const modifiedSizes = { + large: { + x: 24, + xx: 28, + }, + } + + return modifiedSizes[size] && modifiedSizes[size][sizeModifier] +} + +const getIconColor = (colorProp: string, variables: IconVariables) => + _.get(variables.colors, colorProp, variables.color || 'currentColor') + +const iconStyles: ComponentSlotStylesInput = { + root: ({ + props: { disabled, name, size, bordered, circular, color, xSpacing, rotate }, + variables: v, + theme, + }): ICSSInJSStyle => { + const iconSpec = theme.icons[name] + const rtl = theme.rtl + const isFontBased = name && (!iconSpec || !iconSpec.isSvg) + + return { + backgroundColor: v.backgroundColor, + display: 'inline-block', + speak: 'none', + verticalAlign: 'middle', + + ...(!isFontBased && { boxSizing: 'border-box' }), + + ...(isFontBased && getFontStyles(getIconSize(size, v.sizeModifier), name)), + + ...(isFontBased && { + color: getIconColor(color, v), + fontWeight: 900, // required for the fontAwesome to render + + ...(disabled && { + color: v.disabledColor, + }), + }), + + ...getXSpacingStyles(xSpacing, v.horizontalSpace), + + ...(circular && { ...getPaddedStyle(), borderRadius: '50%' }), + + ...((bordered || v.borderColor) && + getBorderedStyles(v.borderColor || getIconColor(color, v))), + + ...(rtl && { + transform: `scaleX(-1) rotate(${-1 * rotate}deg)`, + }), + } + }, +} + +export default iconStyles diff --git a/packages/react/src/themes/base/components/Icon/iconVariables.ts b/packages/react/src/themes/base/components/Icon/iconVariables.ts new file mode 100644 index 0000000000..f86bba94ce --- /dev/null +++ b/packages/react/src/themes/base/components/Icon/iconVariables.ts @@ -0,0 +1,35 @@ +import { ColorValues } from '../../../types' +import { mapColorsToScheme, pxToRem } from '../../../../lib' + +export type IconSizeModifier = 'x' | 'xx' + +export interface IconVariables { + [key: string]: object | string | number | boolean | undefined + + colors: ColorValues + color?: string + backgroundColor?: string + borderColor?: string + brandColor?: string + secondaryColor: string + redColor?: string + disabledColor: string + + horizontalSpace: string + sizeModifier?: IconSizeModifier +} + +const colorVariant = 500 + +export default (siteVars): IconVariables => ({ + colors: mapColorsToScheme(siteVars, colorVariant), + color: undefined, + backgroundColor: undefined, + borderColor: undefined, + brandColor: siteVars.brandColor, + secondaryColor: siteVars.colors.white, + redColor: siteVars.colors.red[900], + disabledColor: siteVars.gray06, + + horizontalSpace: pxToRem(10), +}) From b9db038c5b5fdc69bc3dd1a059c996ba960dde9a Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 28 Mar 2019 14:09:37 +0100 Subject: [PATCH 05/18] -unset rtl styles from base theme icon styles --- packages/react/src/themes/teams/components/Icon/iconStyles.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts index db5ca276a3..d8dc9e58a8 100644 --- a/packages/react/src/themes/teams/components/Icon/iconStyles.ts +++ b/packages/react/src/themes/teams/components/Icon/iconStyles.ts @@ -130,6 +130,10 @@ const iconStyles: ComponentSlotStylesInput = { ...(!rtl && { transform: `rotate(${rotate}deg)`, }), + // override base theme default rtl behavior + ...(rtl && { + transform: 'unset', + }), } }, From 404bc000636efcdfad3d3a87189e2a52b9ca551d Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 28 Mar 2019 16:28:22 +0100 Subject: [PATCH 06/18] -addressing comments on the PR --- .../components/Icon/fontAwesomeIconStyles.ts | 21 ------- .../themes/base/components/Icon/iconStyles.ts | 21 ++----- .../base/components/Icon/iconVariables.ts | 23 ++----- .../src/themes/base/components/Icon/index.ts | 16 +++++ packages/react/src/themes/base/index.ts | 10 ++++ .../teams/components/Icon/iconStyles.ts | 60 ++++++------------- packages/react/src/themes/teams/index.ts | 4 +- .../src/themes/teams/withProcessedIcons.ts | 12 ++-- packages/react/src/themes/types.ts | 12 ++-- 9 files changed, 66 insertions(+), 113 deletions(-) delete mode 100644 packages/react/src/themes/base/components/Icon/fontAwesomeIconStyles.ts create mode 100644 packages/react/src/themes/base/components/Icon/index.ts diff --git a/packages/react/src/themes/base/components/Icon/fontAwesomeIconStyles.ts b/packages/react/src/themes/base/components/Icon/fontAwesomeIconStyles.ts deleted file mode 100644 index 73ffa0a3fc..0000000000 --- a/packages/react/src/themes/base/components/Icon/fontAwesomeIconStyles.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ThemeIcons, ThemeIconSpec } from '../../../types' - -const fontIcon = (content: string, fontFamily: string): ThemeIconSpec => ({ - icon: { content: `'\\${content}'`, fontFamily }, -}) - -const normal = (content: string) => fontIcon(content, '"Font Awesome 5 Free"') - -// Originally generated from: -// https://github.com/Semantic-Org/Semantic-UI-CSS/blob/master/components/icon.css -// Corrections were made to duplicate icon names and incorrectly mapped alternates -const fontAwesomeIcons: ThemeIcons = { - 'stardust-close': normal('f00d'), - 'stardust-arrow-down': normal('f0d7'), - 'stardust-arrow-end': normal('f0da'), - 'stardust-arrow-up': normal('f0d8'), -} - -const emptyIcon = { icon: { content: '?', fontFamily: '' } } - -export default (name: string): ThemeIconSpec => fontAwesomeIcons[name] || emptyIcon diff --git a/packages/react/src/themes/base/components/Icon/iconStyles.ts b/packages/react/src/themes/base/components/Icon/iconStyles.ts index b13792f748..cb9bc0d7d9 100644 --- a/packages/react/src/themes/base/components/Icon/iconStyles.ts +++ b/packages/react/src/themes/base/components/Icon/iconStyles.ts @@ -1,6 +1,6 @@ import * as _ from 'lodash' -import fontAwesomeIcons from './fontAwesomeIconStyles' +import icons from './index' import { callable, pxToRem, SizeValue } from '../../../../lib' import { ComponentSlotStylesInput, ICSSInJSStyle, FontIconSpec } from '../../../types' import { ResultOf } from '../../../../types' @@ -18,7 +18,7 @@ const sizes: Record = { } const getDefaultFontIcon = (iconName: string) => { - return callable(fontAwesomeIcons(iconName).icon)() + return callable(icons(iconName).icon)() } const getFontStyles = ( @@ -101,33 +101,22 @@ const iconStyles: ComponentSlotStylesInput = { const isFontBased = name && (!iconSpec || !iconSpec.isSvg) return { - backgroundColor: v.backgroundColor, display: 'inline-block', speak: 'none', verticalAlign: 'middle', - ...(!isFontBased && { boxSizing: 'border-box' }), + boxSizing: 'content-box', ...(isFontBased && getFontStyles(getIconSize(size, v.sizeModifier), name)), - ...(isFontBased && { - color: getIconColor(color, v), - fontWeight: 900, // required for the fontAwesome to render - - ...(disabled && { - color: v.disabledColor, - }), - }), - ...getXSpacingStyles(xSpacing, v.horizontalSpace), ...(circular && { ...getPaddedStyle(), borderRadius: '50%' }), - ...((bordered || v.borderColor) && - getBorderedStyles(v.borderColor || getIconColor(color, v))), + ...(bordered && getBorderedStyles(v.borderColor || getIconColor(color, v))), ...(rtl && { - transform: `scaleX(-1) rotate(${-1 * rotate}deg)`, + transform: rtl ? `scaleX(-1) rotate(${-1 * rotate}deg)` : `rotate(${rotate}deg)`, }), } }, diff --git a/packages/react/src/themes/base/components/Icon/iconVariables.ts b/packages/react/src/themes/base/components/Icon/iconVariables.ts index f86bba94ce..58728d29cb 100644 --- a/packages/react/src/themes/base/components/Icon/iconVariables.ts +++ b/packages/react/src/themes/base/components/Icon/iconVariables.ts @@ -1,35 +1,20 @@ -import { ColorValues } from '../../../types' -import { mapColorsToScheme, pxToRem } from '../../../../lib' +import { pxToRem } from '../../../../lib' export type IconSizeModifier = 'x' | 'xx' export interface IconVariables { [key: string]: object | string | number | boolean | undefined - - colors: ColorValues color?: string - backgroundColor?: string borderColor?: string - brandColor?: string - secondaryColor: string - redColor?: string - disabledColor: string horizontalSpace: string sizeModifier?: IconSizeModifier } -const colorVariant = 500 - -export default (siteVars): IconVariables => ({ - colors: mapColorsToScheme(siteVars, colorVariant), +export default (): IconVariables => ({ color: undefined, - backgroundColor: undefined, - borderColor: undefined, - brandColor: siteVars.brandColor, - secondaryColor: siteVars.colors.white, - redColor: siteVars.colors.red[900], - disabledColor: siteVars.gray06, + borderColor: 'black', + disabledColor: 'gray', horizontalSpace: pxToRem(10), }) diff --git a/packages/react/src/themes/base/components/Icon/index.ts b/packages/react/src/themes/base/components/Icon/index.ts new file mode 100644 index 0000000000..df21bb1d9e --- /dev/null +++ b/packages/react/src/themes/base/components/Icon/index.ts @@ -0,0 +1,16 @@ +import { ThemeIcons, ThemeIconSpec } from '../../../types' + +const fontIcon = (content: string): ThemeIconSpec => ({ + icon: { content: `'\\${content}'` }, +}) + +export const icons: ThemeIcons = { + 'stardust-close': fontIcon('2715'), + 'stardust-arrow-down': fontIcon('25BE'), + 'stardust-arrow-end': fontIcon('25B8'), + 'stardust-arrow-up': fontIcon('25B4'), +} + +const emptyIcon = { icon: { content: '?' } } + +export default (name: string): ThemeIconSpec => icons[name] || emptyIcon diff --git a/packages/react/src/themes/base/index.ts b/packages/react/src/themes/base/index.ts index d5a6a47cf9..a27ca4beee 100644 --- a/packages/react/src/themes/base/index.ts +++ b/packages/react/src/themes/base/index.ts @@ -2,9 +2,19 @@ import { ThemeInput } from '../types' import * as siteVariables from './siteVariables' import * as componentVariables from './componentVariables' import * as componentStyles from './componentStyles' +import { FontIconSpec, ThemeIconSpec, ThemeIcons } from 'src/themes/types' +import { default as fontIcons, icons } from './components/Icon/index' + +const declareFontBased = (fontIcon: FontIconSpec): ThemeIconSpec => ({ icon: fontIcon }) + +const themeIcons: ThemeIcons = {} +Object.keys(icons).forEach(iconName => { + themeIcons[iconName] = declareFontBased(fontIcons[iconName]) +}) export default { siteVariables, + icons: themeIcons, componentVariables, componentStyles, } as ThemeInput diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts index d8dc9e58a8..6e1087982e 100644 --- a/packages/react/src/themes/teams/components/Icon/iconStyles.ts +++ b/packages/react/src/themes/teams/components/Icon/iconStyles.ts @@ -4,7 +4,7 @@ import fontAwesomeIcons from './fontAwesomeIconStyles' import { callable, pxToRem, SizeValue } from '../../../../lib' import { ComponentSlotStylesInput, ICSSInJSStyle, FontIconSpec } from '../../../types' import { ResultOf } from '../../../../types' -import { IconXSpacing, IconProps } from '../../../../components/Icon/Icon' +import { IconProps } from '../../../../components/Icon/Icon' import { getStyle as getSvgStyle } from './svg' import { IconVariables, IconSizeModifier } from './iconVariables' @@ -22,6 +22,18 @@ const getDefaultFontIcon = (iconName: string) => { return callable(fontAwesomeIcons(iconName).icon)() } +const getPaddedStyle = (): ICSSInJSStyle => ({ + padding: pxToRem(4), +}) + +const getBorderedStyles = (boxShadowColor: string): ICSSInJSStyle => { + return { + ...getPaddedStyle(), + + boxShadow: `0 0 0 .05rem ${boxShadowColor} inset`, + } +} + const getFontStyles = ( size: number, iconName: string, @@ -48,31 +60,6 @@ const getFontStyles = ( } } -const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICSSInJSStyle => { - switch (xSpacing) { - case 'none': - return { marginLeft: 0, marginRight: 0 } - case 'before': - return { marginLeft: horizontalSpace, marginRight: 0 } - case 'after': - return { marginLeft: 0, marginRight: horizontalSpace } - case 'both': - return { marginLeft: horizontalSpace, marginRight: horizontalSpace } - } -} - -const getBorderedStyles = (boxShadowColor: string): ICSSInJSStyle => { - return { - ...getPaddedStyle(), - - boxShadow: `0 0 0 .05rem ${boxShadowColor} inset`, - } -} - -const getPaddedStyle = (): ICSSInJSStyle => ({ - padding: pxToRem(4), -}) - const getIconSize = (size: SizeValue, sizeModifier: IconSizeModifier): number => { if (!sizeModifier) { return sizes[size] @@ -103,34 +90,23 @@ const iconStyles: ComponentSlotStylesInput = { return { backgroundColor: v.backgroundColor, - display: 'inline-block', - speak: 'none', - verticalAlign: 'middle', - - ...(!isFontBased && { boxSizing: 'border-box' }), - - ...(isFontBased && getFontStyles(getIconSize(size, v.sizeModifier), name)), + boxSizing: isFontBased ? 'content-box' : 'border-box', ...(isFontBased && { - color: getIconColor(color, v), + ...getFontStyles(getIconSize(size, v.sizeModifier), name), fontWeight: 900, // required for the fontAwesome to render + color: getIconColor(color, v), ...(disabled && { color: v.disabledColor, }), }), - ...getXSpacingStyles(xSpacing, v.horizontalSpace), - - ...(circular && { ...getPaddedStyle(), borderRadius: '50%' }), - + // overriding base theme border handling ...((bordered || v.borderColor) && getBorderedStyles(v.borderColor || getIconColor(color, v))), - ...(!rtl && { - transform: `rotate(${rotate}deg)`, - }), - // override base theme default rtl behavior + // overriding the base theme default rtl behavior ...(rtl && { transform: 'unset', }), diff --git a/packages/react/src/themes/teams/index.ts b/packages/react/src/themes/teams/index.ts index afaa7490bb..6f9658249e 100644 --- a/packages/react/src/themes/teams/index.ts +++ b/packages/react/src/themes/teams/index.ts @@ -21,13 +21,13 @@ const declareSvg = (svgIcon: SvgIconSpec): ThemeIconSpec => ({ const declareFontBased = (fontIcon: FontIconSpec): ThemeIconSpec => ({ icon: fontIcon }) -const getIcon = iconAndMaybeStyles => { +export const getIcon = (iconAndMaybeStyles): SvgIconSpec => { return (iconAndMaybeStyles as any).styles ? (iconAndMaybeStyles as SvgIconSpecWithStyles).icon : (iconAndMaybeStyles as SvgIconSpec) } -const themeIcons: { [key: string]: ThemeIconSpec } = Object.keys(svgIconsAndStyles as { +const themeIcons: ThemeIcons = Object.keys(svgIconsAndStyles as { [iconName: string]: TeamsSvgIconSpec }).reduce<{ [key: string]: ThemeIconSpec }>((accIcons, iconName) => { const iconAndMaybeStyles = svgIconsAndStyles[iconName] diff --git a/packages/react/src/themes/teams/withProcessedIcons.ts b/packages/react/src/themes/teams/withProcessedIcons.ts index 3ec08da0dd..10b0fe9e77 100644 --- a/packages/react/src/themes/teams/withProcessedIcons.ts +++ b/packages/react/src/themes/teams/withProcessedIcons.ts @@ -1,7 +1,9 @@ import { ThemeInput, ThemeIconSpec, SvgIconSpec } from '../types' import { default as svgIconsAndStyles } from './components/Icon/svg/ProcessedIcons' -import { TeamsProcessedSvgIconSpec, SvgIconSpecWithStyles } from './components/Icon/svg/types' +import { TeamsProcessedSvgIconSpec } from './components/Icon/svg/types' +import { ThemeIcons } from 'src/themes/types' +import { getIcon } from './index' type ThemeProcessedIconSpec = ThemeIconSpec & { [K in keyof TeamsProcessedSvgIconSpec]?: TeamsProcessedSvgIconSpec[K] } @@ -12,13 +14,7 @@ const declareSvg = (svgIcon: SvgIconSpec, exportedAs?: string): ThemeProcessedIc exportedAs, }) -const getIcon = iconAndMaybeStyles => { - return (iconAndMaybeStyles as any).styles - ? (iconAndMaybeStyles as SvgIconSpecWithStyles).icon - : (iconAndMaybeStyles as SvgIconSpec) -} - -const processedIcons: { [key: string]: ThemeIconSpec } = Object.keys(svgIconsAndStyles as { +const processedIcons: ThemeIcons = Object.keys(svgIconsAndStyles as { [iconName: string]: TeamsProcessedSvgIconSpec }).reduce<{ [key: string]: ThemeIconSpec }>((accIcons, iconName) => { const iconAndMaybeStyles = svgIconsAndStyles[iconName] diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index b4ffb77db4..a726bceee7 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -505,10 +505,12 @@ export type ThemeIconSpec = { icon: FontIconSpec | SvgIconSpec } -export type ThemeIcons = { - 'stardust-close'?: ThemeIconSpec - 'stardust-arrow-end'?: ThemeIconSpec - 'stardust-arrow-up'?: ThemeIconSpec - 'stardust-arrow-down'?: ThemeIconSpec +export type RequiredIconNames = + | 'stardust-close' + | 'stardust-arrow-end' + | 'stardust-arrow-up' + | 'stardust-arrow-down' + +export type ThemeIcons = Partial> & { [iconName: string]: ThemeIconSpec } From 0343d126b33f219afb74072ad2e231e23eaee0bf Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 28 Mar 2019 16:58:19 +0100 Subject: [PATCH 07/18] -addressing comments on the PR --- packages/react/src/themes/teams/index.ts | 2 +- packages/react/src/themes/teams/withProcessedIcons.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/themes/teams/index.ts b/packages/react/src/themes/teams/index.ts index 6f9658249e..040741b411 100644 --- a/packages/react/src/themes/teams/index.ts +++ b/packages/react/src/themes/teams/index.ts @@ -29,7 +29,7 @@ export const getIcon = (iconAndMaybeStyles): SvgIconSpec => { const themeIcons: ThemeIcons = Object.keys(svgIconsAndStyles as { [iconName: string]: TeamsSvgIconSpec -}).reduce<{ [key: string]: ThemeIconSpec }>((accIcons, iconName) => { +}).reduce((accIcons, iconName) => { const iconAndMaybeStyles = svgIconsAndStyles[iconName] const icon: SvgIconSpec = getIcon(iconAndMaybeStyles) diff --git a/packages/react/src/themes/teams/withProcessedIcons.ts b/packages/react/src/themes/teams/withProcessedIcons.ts index 10b0fe9e77..81a6061e22 100644 --- a/packages/react/src/themes/teams/withProcessedIcons.ts +++ b/packages/react/src/themes/teams/withProcessedIcons.ts @@ -16,7 +16,7 @@ const declareSvg = (svgIcon: SvgIconSpec, exportedAs?: string): ThemeProcessedIc const processedIcons: ThemeIcons = Object.keys(svgIconsAndStyles as { [iconName: string]: TeamsProcessedSvgIconSpec -}).reduce<{ [key: string]: ThemeIconSpec }>((accIcons, iconName) => { +}).reduce((accIcons, iconName) => { const iconAndMaybeStyles = svgIconsAndStyles[iconName] const icon: SvgIconSpec = getIcon(iconAndMaybeStyles) From 6833c947a327c4e1dfaaeec729f813ce6b9d4972 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 28 Mar 2019 17:01:30 +0100 Subject: [PATCH 08/18] -changed icon names in the MenuItem component --- packages/react/src/components/Menu/MenuItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Menu/MenuItem.tsx b/packages/react/src/components/Menu/MenuItem.tsx index 1a475fac58..9657a56cf5 100644 --- a/packages/react/src/components/Menu/MenuItem.tsx +++ b/packages/react/src/components/Menu/MenuItem.tsx @@ -217,7 +217,7 @@ class MenuItem extends AutoControlledComponent, MenuIt {menu && Icon.create(indicatorWithDefaults, { defaultProps: { - name: vertical ? 'arrow-end' : 'arrow-down', + name: vertical ? 'stardust-arrow-end' : 'stardust-arrow-down', styles: styles.indicator, }, })} From 3a84450554aa47148595e0de6e3095a73db5250a Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 28 Mar 2019 17:07:50 +0100 Subject: [PATCH 09/18] -removed color related things from the base theme icon styles --- packages/react/src/themes/base/components/Icon/iconStyles.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/react/src/themes/base/components/Icon/iconStyles.ts b/packages/react/src/themes/base/components/Icon/iconStyles.ts index cb9bc0d7d9..b2b2fb0297 100644 --- a/packages/react/src/themes/base/components/Icon/iconStyles.ts +++ b/packages/react/src/themes/base/components/Icon/iconStyles.ts @@ -87,9 +87,6 @@ const getIconSize = (size: SizeValue, sizeModifier: IconSizeModifier): number => return modifiedSizes[size] && modifiedSizes[size][sizeModifier] } -const getIconColor = (colorProp: string, variables: IconVariables) => - _.get(variables.colors, colorProp, variables.color || 'currentColor') - const iconStyles: ComponentSlotStylesInput = { root: ({ props: { disabled, name, size, bordered, circular, color, xSpacing, rotate }, @@ -113,7 +110,7 @@ const iconStyles: ComponentSlotStylesInput = { ...(circular && { ...getPaddedStyle(), borderRadius: '50%' }), - ...(bordered && getBorderedStyles(v.borderColor || getIconColor(color, v))), + ...(bordered && getBorderedStyles(v.borderColor)), ...(rtl && { transform: rtl ? `scaleX(-1) rotate(${-1 * rotate}deg)` : `rotate(${rotate}deg)`, From ae806baad47088926bdb32c95f3afef07ae777e9 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 28 Mar 2019 17:08:46 +0100 Subject: [PATCH 10/18] -removed unused props --- packages/react/src/themes/base/components/Icon/iconStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/themes/base/components/Icon/iconStyles.ts b/packages/react/src/themes/base/components/Icon/iconStyles.ts index b2b2fb0297..3a3da96631 100644 --- a/packages/react/src/themes/base/components/Icon/iconStyles.ts +++ b/packages/react/src/themes/base/components/Icon/iconStyles.ts @@ -89,7 +89,7 @@ const getIconSize = (size: SizeValue, sizeModifier: IconSizeModifier): number => const iconStyles: ComponentSlotStylesInput = { root: ({ - props: { disabled, name, size, bordered, circular, color, xSpacing, rotate }, + props: { name, size, bordered, circular, xSpacing, rotate }, variables: v, theme, }): ICSSInJSStyle => { From 5e5f912a2200e7695dbb9488fa8fcd2721800930 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 28 Mar 2019 17:35:25 +0100 Subject: [PATCH 11/18] -fixed menu slot class names -fixed input test --- packages/react/src/components/Menu/Menu.tsx | 9 +++++---- .../react/test/specs/components/Input/Input-test.tsx | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/Menu/Menu.tsx b/packages/react/src/components/Menu/Menu.tsx index c2909812ee..09e084873a 100644 --- a/packages/react/src/components/Menu/Menu.tsx +++ b/packages/react/src/components/Menu/Menu.tsx @@ -93,10 +93,7 @@ class Menu extends AutoControlledComponent, MenuState> { static className = 'ui-menu' - static slotClassNames: MenuSlotClassNames = { - divider: MenuDivider.className, - item: MenuItem.className, - } + static slotClassNames: MenuSlotClassNames static create: Function @@ -225,5 +222,9 @@ class Menu extends AutoControlledComponent, MenuState> { } Menu.create = createShorthandFactory({ Component: Menu, mappedArrayProp: 'items' }) +Menu.slotClassNames = { + divider: `${Menu.className}__divider`, + item: `${Menu.className}__item`, +} export default Menu diff --git a/packages/react/test/specs/components/Input/Input-test.tsx b/packages/react/test/specs/components/Input/Input-test.tsx index 366347959b..558f8058e7 100644 --- a/packages/react/test/specs/components/Input/Input-test.tsx +++ b/packages/react/test/specs/components/Input/Input-test.tsx @@ -110,7 +110,7 @@ describe('Input', () => { const inputComp = mount() const domNode = getInputDomNode(inputComp) setUserInputValue(inputComp, testValue) // user types into the input - const iconComp = inputComp.find('Icon[name="close"]') + const iconComp = inputComp.find('Icon[name="stardust-close"]') expect(domNode.value).toEqual(testValue) // input value is the one typed by the user expect(iconComp.length).toBeGreaterThan(0) // the 'x' icon appears From 795ec302f76d31308989e5a6fa99dbe4f0a7b66b Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 28 Mar 2019 17:35:42 +0100 Subject: [PATCH 12/18] -fixed menu slot class names -fixed input test --- packages/react/test/specs/components/Input/Input-test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/test/specs/components/Input/Input-test.tsx b/packages/react/test/specs/components/Input/Input-test.tsx index 558f8058e7..2bc9dcd8bb 100644 --- a/packages/react/test/specs/components/Input/Input-test.tsx +++ b/packages/react/test/specs/components/Input/Input-test.tsx @@ -118,7 +118,7 @@ describe('Input', () => { iconComp.simulate('click') // user clicks on 'x' icon expect(domNode.value).toEqual('') // input value gets cleared - expect(inputComp.find('Icon[name="close"]').length).toEqual(0) // the 'x' icon disappears + expect(inputComp.find('Icon[name="stardust-close"]').length).toEqual(0) // the 'x' icon disappears }) }) }) From 47048bc5435db640984355667db6891fe96e107b Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 28 Mar 2019 17:50:44 +0100 Subject: [PATCH 13/18] -removed Indicator from App.tsx --- build/gulp/tasks/test-projects/cra/App.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/build/gulp/tasks/test-projects/cra/App.tsx b/build/gulp/tasks/test-projects/cra/App.tsx index 4a6005ba43..6692ce48ea 100644 --- a/build/gulp/tasks/test-projects/cra/App.tsx +++ b/build/gulp/tasks/test-projects/cra/App.tsx @@ -8,7 +8,6 @@ import { Header, Icon, Image, - Indicator, Input, Popup, Provider, @@ -31,7 +30,6 @@ class App extends React.Component {
- } content="Popup content" /> From 43cd20d09b4816ec2a2f7dde4a44986bde5a1452 Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 29 Mar 2019 11:33:19 +0100 Subject: [PATCH 14/18] -addressed PR comments --- packages/react/src/components/Menu/Menu.tsx | 4 +- .../themes/base/components/Icon/iconStyles.ts | 51 ++++--------------- .../base/components/Icon/iconVariables.ts | 1 - .../components/Icon/fontAwesomeIconStyles.ts | 4 +- 4 files changed, 14 insertions(+), 46 deletions(-) diff --git a/packages/react/src/components/Menu/Menu.tsx b/packages/react/src/components/Menu/Menu.tsx index 09e084873a..50fd533fa2 100644 --- a/packages/react/src/components/Menu/Menu.tsx +++ b/packages/react/src/components/Menu/Menu.tsx @@ -223,8 +223,8 @@ class Menu extends AutoControlledComponent, MenuState> { Menu.create = createShorthandFactory({ Component: Menu, mappedArrayProp: 'items' }) Menu.slotClassNames = { - divider: `${Menu.className}__divider`, - item: `${Menu.className}__item`, + divider: MenuDivider.className, + item: MenuItem.className, } export default Menu diff --git a/packages/react/src/themes/base/components/Icon/iconStyles.ts b/packages/react/src/themes/base/components/Icon/iconStyles.ts index 3a3da96631..7aedccf8ce 100644 --- a/packages/react/src/themes/base/components/Icon/iconStyles.ts +++ b/packages/react/src/themes/base/components/Icon/iconStyles.ts @@ -1,21 +1,9 @@ -import * as _ from 'lodash' - import icons from './index' -import { callable, pxToRem, SizeValue } from '../../../../lib' +import { callable, pxToRem } from '../../../../lib' import { ComponentSlotStylesInput, ICSSInJSStyle, FontIconSpec } from '../../../types' import { ResultOf } from '../../../../types' import { IconXSpacing, IconProps } from '../../../../components/Icon/Icon' -import { IconVariables, IconSizeModifier } from './iconVariables' - -const sizes: Record = { - smallest: 7, - smaller: 10, - small: 12, - medium: 16, - large: 20, - larger: 32, - largest: 40, -} +import { IconVariables } from './iconVariables' const getDefaultFontIcon = (iconName: string) => { return callable(icons(iconName).icon)() @@ -72,30 +60,11 @@ const getPaddedStyle = (): ICSSInJSStyle => ({ padding: pxToRem(4), }) -const getIconSize = (size: SizeValue, sizeModifier: IconSizeModifier): number => { - if (!sizeModifier) { - return sizes[size] - } - - const modifiedSizes = { - large: { - x: 24, - xx: 28, - }, - } - - return modifiedSizes[size] && modifiedSizes[size][sizeModifier] -} - const iconStyles: ComponentSlotStylesInput = { - root: ({ - props: { name, size, bordered, circular, xSpacing, rotate }, - variables: v, - theme, - }): ICSSInJSStyle => { - const iconSpec = theme.icons[name] + root: ({ props: p, variables: v, theme }): ICSSInJSStyle => { + const iconSpec = theme.icons[p.name] const rtl = theme.rtl - const isFontBased = name && (!iconSpec || !iconSpec.isSvg) + const isFontBased = p.name && (!iconSpec || !iconSpec.isSvg) return { display: 'inline-block', @@ -104,16 +73,16 @@ const iconStyles: ComponentSlotStylesInput = { boxSizing: 'content-box', - ...(isFontBased && getFontStyles(getIconSize(size, v.sizeModifier), name)), + ...(isFontBased && getFontStyles(16, p.name)), - ...getXSpacingStyles(xSpacing, v.horizontalSpace), + ...getXSpacingStyles(p.xSpacing, v.horizontalSpace), - ...(circular && { ...getPaddedStyle(), borderRadius: '50%' }), + ...(p.circular && { ...getPaddedStyle(), borderRadius: '50%' }), - ...(bordered && getBorderedStyles(v.borderColor)), + ...(p.bordered && getBorderedStyles(v.borderColor)), ...(rtl && { - transform: rtl ? `scaleX(-1) rotate(${-1 * rotate}deg)` : `rotate(${rotate}deg)`, + transform: rtl ? `scaleX(-1) rotate(${-1 * p.rotate}deg)` : `rotate(${p.rotate}deg)`, }), } }, diff --git a/packages/react/src/themes/base/components/Icon/iconVariables.ts b/packages/react/src/themes/base/components/Icon/iconVariables.ts index 58728d29cb..c762998126 100644 --- a/packages/react/src/themes/base/components/Icon/iconVariables.ts +++ b/packages/react/src/themes/base/components/Icon/iconVariables.ts @@ -8,7 +8,6 @@ export interface IconVariables { borderColor?: string horizontalSpace: string - sizeModifier?: IconSizeModifier } export default (): IconVariables => ({ diff --git a/packages/react/src/themes/teams/components/Icon/fontAwesomeIconStyles.ts b/packages/react/src/themes/teams/components/Icon/fontAwesomeIconStyles.ts index 92d8b4440d..71a31ac268 100644 --- a/packages/react/src/themes/teams/components/Icon/fontAwesomeIconStyles.ts +++ b/packages/react/src/themes/teams/components/Icon/fontAwesomeIconStyles.ts @@ -1,4 +1,4 @@ -import { ThemeIconSpec } from '../../../types' +import { ThemeIcons, ThemeIconSpec } from '../../../types' const fontIcon = (content: string, fontFamily: string): ThemeIconSpec => ({ icon: { content: `'\\${content}'`, fontFamily }, @@ -11,7 +11,7 @@ const brand = (content: string) => fontIcon(content, '"Font Awesome 5 Brands"') // Originally generated from: // https://github.com/Semantic-Org/Semantic-UI-CSS/blob/master/components/icon.css // Corrections were made to duplicate icon names and incorrectly mapped alternates -const fontAwesomeIcons: { [key: string]: ThemeIconSpec } = { +const fontAwesomeIcons: ThemeIcons = { // Deprecated *In/Out Naming Conflict) 'linkedin in': brand('f0e1'), 'zoom in': normal('f00e'), From 74e933ec593198f6900a4cdcf97d3c076ab4cc0d Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 29 Mar 2019 11:42:13 +0100 Subject: [PATCH 15/18] -fixed rotate behavior --- packages/react/src/themes/base/components/Icon/iconStyles.ts | 4 +--- packages/react/src/themes/teams/components/Icon/iconStyles.ts | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/react/src/themes/base/components/Icon/iconStyles.ts b/packages/react/src/themes/base/components/Icon/iconStyles.ts index 7aedccf8ce..aee0a85c5c 100644 --- a/packages/react/src/themes/base/components/Icon/iconStyles.ts +++ b/packages/react/src/themes/base/components/Icon/iconStyles.ts @@ -81,9 +81,7 @@ const iconStyles: ComponentSlotStylesInput = { ...(p.bordered && getBorderedStyles(v.borderColor)), - ...(rtl && { - transform: rtl ? `scaleX(-1) rotate(${-1 * p.rotate}deg)` : `rotate(${p.rotate}deg)`, - }), + transform: rtl ? `scaleX(-1) rotate(${-1 * p.rotate}deg)` : `rotate(${p.rotate}deg)`, } }, } diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts index 6e1087982e..0536040acc 100644 --- a/packages/react/src/themes/teams/components/Icon/iconStyles.ts +++ b/packages/react/src/themes/teams/components/Icon/iconStyles.ts @@ -106,7 +106,7 @@ const iconStyles: ComponentSlotStylesInput = { ...((bordered || v.borderColor) && getBorderedStyles(v.borderColor || getIconColor(color, v))), - // overriding the base theme default rtl behavior + // overriding the base theme default rtl behavior as in teams theme the flipInRtl slot is used for this ...(rtl && { transform: 'unset', }), From 47f47f8c22fe7d1bc950a43d38028185bd4f1209 Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 29 Mar 2019 12:07:24 +0100 Subject: [PATCH 16/18] -reverted recent changes to Menu --- packages/react/src/components/Menu/Menu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/Menu/Menu.tsx b/packages/react/src/components/Menu/Menu.tsx index 50fd533fa2..09e084873a 100644 --- a/packages/react/src/components/Menu/Menu.tsx +++ b/packages/react/src/components/Menu/Menu.tsx @@ -223,8 +223,8 @@ class Menu extends AutoControlledComponent, MenuState> { Menu.create = createShorthandFactory({ Component: Menu, mappedArrayProp: 'items' }) Menu.slotClassNames = { - divider: MenuDivider.className, - item: MenuItem.className, + divider: `${Menu.className}__divider`, + item: `${Menu.className}__item`, } export default Menu From a9635a602a3a6d223e5b1bb06efef88f58daa9f8 Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 29 Mar 2019 12:33:57 +0100 Subject: [PATCH 17/18] -updated changelog --- CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 36b334420b..83177fb33d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,13 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ## [Unreleased] +### BREAKING CHANGES +- Remove `Indicator` component, the usages should be replaced with the `Icon` component @mnajdova ([#1120](https://github.com/stardust-ui/react/pull/1120)) + +### Features +- Add predefined icon set for the usages in the `Input`, `Dropdown` and `AccordionTitle` components @mnajdova ([#1120](https://github.com/stardust-ui/react/pull/1120)) + + ## [v0.25.1](https://github.com/stardust-ui/react/tree/v0.25.1) (2019-03-29) [Compare changes](https://github.com/stardust-ui/react/compare/v0.25.0...v0.25.1) From d92dd943160a48b64956cbd79c4eb6c3df695c0a Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 29 Mar 2019 14:01:59 +0100 Subject: [PATCH 18/18] -reverted changes in the Menu --- packages/react/src/components/Menu/Menu.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/Menu/Menu.tsx b/packages/react/src/components/Menu/Menu.tsx index c419182f98..59baf024df 100644 --- a/packages/react/src/components/Menu/Menu.tsx +++ b/packages/react/src/components/Menu/Menu.tsx @@ -93,7 +93,10 @@ class Menu extends AutoControlledComponent, MenuState> { static className = 'ui-menu' - static slotClassNames: MenuSlotClassNames + static slotClassNames: MenuSlotClassNames = { + divider: MenuDivider.className, + item: MenuItem.className, + } static create: Function @@ -222,9 +225,5 @@ class Menu extends AutoControlledComponent, MenuState> { } Menu.create = createShorthandFactory({ Component: Menu, mappedArrayProp: 'items' }) -Menu.slotClassNames = { - divider: `${Menu.className}__divider`, - item: `${Menu.className}__item`, -} export default Menu