Skip to main content

Styling Nested Abyss Components

  • Status: Proposed
  • Author: Michael White
  • Deciders: Abyss Mobile Team
  • Date: 08/02/2024

Context​

All Abyss components utilize the useAbyssProps hook that allows passing styles to nested styled components through its returned callback function, typically named abyssProps. This is done by passing in a string that describes the element, which we call a class. Each class has the string 'abyss-' appended to it. Often times, we need to add our own Abyss components inside of an Abyss component. Because of this, the nested component becomes harder to style since it has its own classes. This becomes even more incredibly difficult when multiple component are nested inside of each other.

Decision​

Teams will be able to nest classes inside of other classes to add styles to nested components. As an example, if the Calendar is inside of the DateInput component, then the class 'abyss-date-input-calendar' can be attached to the component. Let's say we wanted to change forward month icon on the Calendar, we would be able to do this by passing styles like this:

<DateInput
  styles={{
    'abyss-date-input-calendar': {
      'abyss-calendar-forward-month-icon': {
        color: '$error1'
      }
    }
  }}
>

In addition to this, we will add functionality to this to create styles based on the state of the component. For example, if we are on the last available month, and had the code above, we would not be able to know that the icon is disabled. We can pass the state directly into the class:

// In Calendar.jsx
{...abyssProps('calendar-forward-month-icon', {
  state: { disabled: isDisabled }
})}

Then in the component we can create styles when that state is true

<DateInput
  styles={{
    'abyss-date-input-calendar': {
      'abyss-calendar-forward-month-icon': {
        color: '$error1'
        '&:disabled': {
          color: '$gray2'
        }
      }
    }
  }}
>

Consequences​

Pros​

  1. No changes to any existing classes

  2. Allow better validation in Typescript to understand which classes are available to be passed into various components.

Cons​

  1. Consuming teams won't have great knowledge on which classes are nested classes, outside of typescript.

Alternatives Considered​

  1. Pass the styles object in all components to allow styling from the original class name.

  2. Map classes from one Abyss component to another.

Revision History​

07/30/2024: Initial draft created

Table of Contents