NEW ASK: Ability to Customize Size of Heading, Body, Detail, Button, etc.

[meganthecoder]

As part of the tiger team project, the Consonant team has asked for the ability to customize the heading, body, detail, and button sizes (and potentially others) for blocks. In the red group, this came up for the Aside and (new) Notification blocks, but I believe this is a general shift they'd like to make for many blocks. The idea is that these properties would be authorable and would override the styles for any variant or block size.

Currently

In most of our blocks, the text and button sizes are set by the block size. For example, an Aside (notification, medium) has a heading-s, and a Aside (notification, large) has a heading-l.

In the code, you might see these configs laying out the type sizes used along with decorateBlockText():

const blockConfig = {
  [split]: ['xl', 's', 'm'],
  [inline]: ['s', 'm'],
  [notification]: {
    [xsmall]: ['m', 'm'],
    [small]: ['m', 'm'],
    [medium]: ['s', 's'],
    [large]: ['l', 'm'],
  },
};

New Ask

Designers want the heading size, body size, detail size, and button size (and potentially others) to be individually authorable.

Overrides are already available in the Text block

• Heading: xs-xl heading
• Body: xs-xl body
• Detail: xs-xl detail
• Spacing: xs-xxxl spacing, xs-xxxl spacing top, xs-xxxl spacing bottom, no-spacing

For example: Text (xxxl-heading, s-detail, s-body, l-spacing-bottom)

(See kitchen sink)

Unknowns

The red tiger team still needs to nail down exactly what styles they want to be able to customize. Heading, body, detail, and button sizes seem to be fairly firm decisions, but I will update as I have more information.

While this request was made for the Aside block (and the new Notification block which will be broken out), I believe this is a general shift that the Consonant team wants to make across the board.

Community Input

Please respond with your thoughts, especially on the following:

• Like/dislike, especially any major objections
• If you know of any other blocks that this is requested for (I believe Marquee might be one?)
• Implementation ideas: I figured we'd follow the format that exists for the Text block but open to other thoughts
• Concerns

Small note: These aren't really variants on a block in the same way that "split" is a variant of the Aside block. If anyone has a different name we want to call them, please suggest it. Modifiers? Customizations?

Thanks for your input!

[ryanmparrish]

@meganthecoder - Thanks for the discussion

1. +1 :like:

2. Here's a listing of the blocks that use the shared function decorateTextOverrides(). [Brick, Hero-marquee, how-to, media, text]
   This essentially taps into our con-block typography tokens.

3. Note that the name space is ${size}-${type} and this then gets transformed into the opposite, ${type}-${size} to align w/ the classes. This was so that all authored utility classes follow the same convention.. size 1st.

4. Concerns, you can't designate different headings/body/detail/button sizes for different block content, these target all element types in a content area. (The hero-marquee has row-types, so these can be individually appended at the row, instead of a block level)

[rgclayton]

Additional blocks as @ryanmparrish mentioned
Brick, Hero-marquee, how-to, media, text

What about cards, merch cards, table, tabs and carousel? Should these be considered too?

When only a few blocks have an update like this it causes confusion for GWP on which blocks can do this and which can not.

Also keep in mind a consistent way to author these updates across all of the outlined blocks.

[meganthecoder]

Merch cards, "manual" cards, and tables are in-scope for this consonant project, but I'm not sure if these overrides have come up as requirements in the other team discussions. @ryanmparrish @colloyd ?

[ryanmparrish]

Gold team has discussed these overrides as a requirement for a new Editorial card block but it has not been discussed around other content were looking at (Marquee, Non-Merch Cards, Masonry, Galleries (ups), Action Gallery, Horizontal cards)

[meganthecoder]

They've also asked for authorable spacing (though there's some debate). It looks like the text block uses these .con-block styles.

milo/libs/styles/styles.css

Lines 566 to 570 in a60b132

	/* Con Block Utils */
	.con-block.xs-spacing { padding: var(--spacing-xs) 0; }
	.con-block.s-spacing { padding: var(--spacing-s) 0; }
	.con-block.m-spacing { padding: var(--spacing-m) 0; }
	.con-block.l-spacing { padding: var(--spacing-l) 0; }

But there's more to them than just spacing. Any suggestions here?

[ryanmparrish]

@meganthecoder Here's a little more info to add....

Any block that has the opt in class con-block can use these util classes. (I consider them different then typography overrides but similar concept)

These are the ones that are considered con-blocks currently.
[accordion, aside, hero-marquee, how-to, icon-block, marquee-anchors, media, quiz-marquee, quote, text, aside]

Some blocks have a set default spacing (top & bottom) and others have none (text). This gives us good block defaults w/ some extended author-ability that separates the concerns. Note: Some blocks do use a .has-bg class that will give the spacing (padding) on all sides and not just top/bottom when in the context of an ups grid. (based on if the bg row is set)

These are the con-block util considerations that come to mind

• Spacing: ${size}-Spacing, *-spacing top, *-spacing bottom, *-spacing-tablet, *-spacing-desktop, no-spacing (full viewport target and top or bottom or both class matrix)
• Spacing within grid.div[class*='-up'] .con-block.has-bg.no-*
• max-width-* (6, 8, 12, auto) - These target a blocks > .foreground