Title bars #956

louismaximepiton · 2021-11-30T17:11:56Z

Previews :
https://deploy-preview-956--boosted.netlify.app/docs/5.1/examples/title-bars/
https://deploy-preview-956--boosted.netlify.app/docs/5.1/components/title-bars/

DoD

Development

Reviews

Code review
A11y review
Design review

julien-deramond · 2021-12-15T12:53:45Z

Note: If #982 is closed before the review of this PR, we must apply here the Title Bars to the documentation templates. Otherwise, we need to modify the description of the issue to notify the developer to use Title Bars.

julien-deramond

First series of comments without digging at the examples and .scss.

julien-deramond · 2021-12-30T09:56:53Z

site/content/docs/5.1/components/orange-local-headers.md

+    <div class="container">
+      <h1>Svg image</h1>
+      <svg aria-hidden="true" focusable="false">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#logo"/>


It is not a good practice to have the logo here. Replace it with a simple inline SVG and remove it from site/static/docs/5.1/assets/img/boosted-sprite.svg.

It is said further that the title should not wrap: it is the case here.
Moreover, the SVG shouldn't be right-aligned?

In this case, it wraps because of the width of the main container, do you think that I should add : word-break: keep-all ?

site/content/docs/5.1/components/orange-local-headers.md

scss/_title-bars.scss

julien-deramond · 2022-01-03T08:42:28Z

@louismaximepiton #1009 is merged so we should try to include Title bars into "Examples" and "Guidelines" pages for the titles.

site/static/docs/5.1/assets/img/boosted-sprite.svg

Franco-Riccitelli · 2022-04-22T14:57:08Z

I have completed a design review of the title bars and there are no issues - great work!
Please note, title bars can be displayed with black or white backgrounds. When using black or white backgrounds, illustrations can be included as an option, but it's not necessary.
Supporting colours can also be used as the background colour for title bars, but not the supporting light and dark tint colours. When using one of the supporting colours, Illustrations must be used.
The illustration used in the implementation is a good example of how to use illustrations in title bars, especially across the breakpoints, but it must be possible to replace this with other illustrations if needed. Thanks

isabellechanclou · 2022-04-25T10:00:51Z

Thanks @Franco-Riccitelli for your review and comments. Considering the rules you mentioned, we added them to complete the documentation part accordingly. By the way, it would be useful to have theses rules also mentioned in ODS.

Signed-off-by: louismaximepiton <louismaxime.piton@orange.com>

…xample page Signed-off-by: Isabelle Chanclou <isabelle.chanclou@orange.com>

Signed-off-by: Isabelle Chanclou <isabelle.chanclou@orange.com>

Signed-off-by: louismaximepiton <louismaxime.piton@orange.com>

Signed-off-by: Isabelle Chanclou <isabelle.chanclou@orange.com>

julien-deramond · 2022-05-03T06:00:52Z

Added a CSS section in the documentation via d02f9f0

scss/_title-bars.scss

julien-deramond · 2022-05-03T06:14:30Z

scss/_title-bars.scss

