Supporting Responsive Styles in Canvas Kit

[alanbsmith]

Overview

This discussion is an output of #1717. I'd like to share what we learned from talking to our consumers, and the direction we would like to move to help teams have better support for building responsive layouts. We're still weighing options and thinking through the developer experience, so this is a true discussion, not a definitive decision. Feedback is encouraged.

Most of our consumers rely on container size instead of viewport size to determine how much space they have to build responsive layouts. And most already have access to the height and width of their containers on initial render and resize. So instead of providing viewport-based tools, such as media-queries, for building responsive layouts, we should provide tools that allow teams to take that container size and easily adjust styles based on their current breakpoint range.

A Suggested API

Here's a simple sandbox example of something we could build that would be helpful. We could certainly build more on top, but this is a good starting point, I think.

TL;DR: In this example, we're using our useResizeObserver hook to provide the width of the Container. We're then passing that width to our ResponsiveContextProvider, which is comparing it to the breakpoints in the Canvas theme. Components can subscribe to the ResponsiveContextProvider by using the useResponsiveContext hook. This gives them access to abstracted variables such as isMedium that would allow teams to modify styles based on whether their current width falls within the breakpoint. Most consumers won't need to use the useResizeObserver because they already have the height and width of their containers, but they could if they need to.

In this example, I built a simple layout that only updates one style based on the breakpoint, but it's likely someone would want to update multiple styles. In which case, updating each style prop individually becomes a bit tedious. As an alternative option, you could use the css prop like this:

// Pseudo-code
const { isSmall } = useResponsiveContext();

const cardBaseStyles = {
  backgroundColor: colors.frenchVanilla100,
}

const smallStyles = {
  padding: space.xs,
  fontSize: type.levels.body.small,
}

const cardStyles = {
  ...cardBaseStyles,
  isSmall ? ...smallStyles : undefined,
}

Or we could provide a function that handled that complexity for consumers. In the pseudo-code below, we are opinionated about mobile-first styling. The styles would cascade from zero to extra large unless explicitly overwritten.

// this will return the styles based on the current width and breakpoint values.
const cardStyles = buildResponsiveStyles({
  base: {
  // breakpoint zero (and up) styles go here
  },
  s: {
    // breakpoint small (and up) styles go here
  },
  m: {
  // breakpoint medium (and up) styles go here
  },
  l: {
  // breakpoint large (and up) styles go here
  },
})

[vibdev]

The function is appealing just for code cleanliness. I wonder if Box/Layout Containers could have a prop that took the output of the function, that would be really clean.

const styles = {
  card: {},
  card_small: {},
  card_medium: {},
  heading: {},
  heading_small: {}
}
<Box css={...card, isSmall ? ...card.small : undefined, isMedium ? ...card.medium : undefined}>
  <Heading css={...heading, isSmall ? ...card.heading : undefined} /> 
</Box>

// ...vs...

const styles = {
  card: buildResponsiveStyles({
    s: {},
    m: {},
    l: {}
  )},
  heading: buildResponsiveStyles({
    s: {},
    l: {},
  }),
}
<Box rcss={styles.card} />
  <Heading rcss={styles.heading} />
</Box>