Message

Components

Message

Messages are how we display user generated content provided by our network partners in app.

import { Message } from '@sproutsocial/racine'

<Message>
  <Message.Header>
    <MessageMeta messageType='Discovered via keyword "coffee"' density='small' />
    <Box display='flex' alignItems='center'>
      <Box mr={300}>
        <MessageDate color='text.subtext'>2 mins ago</MessageDate>
      </Box>
      <Message.Checkbox onChange={() => {}} checked={false} id='exampleMessage' />
    </Box>
  </Message.Header>
  <Message.Body>
    <Box mb={400} color='text.body'>
      Come in today and find last minute gifts for every coffee lover on your list. 🎁
    </Box>
    <TwitterGrid density='small' images={[dripCoffee, icedCoffee, womanCoffee, carafe]} />
    <Box display="flex" mt={350} alignItems="center">
      <Avatar 
        name="Nathan Sanders" 
        appearance="leaf" 
        src={nate}
        size="20px" 
      />
      <Text ml={300} color="neutral.800" fontSize={200}>
        by Nate Sanders
      </Text>
    </Box>
  </Message.Body>
  <Message.Footer>
    <Message.Button>
      <Icon mr={400} name='comment-alt-outline' />
      View Conversation
    </Message.Button>
    <Box mr={200}>
      <Message.Button>
        <Icon name='circle-check-outline' fixedWidth />
      </Message.Button>
      <Message.Button>
        <Icon name='tag-outline' fixedWidth />
      </Message.Button>
      <Message.Button>
        <Icon name='tasks-outline' fixedWidth />
      </Message.Button>
      <Message.Button>
        <Icon name='reply-outline' fixedWidth />
      </Message.Button>
    </Box>
  </Message.Footer>
</Message>

<Message>
  <Message.Header>
    <MessageMeta messageType='Discovered via keyword "coffee"' density='small' />
    <Box display='flex' alignItems='center'>
      <Box mr={300}>
        <MessageDate color='text.subtext'>2 mins ago</MessageDate>
      </Box>
      <Message.Checkbox onChange={() => {}} checked={false} id='exampleMessage' />
    </Box>
  </Message.Header>
  <Message.Body>
    <Box mb={400} color='text.body'>
      Come in today and find last minute gifts for every coffee lover on your list. 🎁
    </Box>
    <TwitterGrid density='small' images={[dripCoffee, icedCoffee, womanCoffee, carafe]} />
    <Box display="flex" mt={350} alignItems="center">
      <Avatar 
        name="Nathan Sanders" 
        appearance="leaf" 
        src={nate}
        size="20px" 
      />
      <Text ml={300} color="neutral.800" fontSize={200}>
        by Nate Sanders
      </Text>
    </Box>
  </Message.Body>
  <Message.Footer>
    <Message.Button>
      <Icon mr={400} name='comment-alt-outline' />
      View Conversation
    </Message.Button>
    <Box mr={200}>
      <Message.Button>
        <Icon name='circle-check-outline' fixedWidth />
      </Message.Button>
      <Message.Button>
        <Icon name='tag-outline' fixedWidth />
      </Message.Button>
      <Message.Button>
        <Icon name='tasks-outline' fixedWidth />
      </Message.Button>
      <Message.Button>
        <Icon name='reply-outline' fixedWidth />
      </Message.Button>
    </Box>
  </Message.Footer>
</Message>

Properties

Name	Type	Default	Description
`density`	`MESSAGE_DENSITIES`	`"small"`	Condensed, small, or large.
`children`	`React.Element<any> \| null`
`innerRef`	`"div"`
`borderColor`	`string`	`"border"`
`bg`	`string`	`"background.container"`
`indentContent`	`boolean`	`true`
`qa`	`Object`

Subcomponents

Message subcomponents are variations of existing components that have been customized for use within a message. Using these subcomponents will ensure your messages adhere to Seeds’ design standards.

Header

Message.Header leverages . It contains elements like message type, timestamp, and profile information.

You will notice that by default, message headers use a flex layout with justify-content set to space-between. Reserve the right most section of a message header for bulk actions when available.

Avatar

Message.Avatar makes use of and resizes based on the message’s density.

Body

Message.Body is a . It contains message content like message text, images, attribution, and metadata.

Footer

Message.Footer leverages . It contains message actions and in some cases data. It’s worth noting that by default, message footers use a flex layout with justify-content set to space-between.

Recipes

Message density

We can render three different sizes of a message using . In most message streams, density should be configurable by the user.

