feat(theming): exporting slot's classNames form components

CHANGELOG.md

@@ -19,9 +19,11 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### BREAKING CHANGES
 - Rename `combobox` to `root` in `dropdownSearchInputStyles` @layershifter ([#816](https://github.com/stardust-ui/react/pull/816))
+- Renamed class names for the slots inside the `ItemLayout` component @mnajdova ([#827](https://github.com/stardust-ui/react/pull/827)) 
 
 ### Features
 - Accessibility for menu divider @jurokapsiar ([#822](https://github.com/stardust-ui/react/pull/822))
+- Added slot class names in `ChatMessage`, `ChatItem`, `Dropdown`, `ItemLayout`, `Layout`, `MenuItem` @mnajdova ([#827](https://github.com/stardust-ui/react/pull/827))
 
 ### Fixes
 - Fix `Dropdown` component styles regression @Bugaa92 ([#824](https://github.com/stardust-ui/react/pull/824))

packages/react/src/components/Chat/ChatItem.tsx

@@ -16,6 +16,11 @@ import {
 import Box from '../Box/Box'
 import { ComponentSlotStylesPrepared } from '../../themes/types'
 
+export interface ChatItemSlotClassNames {
+  message: string
+  gutter: string
+}
+
 export interface ChatItemProps extends UIComponentProps, ChildrenComponentProps {
   /** Controls item's relation to other chat items. */
   attached?: boolean | 'top' | 'bottom'
@@ -37,6 +42,7 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
   static className = 'ui-chat__item'
   static create: Function
   static displayName = 'ChatItem'
+  static slotClassNames: ChatItemSlotClassNames
 
   static propTypes = {
     ...commonPropTypes.createCommon({ content: false }),
@@ -73,18 +79,28 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
 
   private renderChatItem(styles: ComponentSlotStylesPrepared) {
     const { message, gutter, contentPosition } = this.props
-    const gutterElement = gutter && Box.create(gutter, { defaultProps: { styles: styles.gutter } })
+    const gutterElement =
+      gutter &&
+      Box.create(gutter, {
+        defaultProps: { className: ChatItem.slotClassNames.gutter, styles: styles.gutter },
+      })
 
     return (
       <>
         {contentPosition === 'start' && gutterElement}
-        {Box.create(message, { defaultProps: { styles: styles.message } })}
+        {Box.create(message, {
+          defaultProps: { className: ChatItem.slotClassNames.message, styles: styles.message },
+        })}
         {contentPosition === 'end' && gutterElement}
       </>
     )
   }
 }
 
 ChatItem.create = createShorthandFactory(ChatItem, 'message')
+ChatItem.slotClassNames = {
+  message: `${ChatItem.className}__message`,
+  gutter: `${ChatItem.className}__gutter`,
+}
 
 export default ChatItem

packages/react/src/components/Chat/ChatMessage.tsx

@@ -26,6 +26,7 @@ import Box from '../Box/Box'
 export interface ChatMessageSlotClassNames {
   author: string
   timestamp: string
+  content: string
 }
 
 export interface ChatMessageProps
@@ -141,7 +142,12 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
                 className: ChatMessage.slotClassNames.timestamp,
               },
             })}
-            {Box.create(content, { defaultProps: { styles: styles.content } })}
+            {Box.create(content, {
+              defaultProps: {
+                className: ChatMessage.slotClassNames.content,
+                styles: styles.content,
+              },
+            })}
           </>
         )}
       </ElementType>
@@ -153,6 +159,7 @@ ChatMessage.create = createShorthandFactory(ChatMessage, 'content')
 ChatMessage.slotClassNames = {
   author: `${ChatMessage.className}__author`,
   timestamp: `${ChatMessage.className}__timestamp`,
+  content: `${ChatMessage.className}__content`,
 }
 
 export default ChatMessage

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -39,6 +39,11 @@ import Button from '../Button/Button'
 import { screenReaderContainerStyles } from '../../lib/accessibility/Styles/accessibilityStyles'
 import ListItem from '../List/ListItem'
 
+export interface DropdownSlotClassNames {
+  container: string
+  selectedItems: string
+}
+
 export interface DropdownProps extends UIComponentProps<DropdownProps, DropdownState> {
   /** The initial value for the search query, if the dropdown is also a search. */
   defaultSearchQuery?: string
@@ -158,10 +163,7 @@ export interface DropdownState {
  * @accessibility
  * Implements ARIA collapsible Listbox design pattern, uses aria-live to announce state changes.
  */
-export default class Dropdown extends AutoControlledComponent<
-  Extendable<DropdownProps>,
-  DropdownState
-> {
+class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, DropdownState> {
   private buttonRef = React.createRef<HTMLElement>()
   private inputRef = React.createRef<HTMLElement>()
   private listRef = React.createRef<HTMLElement>()
@@ -171,6 +173,8 @@ export default class Dropdown extends AutoControlledComponent<
 
   static className = 'ui-dropdown'
 
+  static slotClassNames: DropdownSlotClassNames
+
   static propTypes = {
     ...commonPropTypes.createCommon({
       children: false,
@@ -284,12 +288,12 @@ export default class Dropdown extends AutoControlledComponent<
             return (
               <Ref innerRef={innerRef}>
                 <div
-                  className={cx(`${Dropdown.className}__container`, classes.container)}
+                  className={cx(Dropdown.slotClassNames.container, classes.container)}
                   onClick={multiple ? this.handleContainerClick.bind(this, isOpen) : undefined}
                 >
                   <div
                     ref={this.selectedItemsRef}
-                    className={cx(`${Dropdown.className}__selected-items`, classes.selectedItems)}
+                    className={cx(Dropdown.slotClassNames.selectedItems, classes.selectedItems)}
                   >
                     {multiple && this.renderSelectedItems()}
                     {search
@@ -782,3 +786,10 @@ export default class Dropdown extends AutoControlledComponent<
     _.invoke(this.props, 'onSelectedChange', {}, { ...this.props, value })
   }
 }
+
+Dropdown.slotClassNames = {
+  container: `${Dropdown.className}__container`,
+  selectedItems: `${Dropdown.className}__selected-items`,
+}
+
+export default Dropdown

packages/react/src/components/ItemLayout/ItemLayout.tsx

@@ -15,6 +15,16 @@ import Layout from '../Layout/Layout'
 import { ComponentSlotClasses, ICSSInJSStyle } from '../../themes/types'
 import { ReactProps } from '../../types'
 
+export interface ItemLayoutSlotClassNames {
+  header: string
+  headerMedia: string
+  main: string
+  content: string
+  contentMedia: string
+  media: string
+  endMedia: string
+}
+
 export interface ItemLayoutProps extends UIComponentProps, ContentComponentProps<any> {
   contentMedia?: any
   /** Toggle debug mode */
@@ -66,6 +76,8 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
 
   static className = 'ui-itemlayout'
 
+  static slotClassNames: ItemLayoutSlotClassNames
+
   static propTypes = {
     ...commonPropTypes.createCommon({
       children: false,
@@ -103,7 +115,7 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
 
       return (
         <div
-          className="ui-item-layout__main"
+          className={ItemLayout.slotClassNames.main}
           style={{
             gridTemplateRows: '1fr 1fr',
           }}
@@ -117,8 +129,8 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
     renderHeaderArea: (props, state, classes) => {
       const { debug, header, headerMedia, truncateHeader, headerCSS, headerMediaCSS } = props
 
-      const mergedClasses = cx('ui-item-layout__header', classes.header)
-      const mediaClasses = cx('ui-item-layout__headerMedia', classes.headerMedia)
+      const mergedClasses = cx(ItemLayout.slotClassNames.header, classes.header)
+      const mediaClasses = cx(ItemLayout.slotClassNames.headerMedia, classes.headerMedia)
 
       return !header && !headerMedia ? null : (
         <Layout
@@ -143,8 +155,8 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
     renderContentArea: (props, state, classes) => {
       const { debug, content, contentMedia, truncateContent, contentCSS, contentMediaCSS } = props
 
-      const mergedClasses = cx('ui-item-layout__content', classes.content)
-      const mediaClasses = cx('ui-item-layout__contentMedia', classes.contentMedia)
+      const mergedClasses = cx(ItemLayout.slotClassNames.content, classes.content)
+      const mediaClasses = cx(ItemLayout.slotClassNames.contentMedia, classes.contentMedia)
 
       return !content && !contentMedia ? null : (
         <Layout
@@ -175,8 +187,8 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
     const mainArea = renderMainArea(this.props, this.state, classes)
     const endArea = endMedia
 
-    const mergedMediaClasses = cx('ui-item-layout__media', classes.media)
-    const mergedEndMediaClasses = cx('ui-item-layout__endMedia', classes.endMedia)
+    const mergedMediaClasses = cx(ItemLayout.slotClassNames.media, classes.media)
+    const mergedEndMediaClasses = cx(ItemLayout.slotClassNames.endMedia, classes.endMedia)
 
     return (
       <Layout
@@ -210,6 +222,15 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
 }
 
 ItemLayout.create = createShorthandFactory(ItemLayout, 'content')
+ItemLayout.slotClassNames = {
+  header: `${ItemLayout.className}__header`,
+  headerMedia: `${ItemLayout.className}__headerMedia`,
+  main: `${ItemLayout.className}__main`,
+  content: `${ItemLayout.className}__content`,
+  contentMedia: `${ItemLayout.className}__contentMedia`,
+  media: `${ItemLayout.className}__media`,
+  endMedia: `${ItemLayout.className}__endMedia`,
+}
 
 export default ItemLayout
 

packages/react/src/components/Layout/Layout.tsx

@@ -6,6 +6,16 @@ import { UIComponent, UIComponentProps, commonPropTypes, rtlTextContainer } from
 import { ReactProps } from '../../types'
 import { ICSSInJSStyle } from '../../themes/types'
 
+export interface LayoutSlotClassNames {
+  start: string
+  main: string
+  end: string
+  gap: string
+  reducedStart: string
+  reducedMain: string
+  reducedEnd: string
+}
+
 export interface LayoutProps extends UIComponentProps {
   debug?: boolean
   renderStartArea?: (params: object) => React.ReactNode
@@ -47,6 +57,8 @@ class Layout extends UIComponent<ReactProps<LayoutProps>, any> {
 
   static displayName = 'Layout'
 
+  static slotClassNames: LayoutSlotClassNames
+
   static propTypes = {
     ...commonPropTypes.createCommon({
       children: false,
@@ -99,7 +111,7 @@ class Layout extends UIComponent<ReactProps<LayoutProps>, any> {
       return (
         start && (
           <div
-            className={cx('ui-layout__start', classes.start)}
+            className={cx(Layout.slotClassNames.start, classes.start)}
             {...rtlTextContainer.getAttributes({ forElements: [start] })}
           >
             {start}
@@ -112,7 +124,7 @@ class Layout extends UIComponent<ReactProps<LayoutProps>, any> {
       return (
         main && (
           <div
-            className={cx('ui-layout__main', classes.main)}
+            className={cx(Layout.slotClassNames.main, classes.main)}
             {...rtlTextContainer.getAttributes({ forElements: [main] })}
           >
             {main}
@@ -125,7 +137,7 @@ class Layout extends UIComponent<ReactProps<LayoutProps>, any> {
       return (
         end && (
           <div
-            className={cx('ui-layout__end', classes.end)}
+            className={cx(Layout.slotClassNames.end, classes.end)}
             {...rtlTextContainer.getAttributes({ forElements: [end] })}
           >
             {end}
@@ -137,7 +149,7 @@ class Layout extends UIComponent<ReactProps<LayoutProps>, any> {
     // Heads up!
     // IE11 Doesn't support grid-gap, insert virtual columns instead
     renderGap({ gap, classes }) {
-      return gap && <span className={cx('ui-layout__gap', classes.gap)} />
+      return gap && <span className={cx(Layout.slotClassNames.gap, classes.gap)} />
     },
   }
 
@@ -173,9 +185,9 @@ class Layout extends UIComponent<ReactProps<LayoutProps>, any> {
     if (reducing && isSingleArea) {
       const composedClasses = cx(
         classes.root,
-        startArea && 'ui-layout--reduced__start',
-        mainArea && 'ui-layout--reduced__main',
-        endArea && 'ui-layout--reduced__end',
+        startArea && Layout.slotClassNames.reducedStart,
+        mainArea && Layout.slotClassNames.reducedMain,
+        endArea && Layout.slotClassNames.reducedEnd,
       )
       return (
         <ElementType {...unhandledProps} className={composedClasses}>
@@ -196,5 +208,15 @@ class Layout extends UIComponent<ReactProps<LayoutProps>, any> {
   }
 }
 
+Layout.slotClassNames = {
+  start: `${Layout.className}__start`,
+  main: `${Layout.className}__main`,
+  end: `${Layout.className}__end`,
+  gap: `${Layout.className}__gap`,
+  reducedStart: `${Layout.className}--reduced__start`,
+  reducedMain: `${Layout.className}--reduced__main`,
+  reducedEnd: `${Layout.className}--reduced__end`,
+}
+
 export default Layout
 export type LayoutPropsWithDefaults = LayoutProps & typeof Layout.defaultProps

packages/react/src/components/Menu/MenuItem.tsx

@@ -27,6 +27,10 @@ import { focusAsync } from '../../lib/accessibility/FocusZone'
 import Ref from '../Ref/Ref'
 import Indicator from '../Indicator/Indicator'
 
+export interface MenuItemSlotClassNames {
+  wrapper: string
+}
+
 export interface MenuItemProps
   extends UIComponentProps,
     ChildrenComponentProps,
@@ -127,6 +131,8 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
 
   static create: Function
 
+  static slotClassNames: MenuItemSlotClassNames
+
   static propTypes = {
     ...commonPropTypes.createCommon(),
     accessibility: PropTypes.func,
@@ -244,7 +250,7 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
     if (wrapper) {
       return Box.create(wrapper, {
         defaultProps: {
-          className: cx('ui-menu__item__wrapper', classes.wrapper),
+          className: cx(MenuItem.slotClassNames.wrapper, classes.wrapper),
           ...accessibility.attributes.wrapper,
           ...accessibility.keyHandlers.wrapper,
         },
@@ -377,5 +383,8 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
 }
 
 MenuItem.create = createShorthandFactory(MenuItem, 'content')
+MenuItem.slotClassNames = {
+  wrapper: `${MenuItem.className}__wrapper`,
+}
 
 export default MenuItem