Release Boosted 5.1.0

[julien-deramond]

Tasks

• Bootstrap proposal PR has been merged so I can keep my modification in this PR. One less thing to merge the next time :)
• Designers strongly advise to remove Add new offcanvas support to navbars from the documentation.
• Remove in all files aria-label="Close" and replace it by <span class="visually-hidden">Close</span> inside the buttons
• At the end, regenerate the package-lock.json

Yeah, I just recreate it:

git clean -dfx
rm package-lock.json or del package-lock.json
npm i

Just be careful because in some cases the package ranges in package.json will install a newer version (at the time of writing autoprefixer for example). In those cases, just temporarily pin the dep.

This is needed unfortunately because when using dependabot over time the package-lock.json file becomes bloated. I haven't switched to npm 7.x to see if the issue is fixed there.

• Fix d4664f4 from e72916e5b741b07b94b12b3707129e868811bdbb: work to do on text/background opacities
• Simplify code from Release Boosted 5.1.0 #772 (comment)
• Fix bundlewatch

Release

• Run linters;
• Run compilers;
• Run tests;
• Check documentation site: examples and contents;
• Test cross-browser compatibility locally and with BrowserStack:
  • Firefox ESR
  • IE11 (v4 only)
  • Latest Edge, Chrome, Firefox, Safari
  • iOS Safari
  • Chrome & Firefox on Android
• Including RTL mode;
• Ask for reviews and accessibility testing;
• sync with Bootstrap's release and probably wait for it;
• npm run release-version $current_version $next_version to bump version number
  • then, if bumping a minor or major version:
    • Manually change version_short in package.json
    • Add docs version to site/data/docs-versions.yml
    • Manually change docs_version in config.yml and other references to the previous version
    • Update redirects in docs frontmatter (site/content/docs/_index.html?)
    • Move site/content/docs/5.x to site/content/docs/5.x+1
    • Increment site/static/docs/{version} version
    • Increment version in nuget/boosted.nuspec
    • Ensure Algolia indexes new release content (probably requires a PR)
  • check wrong matches in CHANGELOG.md, and maybe site/content/docs/<version>/migration.md
  • ⚠️ check the package-lock.json content, only "boosted" should have its version changed!
• if year changed recently, happy new year 🎉 but please change © year in .scss main files (reboot, grid, utilities and main file) as well as in NOTICE.txt.
• npm run release to compile dist, update SRI hashes in doc and package the release
• Prepare changelog:
  • install Conventionnal Changelog and conventional-changelog-cli globally
  • run conventional-changelog -p angular -i CHANGELOG.md -s
  • and probably maintain a ship list (eg for v4.4.0)
• commit and push dist with a chore(release) commit message
• merge (on v4-dev or v5-dev)
• tag your version, and push your tag
• create a GitHub release:
  • attach zip file
  • paste CHANGELOG / Ship list in the release's description
• run build/ship.sh x.x.x to… (v4 only)
• npm pack then npm publish
  • if you are already logged in NPM (with a personnal account, for example), you'd better use a repository scoped .npmrc file
  • if you're releasing a pre-release, use --tag, eg for v5-alpha1 npm publish boosted-5.0.0-alpha1.tgz --tag next
• publish on Nuget
• check release on NPM, Nuget, Packagist…
• publish documentation on gh-pages:
  • copy ../_site (v5-dev) or ../bs-docs (v4-dev) to the gh-pages branch
  • check every index.html used as redirections to be redirecting to the new release
  • when bumping minor version: ensure dist URLs in examples' HTML has changed
  • double-check everything before pushing, starting by searching for forgotten old version number occurences
• make an announcement in Plazza 🎉
• Designers asked for the new "Placeholders" component to try to improve the glow animation with the following steps #eee -> #ddd -> #ccc -> ODS > Promotions #999 if possible, and to try to improve the wave animation which is not visible in this first version. Placeholders use opacity so this proposal needs to be studied more in depth --> Create an issue in GitHub to tackle this subject and improve the rendering of the placeholders

[julien-deramond]

$value is not anymore only an hexadecimal value; it can be for example rgba(var(--bs-body-rgb), var(--bs-text-opacity)) so color-contrast($value) (in reality luminance()) throws the following error: Error: $color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) is not a color.

Any help would be appreciated on this subject. For the moment, I struggle a little bit with that.

[ffoodd]

I think the safer way would be to parse the value as a string to get the color name (eg. primary) and call the corresponding Sass variable ($primary).

Not quite sure it'd work though, but give it a try 😄

[julien-deramond]

Thanks @ffoodd.
I'm not sure it would work but I'll give it a try.
Indeed, if I'm not mistaken, there won't be corresponding Sass variable all the time:

• var(--bs-primary-rgb) -> $primary
• var(--bs-body-rgb) -> $body-bg (not the same name)