() => {
    const densities = {
      condensed: 'condensed',
      small: 'small',
      large: 'large'
    }

    const [density, setDensity] = useState(densities.small)
    const chooseDensity = (e) => setDensity(e.target.value)

    return(
      <Box>
        <Box display='flex' mb={500}>
          <Box width={1/3}>
            <Label htmlFor='messageDensity'>
              Select message density
            </Label>

            <Select id='messageDensity' name='density-control' value={density} onChange={chooseDensity}>
              <option value={densities.condensed}>{densities.condensed}</option>
              <option value={densities.small}>{densities.small}</option>
              <option value={densities.large}>{densities.large}</option>
            </Select>
          </Box>
        </Box>

        <Message density={density}>
          <Message.Header>
            <MessageMeta messageType='Tweet' density={density} />
            <Message.Checkbox />
          </Message.Header>
          <Message.Body>
            Complexity is a tax on everything we do. We strive to make our products, our processes, our policies and our operations as free from complexity as possible, allowing us the agility to grow, adapt and thrive. In our products, complexity is a tax on our customers, and we seek elegant solutions that enhance their work.
          </Message.Body>
          <Message.Footer>
            <Box></Box>
            <Box>
              <Message.Button>
                <Icon name='trash-can-outline' />
              </Message.Button>
              <Message.Button>
                <Icon name='duplicate-outline' />
              </Message.Button>
              <Message.Button>
                <Icon name='pencil-outline' />
              </Message.Button>
            </Box>
          </Message.Footer>
          <Message.Meta>
              A brief little message about a message!
          </Message.Meta>
        </Message>
      </Box>
    )
  }

() => {
    const densities = {
      condensed: 'condensed',
      small: 'small',
      large: 'large'
    }

    const [density, setDensity] = useState(densities.small)
    const chooseDensity = (e) => setDensity(e.target.value)

    return(
      <Box>
        <Box display='flex' mb={500}>
          <Box width={1/3}>
            <Label htmlFor='messageDensity'>
              Select message density
            </Label>

            <Select id='messageDensity' name='density-control' value={density} onChange={chooseDensity}>
              <option value={densities.condensed}>{densities.condensed}</option>
              <option value={densities.small}>{densities.small}</option>
              <option value={densities.large}>{densities.large}</option>
            </Select>
          </Box>
        </Box>

        <Message density={density}>
          <Message.Header>
            <MessageMeta messageType='Tweet' density={density} />
            <Message.Checkbox />
          </Message.Header>
          <Message.Body>
            Complexity is a tax on everything we do. We strive to make our products, our processes, our policies and our operations as free from complexity as possible, allowing us the agility to grow, adapt and thrive. In our products, complexity is a tax on our customers, and we seek elegant solutions that enhance their work.
          </Message.Body>
          <Message.Footer>
            <Box></Box>
            <Box>
              <Message.Button>
                <Icon name='trash-can-outline' />
              </Message.Button>
              <Message.Button>
                <Icon name='duplicate-outline' />
              </Message.Button>
              <Message.Button>
                <Icon name='pencil-outline' />
              </Message.Button>
            </Box>
          </Message.Footer>
          <Message.Meta>
              A brief little message about a message!
          </Message.Meta>
        </Message>
      </Box>
    )
  }

Editorial message with stats

Only uses 2 subcomponents: Message Body and Message Footer
Demonstrates interesting Message Body content variation
Uses left half of Message Footer for stats

