layout-mode


--warhol-layout-mode allows you to relax some of Warhol's rules when it comes to component's dimensions and positioning. Consider to following use of three button components in a row that are implemented correctly:

<div class="row">
  <button class="button">First</button>
  <button class="button">Second</button>
  <button class="button">Third</button>
</div>

It is very common to introduce a bit of space around the elements with a rule like this:

.button:not(:last-child) {
  margin-right: 8px;
}

This will make the row of buttons look just fine, but will also make Warhol complain about either unexpected margins on the first two buttons or about a missing margin on the third button (depending on how the button component is defined in the pattern library). The same would happen if the button were grid items inside a parent with display: grid with the spacing introduced via grid-gap - Warhol would report unexpected grid-row properties on the button elements.

This is sort of obvious, as the whole idea behind components is to have all of their instances look identical and have equivalent styles, but it is debatable whether margins, transformations, grid placement or absolute positioning should count as part of a component's look.

A similar question arises with component's dimensions:

<button class="button">Standalone button</button>

<aside class="box">
  <button class="button">Button component inside a box</button>
</aside>

It is not unreasonable for component's sizes to depend on context. A standalone button may work best with its intrinsic size, but inside the confines of a surrounding box, a well-defined width might be the way to go:

/* normal button */
.button {
  color: black;
}

/* button in specific circumstances */
.box .button {
   width: 100%;
}

If width:100% is not part of the original component definition in the pattern library, Warhol will of course complain about an excess declaration. This is again sort of right, but not really helpful.

The directive --warhol-layout-mode relaxes Warhol's checks around properties for dimensions and/or positioning. The directive can take the following values:

  • any-offset disables all checks for all margin properties, position, top, left, right, bottom, transform, align-self and justify-self
  • any-context disables all checks for flex-basis, flex-grow, flex-shrink, grid-row-start, grid-row-end, grid-column-start, grid-column-end as well as display (to accommodate display: table-cell and the like)
  • any-dimensions disables all checks for width, min-width, max-width, height, min-height and max-height
  • Every combination of the above values combines the lists of their disabled properties, e.g. any-dimensions any-offset
  • exact (default value): resets to the standard behavior
  • initial: same as exact

Formal syntax: "exact" | [ "any-offset" || "any-dimensions" || "any-context" ] | "initial"

The property is not inherited by nested components.

To make Warhol accept some extra margins around some button components, you could add --warhol-layout-mode: any-offset to the definition of the button component in your pattern library. To allow an extra width declaration, add --warhol-layout-mode: any-dimensions. To support both, use either --warhol-layout-mode: any-offset any-dimensions or --warhol-layout-mode: any-dimensions any-offset. To make the button work as a flex or grid item, add any-context to the mix;

It is important to note that the directive only works on components (not on component children) and that the directive implements a very coarse filter that flags certain properties as not worth testing. Use with caution!

Join our Slack Community

Any question not answered yet? You want to get the latest information on Warhol and discuss new features? Join our Slack Community.