From: Mark Otto Date: Tue, 2 Jun 2026 15:25:14 +0000 (-0700) Subject: Make spacing docs less annoying to update (#42454) X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=42e2a8c21ac7d404a49fae72939808c993b1ea11;p=thirdparty%2Fbootstrap.git Make spacing docs less annoying to update (#42454) --- diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 13fae2ac28..1c875e1858 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -471,6 +471,7 @@ $utilities: map.merge( // scss-docs-end utils-flex // Margin utilities // scss-docs-start utils-spacing + // scss-docs-start utils-margin "margin": ( responsive: true, property: margin, @@ -513,7 +514,9 @@ $utilities: map.merge( class: ms, values: map-merge-multiple($spacers, $negative-spacers, (auto: auto)) ), + // scss-docs-end utils-margin // Padding utilities + // scss-docs-start utils-padding "padding": ( responsive: true, property: padding, @@ -556,7 +559,9 @@ $utilities: map.merge( class: ps, values: $spacers ), + // scss-docs-end utils-padding // Gap utility + // scss-docs-start utils-gap "gap": ( responsive: true, property: gap, @@ -575,6 +580,7 @@ $utilities: map.merge( class: column-gap, values: $spacers ), + // scss-docs-end utils-gap // scss-docs-end utils-spacing // scss-docs-start utils-space "space-x": ( diff --git a/site/src/components/shortcodes/SpacingNotation.astro b/site/src/components/shortcodes/SpacingNotation.astro new file mode 100644 index 0000000000..0bda0a1dca --- /dev/null +++ b/site/src/components/shortcodes/SpacingNotation.astro @@ -0,0 +1,132 @@ +--- +interface PropertyItem { + /** + * The class abbreviation, e.g. `p`, `m`, `gap`, `row-gap`. + */ + class: string + /** + * The CSS property the class sets, e.g. `padding`, `margin`, `gap`. + */ + property: string +} + +interface SideItem { + /** + * The side abbreviation, e.g. `t`, `b`, `x`, `y`. Use `blank` to render the + * "blank" (all sides) entry without code formatting. + */ + abbr: string + /** + * The trailing description rendered after the abbreviation. May contain HTML + * (e.g. `` spans) and is injected as-is. + */ + desc: string +} + +interface Props { + /** + * The spacing noun used throughout the copy, e.g. `gap`, `padding`, `margin`. + */ + noun: string + /** + * The class-name format, e.g. `{property}-{size}` or `{property}{sides}-{size}`. + */ + format: string + /** + * The "Where *property* is" list entries. + */ + properties: PropertyItem[] + /** + * The optional "Where *sides* is one of" list entries. Omit for utilities + * without sides (e.g. gap). + */ + sides?: SideItem[] + /** + * Appends the `auto` entry to the size list (margin only). + * @default false + */ + includeAuto?: boolean +} + +const { noun, format, properties, sides, includeAuto = false } = Astro.props + +const capitalizedNoun = noun.charAt(0).toUpperCase() + noun.slice(1) + +// Multipliers for sizes `1` through `9`, mirroring the default `$spacers` map. +const sizeValues = [ + '$spacer * .25', + '$spacer * .5', + '$spacer * .75', + '$spacer', + '$spacer * 1.25', + '$spacer * 1.5', + '$spacer * 2', + '$spacer * 2.5', + '$spacer * 3' +] +--- + +

+ {capitalizedNoun} utilities that apply to all breakpoints, from xs to 2xl, have no breakpoint + prefix in them. This is because those classes are applied from min-width: 0 and up, and thus are not + bound by a media query. The remaining breakpoints, however, do include a breakpoint prefix. +

+ +

+ The classes are named using the format {format} for xs and{' '} + {`{breakpoint}:${format}`} for sm, md, lg, xl, and{' '} + 2xl. +

+ +

Where property {properties.length > 1 ? 'is one of' : 'is'}:

+ + + +{ + sides && ( + +

+ Where sides is one of: +

+
    + {sides.map((side) => ( +
  • + {side.abbr === 'blank' ? 'blank' : {side.abbr}} - +
    • + ))} +
+ + ) +} + +

Where size is one of:

+ + + +

(You can add more sizes by adding entries to the $spacers Sass map variable.)

diff --git a/site/src/components/shortcodes/SpacingResponsive.astro b/site/src/components/shortcodes/SpacingResponsive.astro new file mode 100644 index 0000000000..b619680079 --- /dev/null +++ b/site/src/components/shortcodes/SpacingResponsive.astro @@ -0,0 +1,36 @@ +--- +import { getData } from '@libs/data' + +interface Props { + /** + * The class abbreviations to document, one `