+
+  border-bottom: var(--#{$boosted-prefix}title-bar-border-width) solid var(--#{$boosted-prefix}title-bar-border-color);
+
+  @include media-breakpoint-up(md) {


Apparently in the DSM we have to following sizes for the header: 60px 50px 30px. It looks like .display-1. Can't we use this class instead?

OK I understand, the breakpoints are different between the DSM for this component and our breakpoints in Boosted regarding headers... Let's add .display-1 in this PR and fix the behavior in the CSS, and then create an issue to align the DSM and Boosted for the headers.

Just a reminder for the one that will create the issue, the actual breakpoints for display-* are sm and lg. Here, we need md and xl.

julien-deramond

Some space's missing between the border and the description in mobile mode.

The example thumbnail should be update to show the content of the examples rather than an image contained in the title bars.

site/content/docs/5.1/components/title-bars.md

site/data/examples.yml

julien-deramond

Final review with 2 small comments. After the fixes, let's merge 🚀

site/content/docs/5.1/examples/title-bars/index.html

site/content/docs/5.1/components/title-bars.md

Signed-off-by: Louis-Maxime Piton <louismaxime.piton@orange.com> Signed-off-by: Isabelle Chanclou <isabelle.chanclou@orange.com> Signed-off-by: Julien Déramond <isabelle.chanclou@orange.com> Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com> Co-authored-by: Isabelle Chanclou <isabelle.chanclou@orange.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>

louismaximepiton requested a review from julien-deramond as a code owner November 30, 2021 17:11

louismaximepiton linked an issue Nov 30, 2021 that may be closed by this pull request

Local Headers > Title Bar #889

Closed

This comment has been minimized.

Sign in to view

louismaximepiton mentioned this pull request Dec 3, 2021

New examples #410

Open

20 tasks

isabellechanclou force-pushed the main-lmp-title-bar branch from 3cd1807 to 7a468c9 Compare December 17, 2021 17:19

louismaximepiton marked this pull request as draft December 20, 2021 15:34

This comment has been minimized.

Sign in to view

louismaximepiton marked this pull request as ready for review December 22, 2021 16:30

julien-deramond changed the title ~~feat: Title bars~~ Title bars Dec 30, 2021

julien-deramond added brand component v5 labels Dec 30, 2021

julien-deramond requested changes Dec 30, 2021

View reviewed changes

julien-deramond mentioned this pull request Dec 30, 2021

[Docs] Modify docs template design for examples and guidelines #1009

Merged

louismaximepiton force-pushed the main-lmp-title-bar branch from aa909b8 to 3c5fffc Compare January 3, 2022 11:51

B3nz01d added this to To do in Web Design Board Feb 7, 2022

B3nz01d moved this from To do to Ready to dev in Web Design Board Feb 7, 2022

B3nz01d removed this from Ready to dev in Web Design Board Feb 7, 2022

julien-deramond assigned isabellechanclou Mar 4, 2022

julien-deramond requested a review from isabellechanclou March 4, 2022 10:47

louismaximepiton force-pushed the main-lmp-title-bar branch from 1d6245b to a590126 Compare March 21, 2022 15:55

louismaximepiton commented Mar 21, 2022

View reviewed changes

site/static/docs/5.1/assets/img/boosted-sprite.svg Outdated Show resolved Hide resolved

louismaximepiton added upcoming a11y review upcoming design review labels Apr 8, 2022

isabellechanclou force-pushed the main-lmp-title-bar branch from 9dba6f2 to f66e091 Compare April 12, 2022 10:42

isabellechanclou approved these changes Apr 12, 2022

View reviewed changes

louismaximepiton and others added 15 commits May 3, 2022 07:42

Adding responsiveness

c0a3f0b

Signed-off-by: louismaximepiton <louismaxime.piton@orange.com>

Change docs page information organisation + delete some examples in E…

2c61740

…xample page Signed-off-by: Isabelle Chanclou <isabelle.chanclou@orange.com>

Fix spelling

32e4f9b

Signed-off-by: Isabelle Chanclou <isabelle.chanclou@orange.com>

Fixing merge issues + getting spacing into Sass

3497c60

Signed-off-by: louismaximepiton <louismaxime.piton@orange.com>

chore(review): fix broken sprite file

838a7f0

Proposal after review

446d202

Signed-off-by: louismaximepiton <louismaxime.piton@orange.com>

Minor fixes

95d3ff8

Signed-off-by: louismaximepiton <louismaxime.piton@orange.com>

chore(review): enhance documentation by merging some info

cb73e11

Readding svg example

62bfd66

Signed-off-by: louismaximepiton <louismaxime.piton@orange.com>

Adding title bar to site

ca4f964

Signed-off-by: louismaximepiton <louismaxime.piton@orange.com>

Changes before review

745a386

Fix doc

aedfd44

Signed-off-by: Isabelle Chanclou <isabelle.chanclou@orange.com>

Slight fix doc

4756dcb

Signed-off-by: Isabelle Chanclou <isabelle.chanclou@orange.com>

Fix after rebase + review

db538ea

Fixes after reviews

bbfba51

julien-deramond force-pushed the main-lmp-title-bar branch from 36e09f9 to bbfba51 Compare May 3, 2022 05:42

Add CSS section in documentation

d02f9f0

julien-deramond reviewed May 3, 2022

View reviewed changes

scss/_title-bars.scss Outdated Show resolved Hide resolved

julien-deramond reviewed May 3, 2022

View reviewed changes

julien-deramond requested changes May 3, 2022

View reviewed changes

site/content/docs/5.1/components/title-bars.md Outdated Show resolved Hide resolved

site/data/examples.yml Show resolved Hide resolved

louismaximepiton and others added 2 commits May 3, 2022 11:26

fix(review)

a1dca20

Add component in overview section

2139f1e

julien-deramond approved these changes May 3, 2022

View reviewed changes

site/content/docs/5.1/examples/title-bars/index.html Outdated Show resolved Hide resolved

site/content/docs/5.1/components/title-bars.md Outdated Show resolved Hide resolved

fix for example

e1ba77c

julien-deramond merged commit a5f48ab into main May 4, 2022

julien-deramond deleted the main-lmp-title-bar branch May 4, 2022 05:47

This was referenced May 4, 2022

v5.2.0 Ship List #846

Closed

Doc: URL without version #1088

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Title bars #956

Title bars #956

louismaximepiton commented Nov 30, 2021 •

edited by julien-deramond

Loading

This comment has been minimized.

julien-deramond commented Dec 15, 2021

This comment has been minimized.

julien-deramond left a comment

julien-deramond Dec 30, 2021

louismaximepiton Dec 31, 2021

julien-deramond commented Jan 3, 2022

Franco-Riccitelli commented Apr 22, 2022

isabellechanclou commented Apr 25, 2022

julien-deramond commented May 3, 2022

julien-deramond May 3, 2022

julien-deramond May 3, 2022

louismaximepiton May 3, 2022

julien-deramond left a comment

julien-deramond left a comment


		border-bottom: var(--#{$boosted-prefix}title-bar-border-width) solid var(--#{$boosted-prefix}title-bar-border-color);

		@include media-breakpoint-up(md) {

Title bars #956

Title bars #956

Conversation

louismaximepiton commented Nov 30, 2021 • edited by julien-deramond Loading

DoD

Development

Reviews

This comment has been minimized.

julien-deramond commented Dec 15, 2021

This comment has been minimized.

julien-deramond left a comment

Choose a reason for hiding this comment

julien-deramond Dec 30, 2021

Choose a reason for hiding this comment

louismaximepiton Dec 31, 2021

Choose a reason for hiding this comment

julien-deramond commented Jan 3, 2022

Franco-Riccitelli commented Apr 22, 2022

isabellechanclou commented Apr 25, 2022

julien-deramond commented May 3, 2022

julien-deramond May 3, 2022

Choose a reason for hiding this comment

julien-deramond May 3, 2022

Choose a reason for hiding this comment

louismaximepiton May 3, 2022

Choose a reason for hiding this comment

julien-deramond left a comment

Choose a reason for hiding this comment

julien-deramond left a comment

Choose a reason for hiding this comment

louismaximepiton commented Nov 30, 2021 •

edited by julien-deramond

Loading