chore(Indicator): use predefined icon set (#1120)

* -initial commit

* -temporary adding option icon names

* -renamed icons

* -added base theme icons

* -unset rtl styles from base theme icon styles

* -addressing comments on the PR

* -addressing comments on the PR

* -changed icon names in the MenuItem component

* -removed color related things from the base theme icon styles

* -removed unused props

* -fixed menu slot class names
-fixed input test

* -fixed menu slot class names
-fixed input test

* -removed Indicator from App.tsx

* -addressed PR comments

* -fixed rotate behavior

* -reverted recent changes to Menu

* -updated changelog

* -reverted changes in the Menu

Author: mnajdova

CHANGELOG.md

@@ -20,6 +20,12 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Update vertical && pointing `Menu` styles @jaanus03 ([#1116](https://github.com/stardust-ui/react/pull/1116))
 
+### 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 ]------------------------------- -->
 ## [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)

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 {
           <Divider />
           <Header content="This is " />
           <Image src="//placehold.it" />
-          <Indicator />
           <Input placeholder="Type here" />
           <Popup trigger={<Button content="Popup" />} content="Popup content" />
         </div>

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<any, an
         active={active}
       >
         <span>{content}</span>
-        {hasSubtree && <Indicator direction={open ? 'bottom' : 'start'} />}
+        {hasSubtree && <Icon direction={name ? 'arrow-down' : 'arrow-end'} />}
       </Component>
     )
 

docs/src/examples/components/Indicator/Rtl/IndicatorExample.rtl.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<ReactProps<AccordionTitleProps>, any> {
 
     const contentElement = (
       <Layout
-        start={Indicator.create(indicatorWithDefaults, {
+        start={Icon.create(indicatorWithDefaults, {
           defaultProps: {
-            direction: active ? 'bottom' : 'end',
+            name: active ? 'stardust-arrow-down' : 'stardust-arrow-end',
             styles: styles.indicator,
           },
         })}

docs/src/examples/components/Indicator/Rtl/index.tsx

@@ -30,7 +30,6 @@ import {
   handleRef,
   UIComponentProps,
 } from '../../lib'
-import Indicator, { IndicatorProps } from '../Indicator/Indicator'
 import List from '../List/List'
 import Ref from '../Ref/Ref'
 import DropdownItem from './DropdownItem'
@@ -279,7 +278,7 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
 
   static defaultProps: DropdownProps = {
     as: 'div',
-    clearIndicator: 'close',
+    clearIndicator: 'stardust-close',
     itemToString: item => {
       if (!item || React.isValidElement(item)) {
         return ''
@@ -403,14 +402,14 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
                           },
                         }),
                       })
-                    : Indicator.create(toggleIndicator, {
+                    : Icon.create(toggleIndicator, {
                         defaultProps: {
                           className: Dropdown.slotClassNames.toggleIndicator,
-                          direction: open ? 'top' : 'bottom',
+                          name: open ? 'stardust-arrow-up' : 'stardust-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)
                           },

docs/src/examples/components/Indicator/Types/IndicatorExample.shorthand.tsx

@@ -203,7 +203,7 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
     const { value } = this.state
 
     if (clearable && (value as string).length !== 0) {
-      return 'close'
+      return 'stardust-close'
     }
 
     return icon || null

docs/src/examples/components/Indicator/Types/IndicatorExampleDirection.shorthand.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
@@ -216,9 +215,9 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
             })}
           {rtlTextContainer.createFor({ element: content })}
           {menu &&
-            Indicator.create(indicatorWithDefaults, {
+            Icon.create(indicatorWithDefaults, {
               defaultProps: {
-                direction: vertical ? 'end' : 'bottom',
+                name: vertical ? 'stardust-arrow-end' : 'stardust-arrow-down',
                 styles: styles.indicator,
               },
             })}

docs/src/examples/components/Indicator/Types/IndicatorExampleIcon.shorthand.tsx

@@ -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'
 

docs/src/examples/components/Indicator/Types/index.tsx

@@ -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'

docs/src/examples/components/Indicator/index.tsx

@@ -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'