From 0be7f95db33d1907fe40344cde213d1df377c0a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Fri, 27 Oct 2023 16:02:26 +0200 Subject: [PATCH] List group: Branded --- .bundlewatch.config.json | 2 +- scss/_list-group.scss | 83 ++++++++++++---- scss/_maps.scss | 12 --- scss/_variables.scss | 40 ++++++-- scss/mixins/_list-group.scss | 30 ++++-- site/content/docs/5.3/about/team.md | 2 +- .../content/docs/5.3/components/list-group.md | 98 ++++++++++++------- site/content/docs/5.3/migration.md | 36 ++++++- 8 files changed, 217 insertions(+), 86 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index e2ea64a1ec..0f768dca58 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -26,7 +26,7 @@ }, { "path": "./dist/css/boosted.css", - "maxSize": "43.75 kB" + "maxSize": "44.0 kB" }, { "path": "./dist/css/boosted.min.css", diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 4de57f85ff..2943120c22 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -6,11 +6,14 @@ // scss-docs-start list-group-css-vars --#{$prefix}list-group-color: #{$list-group-color}; --#{$prefix}list-group-bg: #{$list-group-bg}; + --#{$prefix}list-group-font-weight: #{$list-group-font-weight}; // Boosted mod --#{$prefix}list-group-border-color: #{$list-group-border-color}; --#{$prefix}list-group-border-width: #{$list-group-border-width}; --#{$prefix}list-group-border-radius: #{$list-group-border-radius}; --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x}; --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y}; + --#{$prefix}list-group-item-icon-margin-x: #{subtract(var(--#{$prefix}list-group-item-padding-x), 5px)}; // Boosted mod + --#{$prefix}list-group-item-icon-size: #{$list-group-item-icon-size}; // Boosted mod --#{$prefix}list-group-action-color: #{$list-group-action-color}; --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color}; --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg}; @@ -30,6 +33,12 @@ padding-left: 0; // reset padding because ul and ol margin-bottom: 0; @include border-radius(var(--#{$prefix}list-group-border-radius)); + + // Boosted mod: specific badge for list-group + .badge { + --#{$prefix}badge-padding: .125rem .375rem; + --#{$prefix}badge-font-size: .875rem; + } } .list-group-numbered { @@ -37,6 +46,8 @@ counter-reset: section; > .list-group-item::before { + margin-right: subtract(var(--#{$prefix}list-group-item-padding-x), .0625rem); // Boosted mod + // Increments only this instance of the section counter content: counters(section, ".") ". "; counter-increment: section; @@ -64,8 +75,7 @@ &:active { color: var(--#{$prefix}list-group-action-active-color); - background-color: var(--#{$prefix}list-group-action-active-bg); - border-color: var(--#{$prefix}list-group-active-border-color); // Boosted mod + background: var(--#{$prefix}list-group-action-active-bg); // Boosted mod: bg over bg-color } } @@ -76,17 +86,20 @@ .list-group-item { position: relative; display: block; - padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x); + padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x) add(var(--#{$prefix}list-group-item-padding-y), 1px); // Boosted mod + font-weight: var(--#{$prefix}list-group-font-weight); // Boosted mod color: var(--#{$prefix}list-group-color); text-decoration: if($link-decoration == none, null, none); background-color: var(--#{$prefix}list-group-bg); border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color); + border-bottom-width: calc(var(--#{$prefix}list-group-border-width) / 2); // stylelint-disable-line function-disallowed-list &:first-child { @include border-top-radius(inherit); } &:last-child { + border-bottom-width: var(--#{$prefix}list-group-border-width); // Boosted mod @include border-bottom-radius(inherit); } @@ -101,7 +114,7 @@ &.active { z-index: 2; // Place active items above their siblings for proper border styling color: var(--#{$prefix}list-group-active-color); - background-color: var(--#{$prefix}list-group-active-bg); + background: var(--#{$prefix}list-group-active-bg); // Boosted mod: bg over bg-color border-color: var(--#{$prefix}list-group-active-border-color); } @@ -109,9 +122,9 @@ & + .list-group-item { border-top-width: 0; - &.active { - margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list - border-top-width: var(--#{$prefix}list-group-border-width); + &.active { // Boosted mod: border-width of 1px instead of 2px. + margin-top: calc(-1 * var(--#{$prefix}list-group-border-width) / 2); // stylelint-disable-line function-disallowed-list + border-top-width: calc(var(--#{$prefix}list-group-border-width) / 2); // stylelint-disable-line function-disallowed-list } } @@ -142,12 +155,18 @@ flex-direction: row; > .list-group-item { + // Boosted mod: remove default border-width + border-right-width: calc(var(--#{$prefix}list-group-border-width) / 2); // stylelint-disable-line function-disallowed-list + border-bottom-width: var(--#{$prefix}list-group-border-width); + // End mod + &:first-child { @include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius)); @include border-top-end-radius(0); } &:last-child { + border-right-width: var(--#{$prefix}list-group-border-width); // Boosted mod @include border-top-end-radius(var(--#{$prefix}list-group-border-radius)); @include border-bottom-start-radius(0); } @@ -160,9 +179,9 @@ border-top-width: var(--#{$prefix}list-group-border-width); border-left-width: 0; - &.active { - margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list - border-left-width: var(--#{$prefix}list-group-border-width); + &.active { // Boosted mod: border-width between is of 1px instead of 2px + margin-left: calc(-1 * var(--#{$prefix}list-group-border-width) / 2); // stylelint-disable-line function-disallowed-list + border-left-width: calc(var(--#{$prefix}list-group-border-width) / 2); // stylelint-disable-line function-disallowed-list } } } @@ -177,10 +196,13 @@ // useful within other components (e.g., cards). .list-group-flush { + // stylelint-disable-next-line function-disallowed-list + border-top: calc(var(--#{$prefix}list-group-border-width) / 2) solid var(--#{$prefix}list-group-border-color); // Boosted mod @include border-radius(0); > .list-group-item { - border-width: 0 0 var(--#{$prefix}list-group-border-width); + // stylelint-disable-next-line function-disallowed-list + border-width: 0 0 calc(var(--#{$prefix}list-group-border-width) / 2); // Boosted mod: border of 1px &:last-child { border-bottom-width: 0; @@ -189,7 +211,7 @@ } // -// Boosted mod: supporting colours only + ensure contrasts +// Boosted mod: the variants apply contextual icons when needed // // scss-docs-start list-group-modifiers @@ -197,18 +219,39 @@ // // Add modifier classes to change text and background color on individual items. // Organizationally, this must come after the `:hover` states. -@each $state, $value in $background-colors { // Boosted mod: instead of `@each $state in map-keys($theme-colors)` +@each $state, $value in $alert-colors { // Boosted mod: instead of `@each $state in map-keys($theme-colors)` .list-group-item-#{$state} { - --#{$prefix}list-group-color: #{color-contrast($value)}; // Boosted mod: instead of `var(--#{$prefix}#{state}-text)` - --#{$prefix}list-group-bg: #{$value}; // Boosted mod: instead of `var(--#{$prefix}#{$state}-bg-subtle)` + // Boosted mod: no `--#{$prefix}list-group-color` + // Boosted mod: no `--#{$prefix}list-group-bg` // Boosted mod: no `--#{$prefix}list-group-border-color` - --#{$prefix}list-group-action-hover-color: #{color-contrast($value)}; // Boosted mod: instead of `var(--#{$prefix}emphasis-color)`; - --#{$prefix}list-group-action-hover-bg: #{if(color-contrast($value) == $white, shade-color($value, 10%), tint-color($value, 10%))}; // Boosted mod: instead of `var(--#{$prefix}#{state}-border-subtle)`; + // Boosted mod: no `--#{$prefix}list-group-action-hover-color` + // Boosted mod: no `--#{$prefix}list-group-action-hover-bg` // Boosted mod: no `--#{$prefix}list-group-action-active-color` // Boosted mod: no `--#{$prefix}list-group-action-active-bg` // Boosted mod: no `--#{$prefix}list-group-active-color` // Boosted mod: no `--#{$prefix}list-group-active-bg` // Boosted mod: no `--#{$prefix}list-group-active-border-color` + + padding-right: calc(var(--#{$prefix}list-group-item-icon-margin-x) + var(--#{$prefix}list-group-item-icon-size) * 2); // stylelint-disable-line function-disallowed-list + + &::after { + position: absolute; + top: add(var(--#{$prefix}list-group-item-padding-y), 1px); + right: var(--#{$prefix}list-group-item-icon-margin-x); + width: var(--#{$prefix}list-group-item-icon-size); + height: var(--#{$prefix}list-group-item-icon-size); + content: ""; + background-color: var(--#{$prefix}link-color); // Find a better var once we fully implement dark mode ? + -webkit-mask: no-repeat map-get($alert-icons, $state); // stylelint-disable-line property-no-vendor-prefix + mask: no-repeat map-get($alert-icons, $state); + } + + &.disabled::after, + &:disabled::after, + &.list-group-item-action:active::after, + &.active::after { + background-color: currentcolor; + } } } // scss-docs-end list-group-modifiers @@ -221,6 +264,7 @@ --#{$prefix}list-group-action-color: #{$list-group-dark-action-color}; // Boosted mod --#{$prefix}list-group-action-hover-color: #{$list-group-dark-action-hover-color}; // Boosted mod --#{$prefix}list-group-action-active-color: #{$list-group-dark-action-active-color}; // Boosted mod + --#{$prefix}list-group-action-hover-bg: #{$list-group-dark-hover-bg}; // Boosted mod --#{$prefix}list-group-action-active-bg: #{$list-group-dark-action-active-bg}; // Boosted mod --#{$prefix}list-group-disabled-color: #{$list-group-dark-disabled-color}; // Boosted mod --#{$prefix}list-group-disabled-bg: #{$list-group-dark-disabled-bg}; // Boosted mod @@ -229,4 +273,9 @@ --#{$prefix}list-group-active-border-color: #{$list-group-dark-active-border-color}; // Boosted mod // scss-docs-end list-group-dark-css-vars } + +// Specific padding to be aligned in card component +.card .list-group { + --#{$prefix}list-group-item-padding-x: #{var(--#{$prefix}card-spacer-x)}; +} // End mod diff --git a/scss/_maps.scss b/scss/_maps.scss index bd8ba78ea7..0db510c299 100644 --- a/scss/_maps.scss +++ b/scss/_maps.scss @@ -45,18 +45,6 @@ $theme-colors-border-subtle: ( ) !default; // scss-docs-end theme-border-subtle-map -// Boosted mod -$background-colors: map-merge( - $theme-colors, - ( - "success": $supporting-green, - "info": $supporting-blue, - "warning": $supporting-yellow, - "danger": $danger - ) -) !default; -// End mod - $theme-colors-text-dark: null !default; $theme-colors-bg-subtle-dark: null !default; $theme-colors-border-subtle-dark: null !default; diff --git a/scss/_variables.scss b/scss/_variables.scss index 7c9f02872a..15ed9d2776 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -393,7 +393,9 @@ $burger-icon: url("data:image/svg+xml,") !default; $success-icon: url("data:image/svg+xml,") !default; $info-icon: url("data:image/svg+xml,") !default; -$warning-icon: url("data:image/svg+xml,") !default; +// $warning-icon: url("data:image/svg+xml,") !default; +$warning-icon: url("data:image/svg+xml,") !default; +// $warning-icon: url("data:image/svg+xml,") !default; $danger-icon: url("data:image/svg+xml,") !default; $add-icon: url("data:image/svg+xml,") !default; $remove-icon: url("data:image/svg+xml,") !default; @@ -1994,28 +1996,48 @@ $progress-height-xs: $spacer * .25 !default; // List group // scss-docs-start list-group-variables +$list-group-font-weight: $font-weight-bold !default; // Boosted mod $list-group-color: var(--#{$prefix}body-color) !default; $list-group-bg: var(--#{$prefix}body-bg) !default; $list-group-border-color: var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of `var(--#{$prefix}border-color)` $list-group-border-width: var(--#{$prefix}border-width) !default; $list-group-border-radius: var(--#{$prefix}border-radius) !default; -$list-group-item-padding-y: .875rem !default; // Boosted mod -$list-group-item-padding-x: $spacer !default; // Boosted mod +$list-group-item-padding-y: 10px !default; // Boosted mod: instead of $spacer * .5 +$list-group-item-padding-x: 13px !default; // Boosted mod: instead of $spacer +$list-group-item-icon-size: $spacer * .85 !default; // Boosted mod +// Boosted mod: no $list-group-item-bg-scale +// Boosted mod: no $list-group-item-color-scale -$list-group-hover-bg: null !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)` -$list-group-active-color: $white !default; // Boosted mod -$list-group-active-bg: $black !default; // Boosted mod -$list-group-active-border-color: $list-group-active-bg !default; +$list-group-hover-bg: var(--#{$prefix}secondary-bg) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)` +$list-group-active-color: var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `$component-active-color` +$list-group-active-bg: no-repeat linear-gradient(to right, var(--#{$prefix}link-hover-color) 4px, $gray-400 4px) !default; // Boosted mod: instead of `$component-active-bg` +$list-group-active-border-color: $list-group-border-color !default; // Boosted mod: instead of `$list-group-active-bg` $list-group-disabled-color: $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)` $list-group-disabled-bg: $list-group-bg !default; -$list-group-action-color: $black !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)` -$list-group-action-hover-color: $primary !default; // Boosted mod: instead of `var(--#{$prefix}emphasis-color)` +// Boosted mod +$list-group-action-color: var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)` +$list-group-action-hover-color: var(--#{$prefix}emphasis-color) !default; $list-group-action-active-color: $list-group-active-color !default; // Boosted mod: instead of `var(--#{$prefix}body-color)` $list-group-action-active-bg: $list-group-active-bg !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)` + +$list-group-dark-color: $white !default; +$list-group-dark-bg: $black !default; +$list-group-dark-hover-bg: $gray-900 !default; +$list-group-dark-border-color: $gray-700 !default; +$list-group-dark-action-color: $white !default; +$list-group-dark-action-hover-color: $white !default; +$list-group-dark-action-active-color: $white !default; +$list-group-dark-action-active-bg: no-repeat linear-gradient(to right, var(--#{$prefix}link-hover-color) 4px, $gray-700 4px) !default; +$list-group-dark-disabled-color: $gray-700 !default; +$list-group-dark-disabled-bg: transparent !default; +$list-group-dark-active-color: $white !default; +$list-group-dark-active-bg: no-repeat linear-gradient(to right, var(--#{$prefix}link-hover-color) 4px, $gray-700 4px) !default; +$list-group-dark-active-border-color: $gray-700 !default; +// End mod // scss-docs-end list-group-variables // scss-docs-start list-group-dark-variables diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss index d37b729c6f..3659779ab3 100644 --- a/scss/mixins/_list-group.scss +++ b/scss/mixins/_list-group.scss @@ -2,21 +2,31 @@ // List Groups +// Boosted mod: only add an icon on the right instead of changing the cackground-color // scss-docs-start list-group-mixin -@mixin list-group-item-variant($state, $background, $color) { +@mixin list-group-item-variant($state, $color, $icon) { .list-group-item-#{$state} { - color: $color; - background-color: $background; + padding-right: calc(var(--#{$prefix}list-group-item-icon-margin-x) + var(--#{$prefix}list-group-item-icon-size) * 2); // stylelint-disable-line function-disallowed-list - &.list-group-item-action { - // Boosted mod: no &:focus - &:hover { - color: $color; - background-color: if($color == $white, shade-color($background, 10%), tint-color($background, 10%)); // Boosted mod - } + &::after { + position: absolute; + top: add(var(--#{$prefix}list-group-item-padding-y), 1px); + right: var(--#{$prefix}list-group-item-icon-margin-x); + width: var(--#{$prefix}list-group-item-icon-size); + height: var(--#{$prefix}list-group-item-icon-size); + content: ""; + background-color: var(--#{$prefix}link-color); // Find a better var once we fully implement dark mode ? + -webkit-mask: no-repeat $icon; // stylelint-disable-line property-no-vendor-prefix + mask: no-repeat $icon; + } - // Boosted mod: no variant for active state + &.disabled::after, + &:disabled::after, + &.list-group-item-action:active::after, + &.active::after { + background-color: currentcolor; } } } // scss-docs-end list-group-mixin +// End mod diff --git a/site/content/docs/5.3/about/team.md b/site/content/docs/5.3/about/team.md index 1c04372a16..ee38e1a51c 100644 --- a/site/content/docs/5.3/about/team.md +++ b/site/content/docs/5.3/about/team.md @@ -15,7 +15,7 @@ Boosted is maintained by the core team and a small group of invaluable core cont @{{ .user }} - {{ .name }} @{{ .user }} + {{ .name }} @{{ .user }} {{ end -}} diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md index 67868532c8..2e9ae434b7 100644 --- a/site/content/docs/5.3/components/list-group.md +++ b/site/content/docs/5.3/components/list-group.md @@ -101,42 +101,45 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis Add the `.list-group-numbered` modifier class (and optionally use an `
    ` element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `
      `s default browser styling) for better placement inside list group items and to allow for better customization. Numbers are generated by `counter-reset` on the `
        `, and then styled and placed with a `::before` pseudo-element on the `
      1. ` with `counter-increment` and `content`. - + {{< example >}}
          -
        1. A list item
          2. -
        2. A list item
          3. -
        3. A list item
          4. +
        4. A list item
          5. +
        5. A list item
          6. +
        6. A list item
        {{< /example >}} + These work great with custom content as well. + {{< example >}}
        1. -
          -
          Subheading
          - Content for list item +
          + Subheading +
          Content for list item
          - 14 + 14
        2. -
          -
          Subheading
          - Content for list item +
          + Subheading +
          Content for list item
          - 14 + 14
        3. -
          -
          Subheading
          - Content for list item +
          + Subheading +
          Content for list item
          - 14 + 14
        {{< /example >}} + ## Horizontal @@ -145,7 +148,7 @@ Add `.list-group-horizontal` to change the layout of list group items from verti **ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item. {{< design-callout-alert >}} -This variant is just an **example illustrating the use of the layout utility**. It should not be used because it does not respect the Orange Design System specifications. +This variant, which is just an **example illustrating the use of the layout utility**, should not be used because it does not respect the Orange Design System specifications. {{< /design-callout-alert >}} {{< example >}} @@ -166,16 +169,22 @@ This variant is just an **example illustrating the use of the layout utility**. **Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [a Sass loop](#sass-loops). {{< /callout >}} -Use contextual classes to style list items with a stateful background and color. + +Use contextual classes to style list items with a stateful icon. {{< example >}}
        • A simple default list group item
          • {{< list.inline >}} -{{- range (index $.Site.Data "theme-colors") }} -
        • A simple {{ .name }} list group item
          • +{{- range (index $.Site.Data "palette") }} + {{- if (eq .category "Functional colors") }} + {{- range (index .colors) }} +
        • A simple {{ .level }} list group item
          • + {{- end -}} + {{- end -}} {{- end -}} {{< /list.inline >}} +
        • A simple disabled info list group item
        {{< /example >}} @@ -187,12 +196,19 @@ Contextual classes also work with `.list-group-item-action` for `` and ` A simple default list group item {{< list.inline >}} -{{- range (index $.Site.Data "theme-colors") }} - A simple {{ .name }} list group item +{{- range (index $.Site.Data "palette") -}} + {{- if (eq .category "Functional colors") -}} + {{- range (index .colors) }} + A simple {{ .level }} list group item + {{- end -}} + {{- end -}} {{- end -}} {{< /list.inline >}} + A simple active success list group item + A simple disabled info list group item {{< /example >}} + {{< callout info >}} {{< partial "callouts/warning-color-assistive-technologies.md" >}} @@ -210,15 +226,15 @@ This variant should not be used because it does not respect the Orange Design Sy
        • A list item - 14 + 14
        • A second list item - 2 + 2
        • A third list item - 1 + 1
        {{< /example >}} @@ -326,17 +342,22 @@ You can use `.stretched-link` on `