<Message indentContent={false}>
  <Message.Body display='flex'>
    <Box flex='0 0 33%' pr={400}>
      <Image alt='The entryway at Sprout Social HQ' src={withPrefix('/example-photo.jpg')} height='auto' width='100%'/>
    </Box>
    <Box flex='0 0 67%' display='flex' flexDirection='column'>
      <Text fontSize={200} color='text.subtext' mb={300}><Text fontWeight='bold'>New York Times</Text> · 5 days ago</Text>
      <Text fontSize={300} color='text.headline' fontWeight='bold' mb={350}>11 Emerging Artists Redefining Abstract Painting</Text>
      <Text fontSize={200} color='text.body' mb={300}>A new generation of painters, all 40 years old or younger, are rethinking what we might call, for lack of a better term, abstraction.</Text>
      <Link href='#' fontSize={200}>Read full article</Link>
    </Box>
  </Message.Body>
  <Message.Footer>
    <Box display='flex' flex='1 0 33%' px={350} flexWrap='wrap' alignItems='center'>
      <Text mr={350} mt={200} color='text.body' fontSize={300} fontWeight='bold'>38.3k</Text>
      <Box mr={350}>
        <Icon mr={300} color='network.twitter' name='twitter' />
        <Text color='text.body' fontSize={100} fontWeight='bold'>20k</Text>
      </Box>
      <Box mr={350}>
        <Icon mr={300} color='network.facebook' name='facebook' />
        <Text color='text.body' fontSize={100} fontWeight='bold'>20.4k</Text>
      </Box>
      <Box>
        <Icon mr={300} color='network.pinterest' name='pinterest' />
        <Text color='text.body' fontSize={100} fontWeight='bold'>4k</Text>
      </Box>
    </Box>
    <Box display='flex' flexWrap='wrap' pr={300}>
      <Message.Button>
        <Icon name='dotdotdot' fixedWidth />
      </Message.Button>
      <Message.Button>
        <Icon mr={300} name='bambu-icon' />
        Send to Bambu
      </Message.Button>
      <Message.Button>
        <Icon mr={300} name='compose' />
        Send to Compose
      </Message.Button>
    </Box>
  </Message.Footer>
</Message>

<Message indentContent={false}>
  <Message.Body display='flex'>
    <Box flex='0 0 33%' pr={400}>
      <Image alt='The entryway at Sprout Social HQ' src={withPrefix('/example-photo.jpg')} height='auto' width='100%'/>
    </Box>
    <Box flex='0 0 67%' display='flex' flexDirection='column'>
      <Text fontSize={200} color='text.subtext' mb={300}><Text fontWeight='bold'>New York Times</Text> · 5 days ago</Text>
      <Text fontSize={300} color='text.headline' fontWeight='bold' mb={350}>11 Emerging Artists Redefining Abstract Painting</Text>
      <Text fontSize={200} color='text.body' mb={300}>A new generation of painters, all 40 years old or younger, are rethinking what we might call, for lack of a better term, abstraction.</Text>
      <Link href='#' fontSize={200}>Read full article</Link>
    </Box>
  </Message.Body>
  <Message.Footer>
    <Box display='flex' flex='1 0 33%' px={350} flexWrap='wrap' alignItems='center'>
      <Text mr={350} mt={200} color='text.body' fontSize={300} fontWeight='bold'>38.3k</Text>
      <Box mr={350}>
        <Icon mr={300} color='network.twitter' name='twitter' />
        <Text color='text.body' fontSize={100} fontWeight='bold'>20k</Text>
      </Box>
      <Box mr={350}>
        <Icon mr={300} color='network.facebook' name='facebook' />
        <Text color='text.body' fontSize={100} fontWeight='bold'>20.4k</Text>
      </Box>
      <Box>
        <Icon mr={300} color='network.pinterest' name='pinterest' />
        <Text color='text.body' fontSize={100} fontWeight='bold'>4k</Text>
      </Box>
    </Box>
    <Box display='flex' flexWrap='wrap' pr={300}>
      <Message.Button>
        <Icon name='dotdotdot' fixedWidth />
      </Message.Button>
      <Message.Button>
        <Icon mr={300} name='bambu-icon' />
        Send to Bambu
      </Message.Button>
      <Message.Button>
        <Icon mr={300} name='compose' />
        Send to Compose
      </Message.Button>
    </Box>
  </Message.Footer>
</Message>

Retweet with comment

Uses Message inside of Message
Standard, run of the mill usage of Message

<Message>
  <Message.Header>
    <MessageMeta messageType='Schedule message' density='small' />
    <MessageDate color='text.subtext'>2 mins ago</MessageDate>
  </Message.Header>
  <Message.Body>
    <Box mb={400} color='text.body'>
      Dang it, Cubs!
    </Box>
    <Message density={Message.DENSITIES.CONDENSED}>
      <Message.Header>
        <MessageMeta density='condensed'/>
      </Message.Header>
      <Message.Body>
        Commentary: #cubs have nobody to blame but themselves: <Link href='#'>http://t.co/SRS5CnQHy1</Link>
      </Message.Body>
    </Message>
  </Message.Body>
  <Message.Footer>
    <Message.Button>
      <Icon mr={400} name='comment-alt-outline' />
      Comment
    </Message.Button>
    <Box mr={200}>
      <Message.Button>
        <Icon name='trash-can-outline' fixedWidth />
      </Message.Button>
      <Message.Button>
        <Icon name='publishing-outline' fixedWidth />
      </Message.Button>
      <Message.Button>
        <Icon name='duplicate-outline' fixedWidth />
      </Message.Button>
      <Message.Button>
        <Icon name='internal-activity-outline' fixedWidth />
      </Message.Button>
      <Message.Button>
        <Icon name='message-preview-outline' fixedWidth />
      </Message.Button>
      <Message.Button>
        <Icon name='pencil-outline' fixedWidth />
      </Message.Button>
    </Box>
  </Message.Footer>
