feat(empty-state): add EmptyStateActions and EmptyStateIllustration c…

…omponents (#1592)

packages/components/src/collection/collection-view.tsx

@@ -1,8 +1,11 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { Skeleton } from '../skeleton'
-import { EmptyState } from '../empty-state'
-import { Slot } from '../slot'
+import {
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateIllustration,
+} from '../empty-state'
 import {
   IconMagnifyingGlass,
   IconPlus,
@@ -73,15 +76,15 @@ export const CollectionView = forwardRef<HTMLDivElement, CollectionViewProps>(
     return (
       <div data-sl-collection-view ref={ref} {...otherProps}>
         <EmptyState size="large">
-          <Slot name="illustration" data-sl-collection-view-illustration>
+          <EmptyStateIllustration data-sl-collection-view-illustration>
             {getIcon(status)}
-          </Slot>
+          </EmptyStateIllustration>
           <Heading data-sl-collection-view-heading>{heading}</Heading>
           {description && (
             <Text data-sl-collection-view-description>{description}</Text>
           )}
           {action && (
-            <Slot>
+            <EmptyStateActions>
               <Button
                 data-sl-collection-view-action
                 onClick={handleAction}
@@ -90,7 +93,7 @@ export const CollectionView = forwardRef<HTMLDivElement, CollectionViewProps>(
                 {status === 'empty' && <IconPlus />}
                 {action}
               </Button>
-            </Slot>
+            </EmptyStateActions>
           )}
         </EmptyState>
       </div>

packages/components/src/empty-state/empty-state-actions.tsx

@@ -0,0 +1,29 @@
+import type { ComponentPropsWithoutRef } from 'react'
+import React from 'react'
+import { forwardRef } from '@vtex/shoreline-utils'
+import { Compose } from '@vtex/shoreline-primitives'
+
+/**
+ * Empty actions section
+ * @status stable
+ */
+export const EmptyStateActions = forwardRef<
+  HTMLDivElement,
+  EmptyStateActionsProps
+>(function EmptyStateActions(props, ref) {
+  const { asChild = false, ...otherProps } = props
+  const Comp = asChild ? Compose : 'div'
+
+  return <Comp data-sl-empty-state-actions ref={ref} {...otherProps} />
+})
+
+export interface EmptyStateActionsOptions {
+  /**
+   * Children composition
+   * @default false
+   */
+  asChild?: boolean
+}
+
+export type EmptyStateActionsProps = EmptyStateActionsOptions &
+  ComponentPropsWithoutRef<'div'>

packages/components/src/empty-state/empty-state-illustration.tsx

@@ -0,0 +1,29 @@
+import type { ComponentPropsWithoutRef } from 'react'
+import React from 'react'
+import { forwardRef } from '@vtex/shoreline-utils'
+import { Compose } from '@vtex/shoreline-primitives'
+
+/**
+ * EmptyState illustration section
+ * @status stable
+ */
+export const EmptyStateIllustration = forwardRef<
+  HTMLDivElement,
+  EmptyStateIllustrationProps
+>(function EmptyStateIllustration(props, ref) {
+  const { asChild = false, ...otherProps } = props
+  const Comp = asChild ? Compose : 'div'
+
+  return <Comp data-sl-empty-state-illustration ref={ref} {...otherProps} />
+})
+
+export interface EmptyStateIllustrationOptions {
+  /**
+   * Children composition
+   * @default false
+   */
+  asChild?: boolean
+}
+
+export type EmptyStateIllustrationProps = EmptyStateIllustrationOptions &
+  ComponentPropsWithoutRef<'div'>

packages/components/src/empty-state/empty-state.tsx

@@ -7,9 +7,9 @@ import React, { forwardRef } from 'react'
  * @example
  * <EmptyState>
  *  <Heading>Title goes here</Heading>
- *  <Slot name="actions">
+ *  <EmptyStateActions>
  *    <Button variant="primary">label</Button>
- *  </Slot>
+ *  </EmptyStateActions>
  * </EmptyState>
  * */
 export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(

packages/components/src/empty-state/index.ts

@@ -1 +1,3 @@
 export * from './empty-state'
+export * from './empty-state-actions'
+export * from './empty-state-illustration'

packages/components/src/empty-state/stories/empty-state.examples.stories.tsx

@@ -1,7 +1,7 @@
 import './styles.css'
 import React from 'react'
 
-import { EmptyState } from '../index'
+import { EmptyState, EmptyStateActions, EmptyStateIllustration } from '../index'
 import { Button } from '../../button'
 import { Heading } from '../../heading'
 import { Slot } from '../../slot'
@@ -23,13 +23,13 @@ export function FilterError() {
       <FilterTrigger>Status</FilterTrigger>
       <Popover data-sl-filter-popover>
         <EmptyState size="small" style={{ height: '18.25rem' }}>
-          <Slot name="illustration">
+          <EmptyStateIllustration>
             <IconWarningCircle color="var(--sl-color-red-8)" />
-          </Slot>
+          </EmptyStateIllustration>
           <Heading>Something went wrong</Heading>
-          <Slot name="actions">
+          <EmptyStateActions>
             <Button>Try again</Button>
-          </Slot>
+          </EmptyStateActions>
         </EmptyState>
       </Popover>
     </FilterProvider>
@@ -40,9 +40,9 @@ export function FilterNotFound() {
   return (
     <Filter label="Country" defaultValue={[]} setSearchValue={(value) => {}}>
       <EmptyState size="small" style={{ height: '15rem' }}>
-        <Slot name="illustration">
+        <EmptyStateIllustration>
           <IconMagnifyingGlass color="var(--sl-color-gray-8)" />
-        </Slot>
+        </EmptyStateIllustration>
         <Heading>No results found</Heading>
         <Text variant="body">Try using different terms.</Text>
       </EmptyState>

packages/components/src/empty-state/stories/empty-state.show.stories.tsx

@@ -1,10 +1,9 @@
 import './styles.css'
 import React from 'react'
 
-import { EmptyState } from '../index'
+import { EmptyState, EmptyStateActions, EmptyStateIllustration } from '../index'
 import { Button } from '../../button'
 import { Heading } from '../../heading'
-import { Slot } from '../../slot'
 import { Text } from '../../text'
 import { IconWarningCircle } from '@vtex/shoreline-icons'
 
@@ -16,25 +15,25 @@ export default {
   },
 }
 
-export function Show(props) {
+export function Show(props: { size: 'small' | 'medium' | 'large' }) {
   const { size } = props
 
   return (
     <div className="screen-container">
       <EmptyState size={size}>
-        <Slot name="illustration">
+        <EmptyStateIllustration>
           <IconWarningCircle />
-        </Slot>
+        </EmptyStateIllustration>
         <Heading>Title goes here</Heading>
         <Text>
           Before you write the description here please visit the Shoreline
           documentation website to learn more about this componente and its
           usage.
         </Text>
-        <Slot name="actions">
+        <EmptyStateActions>
           <Button>Label</Button>
           <Button variant="primary">Label</Button>
-        </Slot>
+        </EmptyStateActions>
       </EmptyState>
     </div>
   )

packages/components/src/filter/stories/filter.examples.stories.tsx

@@ -14,6 +14,7 @@ import { countries } from './countries'
 import { LocaleProvider } from '@vtex/shoreline-primitives'
 import { IconMagnifyingGlass } from '@vtex/shoreline-icons'
 import { EmptyState, Slot, Text, Heading } from '../..'
+import { EmptyStateIllustration } from '../../empty-state'
 
 export default {
   title: 'components/filter/examples',
@@ -107,9 +108,9 @@ export function WithCombobox() {
         ))
       ) : (
         <EmptyState size="small" style={{ height: '15rem' }}>
-          <Slot name="illustration">
+          <EmptyStateIllustration>
             <IconMagnifyingGlass color="var(--sl-color-gray-8)" />
-          </Slot>
+          </EmptyStateIllustration>
           <Heading>No results found</Heading>
           <Text variant="body">Try using different terms.</Text>
         </EmptyState>

packages/components/src/grid/stories/grid.show.stories.tsx

@@ -8,7 +8,7 @@ export default {
 
 const cellStyle = style({
   backgroundColor: '$color-blue-3',
-  borderRadius: '$border-radius-medium',
+  borderRadius: '$border-radius-2',
   width: '100%',
   height: '3.5rem',
 })

packages/components/src/index.ts

@@ -67,8 +67,16 @@ export { ContextualHelp } from './contextual-help'
 export type { ContextualHelpProps } from './contextual-help'
 export { Divider } from './divider'
 export type { DividerProps } from './divider'
-export { EmptyState } from './empty-state'
-export type { EmptyStateProps } from './empty-state'
+export {
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateIllustration,
+} from './empty-state'
+export type {
+  EmptyStateProps,
+  EmptyStateActionsProps,
+  EmptyStateIllustrationProps,
+} from './empty-state'
 export {
   Field,
   FieldCharCounter,

packages/components/src/stack/stories/stack.show.stories.tsx

@@ -9,7 +9,7 @@ export default {
 
 const itemStyle = style({
   background: '$color-blue-3',
-  borderRadius: '$border-radius-medium',
+  borderRadius: '$border-radius-2',
   width: '5rem',
   height: '3rem',
   display: 'grid',

packages/docs/components/preview/preview.tsx

@@ -16,7 +16,6 @@ import {
   SelectItemCheck,
   Tooltip,
   Flex,
-  Slot,
   IconButton,
   IconCode,
 } from '@vtex/shoreline'
@@ -57,10 +56,10 @@ export function Preview(props: Props) {
               width: '100%',
             }}
           >
-            <Slot>
+            <div>
               <Tab id="preview">Preview</Tab>
               <Tab id="code">Code</Tab>
-            </Slot>
+            </div>
             <Flex gap="$space-1">
               <SelectProvider
                 value={theme}

packages/docs/examples/empty-state.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
-import { Button, EmptyState, Heading, Slot } from '@vtex/shoreline'
+import { Button, EmptyState, Heading, EmptyStateActions } from '@vtex/shoreline'
 
 export default function Example() {
   return (
     <EmptyState>
       <Heading>Title goes here</Heading>
-      <Slot name="actions">
+      <EmptyStateActions>
         <Button variant="primary">label</Button>
-      </Slot>
+      </EmptyStateActions>
     </EmptyState>
   )
 }

packages/docs/pages/components/empty-state/_meta.json

@@ -0,0 +1,4 @@
+{
+  "empty-state-actions": "EmptyStateActions",
+  "empty-state-illustration": "EmptyStateIllustration"
+}

packages/docs/pages/components/empty-state/empty-state-actions.mdx

@@ -0,0 +1,7 @@
+# EmptyStateActions
+
+<ComponentDescription name="empty-state-actions" />
+
+## Optional props
+
+<PropsDocs name="empty-state-actions" />

packages/docs/pages/components/empty-state/empty-state-illustration.mdx

@@ -0,0 +1,7 @@
+# EmptyStateIllustration
+
+<ComponentDescription name="empty-state-illustration" />
+
+## Optional props
+
+<PropsDocs name="empty-state-illustration" />

packages/docs/pages/components/page/page-header-row.mdx

@@ -0,0 +1,17 @@
+# API Reference
+
+<ComponentDescription name="page-header-row" />
+
+```jsx
+<Page>
+  <PageHeader>
+    <PageHeaderRow>
+      <PageHeading>Title</PageHeading>
+    </PageHeaderRow>
+  </PageHeader>
+</Page>
+```
+
+## Optional props
+
+<PropsDocs name="page-header-row" />

packages/docs/scripts/build-props.mjs

@@ -47,6 +47,8 @@ const files = [
   getPath('components', 'contextual-help', 'contextual-help'),
   getPath('components', 'divider', 'divider'),
   getPath('components', 'empty-state', 'empty-state'),
+  getPath('components', 'empty-state', 'empty-state-actions'),
+  getPath('components', 'empty-state', 'empty-state-illustration'),
   getPath('components', 'field', 'field'),
   getPath('components', 'field', 'field-provider'),
   getPath('components', 'field', 'field-error'),
@@ -86,6 +88,7 @@ const files = [
   getPath('components', 'page', 'page'),
   getPath('components', 'page', 'page-heading'),
   getPath('components', 'page', 'page-header'),
+  getPath('components', 'page', 'page-header-row'),
   getPath('components', 'page', 'page-content'),
   getPath('components', 'pagination', 'pagination'),
   getPath('components', 'popover', 'popover'),

packages/shoreline/src/index.ts

@@ -23,6 +23,8 @@ export {
   ContextualHelp,
   Divider,
   EmptyState,
+  EmptyStateActions,
+  EmptyStateIllustration,
   Field,
   FieldCharCounter,
   FieldContext,
@@ -148,6 +150,8 @@ export type {
   ContextualHelpProps,
   DividerProps,
   EmptyStateProps,
+  EmptyStateActionsProps,
+  EmptyStateIllustrationProps,
   FieldCharCounterProps,
   FieldContextType,
   FieldDescriptionProps,

packages/theme-sunrise/src/components/empty-state.scss

@@ -75,14 +75,14 @@
     }
   }
 
-  [data-sl-slot='actions'] {
+  [data-sl-empty-state-actions] {
     margin-top: var(--sl-space-2);
     display: flex;
     flex-direction: var(--sl-empty-actions-direction);
     gap: var(--sl-empty-state-actions-gap);
   }
 
-  [data-sl-slot='illustration'] {
+  [data-sl-empty-state-illustration] {
     height: var(--sl-empty-state-illustration-size);
     width: var(--sl-empty-state-illustration-size);
     margin-bottom: var(--sl-space-3);