Contrib.social

Add a prefix property to styles

Open on Drupal.org →
Created on 22 January 2023, almost 2 years ago
Updated 24 January 2023, almost 2 years ago

Problem/Motivation

Styles option are long, complicated, and risk prone because they carry the full HTML class name instead of the specific part.

Example (ui_suite_material):

typography:
  label: Typography
  options:
    mdc-typography--headline1: 
      label: Headline 1
      description: The largest text on the screen, reserved for short, important text or numerals.
    mdc-typography--headline2: Headline 2
    mdc-typography--headline3: Headline 3
    mdc-typography--subtitle1: 
      label: Subtitle 1
      description: Smaller than headline, reserved for medium-emphasis text that is shorter in length.

Example (ui_suite_protocol):

title:
  label: Title
  options:
    mzp-u-title-xs: Extra Small
    mzp-u-title-sm: Small
    mzp-u-title-md: Medium
    mzp-u-title-lg: Large
    mzp-u-title-xl: Extra Large

Example (DSFR):

spacing_margin_top:
  label: Margin Top
  options:
    fr-mt-0: 0
    fr-mt-auto: auto
    fr-mt-1v: 1v
    fr-mt-1w: 1w

Proposed resolution

Add a prefix property and concatenate it with the option ID before adding the class to teh render element.

Example (ui_suite_material):

typography:
  label: Typography
  prefix: "mdc-typography--"
  options:
    headline1: 
      label: Headline 1
      description: The largest text on the screen, reserved for short, important text or numerals.
    headline2: Headline 2
    headline3: Headline 3
    subtitle1: 
      label: Subtitle 1
      description: Smaller than headline, reserved for medium-emphasis text that is shorter in length.

Example (ui_suite_protocol):

title:
  label: Title
  prefix: "mzp-u-title-"
  options:
    xs: Extra Small
    sm: Small
    md: Medium
    lg: Large
    xl: Extra Large

Example (DSFR):

spacing_margin_top:
  label: Margin Top
  prefix: "fr-mt-"
  options:
    0: 0
    auto: auto
    1v: 1v
    1w: 1w

API changes

No breaking change by itself. Can be added safely to a new minor release.

However, theme authors need to be careful to not introduce compatibility breaks themselves because using the new prefix property will have an impact on existing options ID.

✨ Feature request
Status

Closed: works as designed

Version

1.0

Component

Code

Created by

🇫🇷France pdureau Paris

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Issue created by @pdureau
  • Status changed to Postponed: needs info almost 2 years ago
  • Comment almost 2 years ago →
    🇫🇷France Grimreaper France 🇫🇷

    Hi,

    I do not see the interest of this feature request?

    Styles option are long

    It depends on your design system, and exactly what is the problem with that?

    Styles option are complicated

    Same answer, it depends on the design system. I don't see how a string is complicated?

    Styles option are risk prone because they carry the full HTML class name instead of the specific part

    If the problem you think about is when writing styles, IDEs allows to edit multiple lines simultaneously.

    Add a prefix property and concatenate it with the option ID before adding the class to teh render element.

    This would require to load plugin definitions during rendering while currently we can avoid it. I would prefer saving the concatenated version in config.

  • Status changed to Closed: works as designed almost 2 years ago
contrib.social Blog FAQ Discussions
Production build 0.71.5 2024