feat(slot): rename Slot to Box and export (#713)

* feat(slot): rename Slot to Box and export

* fixed changelog

CHANGELOG.md

@@ -21,6 +21,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix focus outline visible only during keyboard navigation in `ListItem` @layershifter ([#727](https://github.com/stardust-ui/react/pull/727))
 - Fix Avatar's size example @mnajdova ([#745](https://github.com/stardust-ui/react/pull/745))
 
+### Features
+- Rename `Slot` component to `Box` and export it @Bugaa92 ([#713](https://github.com/stardust-ui/react/pull/713))
+
 <!--------------------------------[ v0.17.0 ]------------------------------- -->
 ## [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)

build/gulp/tasks/docs.ts

@@ -71,7 +71,7 @@ task(
 // Build
 // ----------------------------------------
 
-const componentsSrc = [`${paths.posix.src()}/components/*/[A-Z]*.tsx`, '!**/Slot.tsx']
+const componentsSrc = [`${paths.posix.src()}/components/*/[A-Z]*.tsx`, '!**/Box.tsx']
 const behaviorSrc = [`${paths.posix.src()}/lib/accessibility/Behaviors/*/[a-z]*.ts`]
 const examplesIndexSrc = `${paths.posix.docsSrc()}/examples/*/*/*/index.tsx`
 const examplesSrc = `${paths.posix.docsSrc()}/examples/*/*/*/!(*index|.knobs).tsx`

src/components/Attachment/Attachment.tsx

@@ -12,7 +12,7 @@ import {
 import Icon from '../Icon/Icon'
 import Button from '../Button/Button'
 import Text from '../Text/Text'
-import Slot from '../Slot/Slot'
+import Box from '../Box/Box'
 import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces'
 import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
 import { attachmentBehavior } from '../../lib/accessibility'
@@ -130,7 +130,7 @@ class Attachment extends UIComponent<ReactProps<AttachmentProps>, AttachmentStat
           </div>
         )}
         {!_.isNil(progress) &&
-          Slot.create('', {
+          Box.create('', {
             defaultProps: { className: classes.progress },
           })}
       </ElementType>

src/components/Slot/Slot.tsx → src/components/Box/Box.tsx

@@ -10,20 +10,18 @@ import {
 import createComponent, { CreateComponentReturnType } from '../../lib/createComponent'
 import { ReactProps } from '../../../types/utils'
 
-export interface SlotProps
-  extends UIComponentProps<SlotProps>,
+export interface BoxProps
+  extends UIComponentProps<BoxProps>,
     ContentComponentProps,
     ChildrenComponentProps {}
 
 /**
- * A Slot is a basic component (no default styles)
+ * A Box is a basic component (no default styles)
  */
-const Slot: CreateComponentReturnType<ReactProps<SlotProps>> & {
-  create?: Function
-} = createComponent<SlotProps>({
-  displayName: 'Slot',
+const Box: CreateComponentReturnType<ReactProps<BoxProps>> = createComponent<BoxProps>({
+  displayName: 'Box',
 
-  className: 'ui-slot',
+  className: 'ui-box',
 
   propTypes: {
     ...commonPropTypes.createCommon(),
@@ -41,6 +39,6 @@ const Slot: CreateComponentReturnType<ReactProps<SlotProps>> & {
   },
 })
 
-Slot.create = createShorthandFactory(Slot)
+Box.create = createShorthandFactory(Box)
 
-export default Slot
+export default Box

src/components/Button/Button.tsx

@@ -14,7 +14,7 @@ import {
   commonPropTypes,
 } from '../../lib'
 import Icon from '../Icon/Icon'
-import Slot from '../Slot/Slot'
+import Box from '../Box/Box'
 import { buttonBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
 import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../../types/utils'
@@ -141,7 +141,7 @@ class Button extends UIComponent<ReactProps<ButtonProps>, ButtonState> {
       >
         {hasChildren && children}
         {!hasChildren && iconPosition !== 'after' && this.renderIcon(variables, styles)}
-        {Slot.create(!hasChildren && content, {
+        {Box.create(!hasChildren && content, {
           defaultProps: { as: 'span', className: classes.content },
         })}
         {!hasChildren && iconPosition === 'after' && this.renderIcon(variables, styles)}

src/components/Chat/ChatItem.tsx

@@ -12,7 +12,7 @@ import {
   commonPropTypes,
   customPropTypes,
 } from '../../lib'
-import Slot from '../Slot/Slot'
+import Box from '../Box/Box'
 import { ComponentSlotStylesPrepared } from '../../themes/types'
 
 export interface ChatItemProps extends UIComponentProps, ChildrenComponentProps {
@@ -63,12 +63,12 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
 
   private renderChatItem(styles: ComponentSlotStylesPrepared) {
     const { message, gutter, gutterPosition } = this.props
-    const gutterElement = gutter && Slot.create(gutter, { defaultProps: { styles: styles.gutter } })
+    const gutterElement = gutter && Box.create(gutter, { defaultProps: { styles: styles.gutter } })
 
     return (
       <>
         {gutterPosition === 'start' && gutterElement}
-        {Slot.create(message, { defaultProps: { styles: styles.message } })}
+        {Box.create(message, { defaultProps: { styles: styles.message } })}
         {gutterPosition === 'end' && gutterElement}
       </>
     )

src/components/Chat/ChatMessage.tsx

@@ -20,7 +20,7 @@ import { chatMessageBehavior } from '../../lib/accessibility'
 import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
 
 import Text from '../Text/Text'
-import Slot from '../Slot/Slot'
+import Box from '../Box/Box'
 
 export interface ChatMessageProps
   extends UIComponentProps,
@@ -122,7 +122,7 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
             {Text.create(timestamp, {
               defaultProps: { size: 'small', styles: styles.timestamp, timestamp: true },
             })}
-            {Slot.create(content, { defaultProps: { styles: styles.content } })}
+            {Box.create(content, { defaultProps: { styles: styles.content } })}
           </>
         )}
       </ElementType>

src/components/Form/FormField.tsx

@@ -13,7 +13,7 @@ import {
 import { ReactProps, ShorthandValue } from '../../../types/utils'
 import Text from '../Text/Text'
 import Input from '../Input/Input'
-import Slot from '../Slot/Slot'
+import Box from '../Box/Box'
 
 export interface FormFieldProps extends UIComponentProps, ChildrenComponentProps {
   /** A control for the form field. */
@@ -94,7 +94,7 @@ class FormField extends UIComponent<ReactProps<FormFieldProps>, any> {
       },
     })
 
-    const controlElement = Slot.create(control || {}, {
+    const controlElement = Box.create(control || {}, {
       defaultProps: { required, id, name, type, styles: styles.control },
     })
 

src/components/Input/Input.tsx

@@ -16,7 +16,7 @@ import {
 import { ReactProps, ShorthandValue, ComponentEventHandler } from '../../../types/utils'
 import Icon from '../Icon/Icon'
 import Ref from '../Ref/Ref'
-import Slot from '../Slot/Slot'
+import Box from '../Box/Box'
 
 export interface InputProps extends UIComponentProps, ChildrenComponentProps {
   /** A property that will change the icon on the input and clear the input on click on Cancel. */
@@ -117,7 +117,7 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
     const { value = '' } = this.state
     const [htmlInputProps, restProps] = partitionHTMLProps(unhandledProps)
 
-    return Slot.create(wrapper, {
+    return Box.create(wrapper, {
       defaultProps: {
         className: cx(Input.className, className),
         children: (
@@ -128,7 +128,7 @@ class Input extends AutoControlledComponent<ReactProps<InputProps>, InputState>
                 handleRef(inputRef, inputElement)
               }}
             >
-              {Slot.create(input || type, {
+              {Box.create(input || type, {
                 defaultProps: {
                   ...htmlInputProps,
                   as: 'input',

src/components/Loader/Loader.tsx

@@ -12,7 +12,7 @@ import {
 import { loaderBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
 import { ReactProps, ShorthandValue } from '../../../types/utils'
-import Slot from '../Slot/Slot'
+import Box from '../Box/Box'
 
 export type LoaderPosition = 'above' | 'below' | 'start' | 'end'
 export type LoaderSize =
@@ -77,8 +77,8 @@ class Loader extends UIComponent<ReactProps<LoaderProps>> {
 
     return (
       <ElementType className={classes.root} {...accessibility.attributes.root} {...unhandledProps}>
-        {Slot.create(indicator, { defaultProps: { styles: styles.indicator } })}
-        {Slot.create(label, { defaultProps: { styles: styles.label } })}
+        {Box.create(indicator, { defaultProps: { styles: styles.indicator } })}
+        {Box.create(label, { defaultProps: { styles: styles.label } })}
       </ElementType>
     )
   }

src/components/Menu/MenuItem.tsx

@@ -18,7 +18,7 @@ import {
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Menu from '../Menu/Menu'
-import Slot from '../Slot/Slot'
+import Box from '../Box/Box'
 import { menuItemBehavior, submenuBehavior } from '../../lib/accessibility'
 import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types'
 import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../../types/utils'
@@ -225,7 +225,7 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
       ) : null
 
     if (wrapper) {
-      return Slot.create(wrapper, {
+      return Box.create(wrapper, {
         defaultProps: {
           className: cx('ui-menu__item__wrapper', classes.wrapper),
           ...accessibility.attributes.wrapper,

src/components/Segment/Segment.tsx

@@ -9,7 +9,7 @@ import {
   commonPropTypes,
 } from '../../lib'
 import { ReactProps, ShorthandValue } from '../../../types/utils'
-import Slot from '../Slot/Slot'
+import Box from '../Box/Box'
 
 export interface SegmentProps
   extends UIComponentProps<SegmentProps>,
@@ -43,7 +43,7 @@ class Segment extends UIComponent<ReactProps<SegmentProps>, any> {
 
     return (
       <ElementType {...unhandledProps} className={classes.root}>
-        {childrenExist(children) ? children : Slot.create(content)}
+        {childrenExist(children) ? children : Box.create(content)}
       </ElementType>
     )
   }

src/index.ts

@@ -16,6 +16,8 @@ export { default as Attachment, AttachmentProps } from './components/Attachment/
 
 export { default as Avatar, AvatarProps, AvatarPropsWithDefaults } from './components/Avatar/Avatar'
 
+export { default as Box, BoxProps } from './components/Box/Box'
+
 export { default as Button, ButtonProps, ButtonState } from './components/Button/Button'
 export { default as ButtonGroup, ButtonGroupProps } from './components/Button/ButtonGroup'
 

test/specs/commonTests/implementsWrapperProp.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { ReactWrapper } from 'enzyme'
 import { mountWithProvider as mount } from 'test/utils'
 
-import Slot from 'src/components/Slot/Slot'
+import Box from 'src/components/Box/Box'
 import { ReactProps, ShorthandValue } from 'utils'
 
 export interface ImplementsWrapperPropOptions {
@@ -18,7 +18,7 @@ const implementsWrapperProp = (
   Component: React.ComponentType<ReactProps<WrapperProps>>,
   options: ImplementsWrapperPropOptions,
 ) => {
-  const { wrapppedComponentSelector, WrapperComponent = Slot } = options
+  const { wrapppedComponentSelector, WrapperComponent = Box } = options
 
   const wrapperTests = (wrapper: ReactWrapper) => {
     expect(wrapper.length).toBeGreaterThan(0)

test/specs/components/Box/Box-test.ts

@@ -0,0 +1,8 @@
+import Box from 'src/components/Box/Box'
+import { isConformant } from 'test/specs/commonTests'
+
+describe('Box', () => {
+  xdescribe('is conformant', () => {
+    isConformant(Box)
+  })
+})

test/specs/components/Chat/ChatItem-test.tsx

@@ -1,12 +1,12 @@
 import { isConformant, implementsShorthandProp } from 'test/specs/commonTests'
 import ChatItem from 'src/components/Chat/ChatItem'
-import Slot from 'src/components/Slot/Slot'
+import Box from 'src/components/Box/Box'
 
 const chatItemImplementsShorthandProp = implementsShorthandProp(ChatItem)
 
 describe('ChatItem', () => {
   isConformant(ChatItem)
 
-  chatItemImplementsShorthandProp('gutter', Slot, { mapsValueToProp: 'children' })
-  chatItemImplementsShorthandProp('message', Slot, { mapsValueToProp: 'children' })
+  chatItemImplementsShorthandProp('gutter', Box, { mapsValueToProp: 'children' })
+  chatItemImplementsShorthandProp('message', Box, { mapsValueToProp: 'children' })
 })

test/specs/components/Chat/ChatMessage-test.tsx

@@ -4,7 +4,7 @@ import ChatMessage from 'src/components/Chat/ChatMessage'
 import { chatMessageBehavior } from 'src/lib/accessibility'
 import { AccessibilityDefinition } from 'src/lib/accessibility/types'
 import Text from 'src/components/Text/Text'
-import Slot from 'src/components/Slot/Slot'
+import Box from 'src/components/Box/Box'
 
 const chatMessageImplementsShorthandProp = implementsShorthandProp(ChatMessage)
 
@@ -13,7 +13,7 @@ describe('ChatMessage', () => {
 
   chatMessageImplementsShorthandProp('author', Text)
   chatMessageImplementsShorthandProp('timestamp', Text)
-  chatMessageImplementsShorthandProp('content', Slot, { mapsValueToProp: 'children' })
+  chatMessageImplementsShorthandProp('content', Box, { mapsValueToProp: 'children' })
 
   describe('accessibility', () => {
     handlesAccessibility(ChatMessage, {

test/specs/components/Form/FormField-test.tsx

@@ -4,7 +4,7 @@ import { ComponentClass } from 'enzyme'
 import { isConformant, implementsShorthandProp } from 'test/specs/commonTests'
 import { mountWithProvider } from 'test/utils'
 import { Button, RadioGroup, Input, Text, FormField } from 'src/index'
-import Slot from 'src/components/Slot/Slot'
+import Box from 'src/components/Box/Box'
 
 const formFieldImplementsShorthandProp = implementsShorthandProp(FormField)
 
@@ -15,7 +15,7 @@ describe('FormField', () => {
   isConformant(FormField)
   formFieldImplementsShorthandProp('label', Text)
   formFieldImplementsShorthandProp('message', Text)
-  formFieldImplementsShorthandProp('control', Slot, { mapsValueToProp: 'children' })
+  formFieldImplementsShorthandProp('control', Box, { mapsValueToProp: 'children' })
 
   it('renders the component control provided in the control shorthand prop', () => {
     const controls = [Button, Input, RadioGroup]

test/specs/components/Input/Input-test.tsx

@@ -10,7 +10,7 @@ import {
 
 import Input from 'src/components/Input/Input'
 import Icon from 'src/components/Icon/Icon'
-import Slot from 'src/components/Slot/Slot'
+import Box from 'src/components/Box/Box'
 
 const testValue = 'test value'
 const htmlInputAttrs = ['id', 'name', 'pattern', 'placeholder', 'type', 'value']
@@ -35,11 +35,11 @@ describe('Input', () => {
     })
   })
 
-  implementsShorthandProp(Input)('input', Slot, { mapsValueToProp: 'type' })
+  implementsShorthandProp(Input)('input', Box, { mapsValueToProp: 'type' })
   implementsShorthandProp(Input)('icon', Icon, { mapsValueToProp: 'name' })
 
   describe('wrapper', () => {
-    implementsShorthandProp(Input)('wrapper', Slot, { mapsValueToProp: 'children' })
+    implementsShorthandProp(Input)('wrapper', Box, { mapsValueToProp: 'children' })
     implementsWrapperProp(Input, { wrapppedComponentSelector: 'input' })
   })