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 component is defined in the pattern library). This is sort of obvious, as the whole idea behind components is to have all of their instances look identical, but it is debatable whether margins, transformations 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 components's sizes to depend on context. A standalone button may work best with its intrinsic size, but it might look better with a well-defined width in the confines of a surrounding box:

/* 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-dimensions disables all checks for width, min-width, max-width, height, min-height and max-height
  • any-offset any-dimensions and any-dimensions any-offset disable all checks on the properties mentioned above
  • exact (default value): resets to the standard behavior
  • initial: same as exact

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

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.

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