Empty state fix (segmentio#1286)

* Fix title color to be N700 instead of N900

* Remove secondary button from Empty State

* Remove secondaryCta prop from Empty State

* Fix typo for anchorCta

Co-authored-by: Allen Kleiner <[email protected]>

index.d.ts

@@ -979,15 +979,12 @@ export interface EmptyStateOwnProps {
  background?: 'light' | 'dark'
  /** the primary cta of the empty state */
  primaryCta?: React.ReactNode
- /** the secondary cta of the empty state */
- annchorCta?: React.ReactNode
  /** the link cta of the empty state */
- secondaryCta?: React.ReactNode
+ anchorCta?: React.ReactNode
 }
 
 export declare const EmptyState: React.FC<EmptyStateOwnProps> & {
  PrimaryButton: typeof Button
- SecondaryButton: typeof Button
  LinkButton: typeof Link
 }
 

src/empty-states/__tests__/EmptyState.test.js

@@ -54,18 +54,6 @@ describe('Empty States', () => {
  expect(getByRole('button', { name: 'Primary Action' })).toBeVisible()
  })
 
- it('should render secondary button when passed in', () => {
- const { getByRole } = render(
- <EmptyState
- title="My Empty States"
- icon={<LockIcon color={defaultTheme.tokens.colors.gray500} />}
- iconBgColor={defaultTheme.tokens.colors.gray200}
- secondaryCta={<EmptyState.SecondaryButton>Secondary Action</EmptyState.SecondaryButton>}
- />
- )
- expect(getByRole('button', { name: 'Secondary Action' })).toBeVisible()
- })
-
  it('should render link button when passed in', () => {
  const { getByRole } = render(
  <EmptyState

src/empty-states/fixtures/BasicExample.js

@@ -17,7 +17,6 @@ const BasicExample = () => {
  iconBgColor={colors.orange100}
  description="If you believe you should have accesss to this page, please check with your Workspace Owner or request access below."
  primaryCta={<EmptyState.PrimaryButton>Request Access</EmptyState.PrimaryButton>}
- secondaryCta={<EmptyState.SecondaryButton>Do Something Else</EmptyState.SecondaryButton>}
  />
  </Pane>
  )

src/empty-states/src/EmptyState.js

@@ -15,10 +15,9 @@ const HorizontalOrientation = memo(function HorizontalOrientation({
  icon,
  iconBgColor,
  primaryCta,
- secondaryCta,
  title
 }) {
- const hasFooter = primaryCta || secondaryCta || anchorCta
+ const hasFooter = primaryCta || anchorCta
  const { colors } = useTheme()
 
  const backgroundColor = background === 'light' ? 'white' : colors.gray75
@@ -48,20 +47,19 @@ const HorizontalOrientation = memo(function HorizontalOrientation({
  </Pane>
  </Pane>
  <Pane display="flex" flexDirection="column" paddingRight={majorScale(6)}>
- <Heading size={500}>{title}</Heading>
+ <Heading size={500} color={colors.gray700}>
+ {title}
+ </Heading>
  {description && (
  <Paragraph color="muted" marginTop={majorScale(2)}>
  {description}
  </Paragraph>
  )}
  {hasFooter && (
  <Pane marginTop={majorScale(5)} display="flex">
- {primaryCta && React.cloneElement(primaryCta, { marginRight: majorScale(2) })}
- {secondaryCta}
- {(primaryCta || secondaryCta) &&
- anchorCta &&
- React.cloneElement(anchorCta, { marginLeft: majorScale(2) })}
- {!primaryCta && !secondaryCta && anchorCta}
+ {primaryCta}
+ {primaryCta && anchorCta && React.cloneElement(anchorCta, { marginLeft: majorScale(4) })}
+ {!primaryCta && anchorCta}
  </Pane>
  )}
  </Pane>
@@ -109,10 +107,10 @@ const VerticalOrientation = memo(function VerticalOrientation({
  >
  {React.cloneElement(icon, { size: majorScale(3) })}
  </Pane>
- <Heading marginTop={majorScale(2)} textAlign="center">
+ <Heading marginTop={majorScale(2)} textAlign="center" color={colors.gray700}>
  {title}
  </Heading>
- <Paragraph marginTop={majorScale(2)} textAlign="center">
+ <Paragraph marginTop={majorScale(2)} textAlign="center" color={colors.gray700}>
  {description}
  </Paragraph>
  {primaryCta && React.cloneElement(primaryCta, { marginTop: minorScale(5) })}
@@ -125,10 +123,6 @@ const PrimaryButton = props => {
  return <Button appearance="primary" {...props} />
 }
 
-const SecondaryButton = props => {
- return <Button appearance="minimal" {...props} />
-}
-
 const LinkButton = props => {
  return <Link {...props} size={300} lineHeight="34px" />
 }
@@ -141,7 +135,6 @@ const EmptyState = memo(function EmptyState({
  iconBgColor,
  orientation = 'horizontal',
  primaryCta,
- secondaryCta,
  title
 }) {
  if (orientation === 'vertical') {
@@ -164,15 +157,13 @@ const EmptyState = memo(function EmptyState({
  background={background}
  description={description}
  primaryCta={primaryCta}
- secondaryCta={secondaryCta}
  anchorCta={anchorCta}
  />
  )
  }
 })
 
 EmptyState.PrimaryButton = PrimaryButton
-EmptyState.SecondaryButton = SecondaryButton
 EmptyState.LinkButton = LinkButton
 
 EmptyState.propTypes = {
@@ -183,8 +174,7 @@ EmptyState.propTypes = {
  description: PropTypes.string,
  background: PropTypes.oneOf(['light', 'dark']),
  primaryCta: PropTypes.element,
- anchorCta: PropTypes.element,
- secondaryCta: PropTypes.element
+ anchorCta: PropTypes.element
 }
 
 export default EmptyState