Atomic Layout - Element Queries API

README.md

Element Query API

This gist is a proposal for the Element Query API of the Atomic Layout library.

Motivation

Element queries (also known as "container queries") is an experimental media query declaration pattern, where the next set of CSS properties is applied to an element based on its own properties, as opposed to conventional viewport properties (min-width of a viewport).

I believe that first class Element Query support in Atomic Layout would bring a true element-centered layout development upfront, and encourage developers to think of a UI unit as a singleton that may evolve on its own.

Context

As much as I want to design a versatile API, it's necessary to acknowledge the distribution context of such API. In this case it's the Atomic Layout library. Therefore, the API suggested should work well with surrounding API, meaning it shouldn't contradict the established principles of the library and React.

The following information may be of your interest to understand the proposal better:

• Atomic Layout introduction (video, React Finland 2019)
• Responsive props API

ElementQueryAPI.jsx

import React from 'react'
import { Box, useElementQuery } from 'atomic-layout'

// Initially, I thought of EQ as a standalone query-value binding
// with the React component being an application surface.
// The problem with this is that the props assignment becomes abstracted,
// and it's not easy to scan which props are assigned to a component,
// and which comes from the EQ declared eslewhere.
const InitialIdea = () => {
  const styles = useElementQuery(
    {
      // Predicate properties of a container
      maxWidth: 700
    },
    {
      // Properties to apply on match
      padding: 10
    }
  )
 
  return (
    // Attaches all together
    <Box
      style={styles}
      padding={20} // ? Maybe there's another padding in place
    />
  )
}

// Following on, the props application surface can be moved to
// a React component itself, making all props assigned to a component
// explicit and readable.
// EQ in such case serves as a custom Responsive prop suffix,
// which blends nicely with the existing Responsive props API
// and globally declared responsive suffixes (default and custom ones).
const ExampleResponsiveProps = () => {
  // Hook encapsulates a query-predicate relation
  const boxQueries = useElementQuery({
    // Element query name (Responsive prop suffix)
    minimized: {
      // Predicate properties of a container
      maxWidth: 700
    }
  })
  
  return (
    <Box
      // Rendering represents query-value mapping.
      // Explicitly applied to a component.
      queries={boxQueries}
      // Acts as a component-level Responsive prop
      paddingMinimized={10}
    />
  )
}