[Lausselloic]

When using the css variables, current solution can't be still valid. If the user change the css variable value (it has been done for that) then color contrast calculated during sass compilation can be wrong.
Maybe we need to give a try to pure css luminance calculation. I've found that interesting ressource : https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/ don't know what will be the effort to convert our variable and implement it

[ffoodd]

It shouldn't matter, this check was done only for Orange brand colors. Boosted is not supposed to support any other color palette.

As a matter of fact, custom property names shouldn't matter either: simply check if it contains any of the theme colors, grab it, and get its contrasted color.

[julien-deramond]

Got a naive code that seems to work (and that could probably be improved) but I'm not sure to be in the right direction given your last comment @ffoodd.

// Boosted mod: ensure contrasts in color utilities
@if "background-color" == $property and "transparent" != inspect($value) {
  // @debug "#{$property}: #{$value}";
  @if type-of($value) == "string" {
    @if (str-index($value, "var(--bs-primary-rgb)")) {
      $value: $primary;
    }
    @else if (str-index($value, "var(--bs-secondary-rgb)")) {
      $value: $secondary;
    }
    @else if (str-index($value, "var(--bs-success-rgb)")) {
      $value: $success;
    }
    @else if (str-index($value, "var(--bs-info-rgb)")) {
      $value: $info;
    }
    @else if (str-index($value, "var(--bs-warning-rgb)")) {
      $value: $warning;
    }
    @else if (str-index($value, "var(--bs-danger-rgb)")) {
      $value: $danger;
    }
    @else if (str-index($value, "var(--bs-light-rgb)")) {
      $value: $light;
    }
    @else if (str-index($value, "var(--bs-white-rgb)")) {
      $value: $white;
    }
    @else if (str-index($value, "var(--bs-body-rgb)")) {
      $value: $body-bg;
    }
    @else if (str-index($value, "var(--bs-dark-rgb)")) {
      $value: $dark;
    }
    @else if (str-index($value, "var(--bs-black-rgb)")) {
      $value: $black;
    }
  }
  color: color-contrast($value);
} @else if "color" == $property and "inherit" != inspect($value) and $accessible-orange != $value and (type-of($value) == "string" and null == (str-index($value, "var(--bs-primary-rgb)"))) {
  // @debug "#{$property}: #{$value}";

  @if type-of($value) == "string" {
    @if (str-index($value, "var(--bs-white-rgb)")) {
      $value: $white;
    }
    @else if (str-index($value, "var(--bs-light-rgb)")) {
      $value: $light;
    }
    @else if (str-index($value, "var(--bs-body-rgb)")) {
      $value: $body-color;
    }
  }
  background-color: color-contrast($value);
}
// End mod

[ffoodd]

Could be simplified indeed:

1. first extract the custom property name's middle key: $name = str-slice($value, 10, -6) to drop var(--bs- (9 chars) and -rgb) (5 chars).
2. then get the key from $theme-colors if it exists: @if map-has-key($theme-colors, $name) { $value = $map-get($theme-colors, $name); }.

Didn't test this out but you get the idea :)

[julien-deramond]

Simplified it this way: 78df309

[Nurovek]

Just coming back and seeing commit names, what is it with them ? These are Bootstrap commits ?

[julien-deramond]

Just coming back and seeing commit names, what is it with them ? These are Bootstrap commits ?

Yep, it is easier to track for me during the development and for the review.

[julien-deramond]

c5d1508 fixes pa11y issues. Here is my proposal:

• Fix in Boosted of the 2 main issues regarding the documentation
• Fix proposal in Bootstrap for those 2 issues
• Ignore the errors coming from the Bootstrap examples (not yet Orange-ified) by adding .exclude-from-pa11y-analysis:
  • Dropdowns: 19 errors
  • Footers: 13 errors
  • List groups: 12 errors
  • Modals: 2 errors

The main goal of my proposal is to have a "green" pa11y for the main branch and to create an issue to remove the .exclude-from-pa11y-analysis hack from the examples by Orange-ifying the examples or by fixing the issues directly within Bootstrap if possible.

[julien-deramond]

There must be some kind of regression here because pa11y shows us problems related to text-muted (e.g. https://deploy-preview-772--boosted.netlify.app/docs/5.0/examples/checkout/ vs https://boosted.orange.com/docs/5.0/examples/checkout/ where text-muted was displayed with a white bg).

[julien-deramond]

Fixed via 3e1e3da

[Lausselloic]

Find in https://deploy-preview-772--boosted.netlify.app/docs/5.0/layout/css-grid/#customizing
--bs-gap fallback mention 1.5rem, but in boosted it's 1.25 because gap use grid-gutter-widthvariable

gap: var(--#{$variable-prefix}gap, #{$grid-gutter-width});

We need to update the doc