</Message>

<Message>
  <Message.Header>
    <MessageMeta messageType='Schedule message' density='small' />
    <MessageDate color='text.subtext'>2 mins ago</MessageDate>
  </Message.Header>
  <Message.Body>
    <Box mb={400} color='text.body'>
      Dang it, Cubs!
    </Box>
    <Message density={Message.DENSITIES.CONDENSED}>
      <Message.Header>
        <MessageMeta density='condensed'/>
      </Message.Header>
      <Message.Body>
        Commentary: #cubs have nobody to blame but themselves: <Link href='#'>http://t.co/SRS5CnQHy1</Link>
      </Message.Body>
    </Message>
  </Message.Body>
  <Message.Footer>
    <Message.Button>
      <Icon mr={400} name='comment-alt-outline' />
      Comment
    </Message.Button>
    <Box mr={200}>
      <Message.Button>
        <Icon name='trash-can-outline' fixedWidth />
      </Message.Button>
      <Message.Button>
        <Icon name='publishing-outline' fixedWidth />
      </Message.Button>
      <Message.Button>
        <Icon name='duplicate-outline' fixedWidth />
      </Message.Button>
      <Message.Button>
        <Icon name='internal-activity-outline' fixedWidth />
      </Message.Button>
      <Message.Button>
        <Icon name='message-preview-outline' fixedWidth />
      </Message.Button>
      <Message.Button>
        <Icon name='pencil-outline' fixedWidth />
      </Message.Button>
    </Box>
  </Message.Footer>
</Message>

Note

<Message bg='aqua.100' borderColor='aqua.400'>
  <Message.Header>
    <Box display='flex' alignItems='center'>
      <Icon mr={350} name='sticky-note' color='aqua.700' />
      <Text>Note</Text>
    </Box>
    <Text>1/10/2020</Text>
  </Message.Header>
  <Message.Body indentContent={false}>
    <Box display='flex' flexDirection='column'>
      <Text color='text.headline' fontSize={400} fontWeight='bold'>Headline</Text>
      <Text mt={350} color='text.body'>This is a note with very important information regarding something noteworthy.</Text>
    </Box>
  </Message.Body>
  <Message.Footer ml={350} indentContent={false}>
    <Box display='flex' alignItems='center'>
      <Avatar 
        name='Nathan Sanders'
        appearance='leaf'
        size='20px'
        mr={300}
      />
      <Text fontSize={200}>by Nate Sanders</Text>
    </Box>
    <Box>
      <Message.Button>
        <Icon name='trash-can-outline' />
      </Message.Button>
      <Message.Button>
        <Icon name='duplicate-outline' />
      </Message.Button>
      <Message.Button>
        <Icon name='pencil-outline' />
      </Message.Button>
    </Box>
  </Message.Footer>
</Message>

<Message bg='aqua.100' borderColor='aqua.400'>
  <Message.Header>
    <Box display='flex' alignItems='center'>
      <Icon mr={350} name='sticky-note' color='aqua.700' />
      <Text>Note</Text>
    </Box>
    <Text>1/10/2020</Text>
  </Message.Header>
  <Message.Body indentContent={false}>
    <Box display='flex' flexDirection='column'>
      <Text color='text.headline' fontSize={400} fontWeight='bold'>Headline</Text>
      <Text mt={350} color='text.body'>This is a note with very important information regarding something noteworthy.</Text>
    </Box>
  </Message.Body>
  <Message.Footer ml={350} indentContent={false}>
    <Box display='flex' alignItems='center'>
      <Avatar 
        name='Nathan Sanders'
        appearance='leaf'
        size='20px'
        mr={300}
      />
      <Text fontSize={200}>by Nate Sanders</Text>
    </Box>
    <Box>
      <Message.Button>
        <Icon name='trash-can-outline' />
      </Message.Button>
      <Message.Button>
        <Icon name='duplicate-outline' />
      </Message.Button>
      <Message.Button>
        <Icon name='pencil-outline' />
      </Message.Button>
    </Box>
  </Message.Footer>
</Message>