feat(component/flag): improve long text flag behaviour (#995)

adeo · Jun 13, 2022 · 28618b6 · 28618b6
1 parent 35d7a5d
commit 28618b6
Show file tree

Hide file tree

Showing 14 changed files with 121 additions and 151 deletions.
diff --git a/packages/styles/components/_c.flag.scss b/packages/styles/components/_c.flag.scss
@@ -1,22 +1,18 @@
 /* mqp:start */
 .mc-flag {
-  @include set-flag-base();
-  @include set-font-face('semi-bold');
-  @include set-font-scale('04', 's');
-  @include set-flag-theme(get-token(color, flag, 'solid'));
+  $parent: get-parent-selector(&);
+
+  @include set-flag-base($parent);
+  @include set-font-face("semi-bold");
+  @include set-flag-theme($parent, get-token(color, flag, "solid"));
 
   @each $name, $props in $flags {
-    @if ($name != 'solid') {
+    @if ($name != "solid") {
       &--#{$name} {
-        @include set-flag-theme($props);
+        @include set-flag-theme($parent, $props);
       }
     }
   }
-
-  &--extend {
-    flex-shrink: 1;
-    height: auto;
-  }
 }
 
 /* mqp:end */
diff --git a/packages/styles/settings-tools/_s.flags.scss b/packages/styles/settings-tools/_s.flags.scss
@@ -1,31 +1,36 @@
 $flags: get-token(color, flag);
 
-$flag-border: get-border('s');
+$flag-border: get-border("s");
 
-@mixin set-flag-base {
-  border: $flag-border solid transparent;
-  display: inline-flex;
-  align-items: center;
-  padding: 0 $mu050;
+@mixin set-flag-base($parent) {
+  display: inline-block;
+  font-size: get-token(size, font, "04");
   margin: 0;
   vertical-align: middle;
-  min-height: 1.375rem;
-  flex-shrink: 0;
+  // custom line-height to ensure the multi-line behaviour is done in the right conditions
+  line-height: 1.786;
 
-  /* ie11 hack to center vertically */
+  @at-root #{$parent}__label {
+    @include set-line-height("04", "s");
 
-  /* see : https://github.com/philipwalton/flexbugs/issues/231 */
-  height: 0;
+    border: $flag-border solid transparent;
+    box-decoration-break: clone;
+    padding: $mu025 $mu050;
+  }
 }
 
-@mixin set-flag-theme($props) {
-  color: map-get($props, 'text');
+@mixin set-flag-theme($parent, $props) {
+  #{$parent} {
+    &__label {
+      color: map-get($props, "text");
 
-  @if map-has-key($props, 'border') {
-    border-color: map-get($props, 'border');
-  }
+      @if map-has-key($props, "border") {
+        border-color: map-get($props, "border");
+      }
 
-  @if map-has-key($props, 'background') {
-    background-color: map-get($props, 'background');
+      @if map-has-key($props, "background") {
+        background-color: map-get($props, "background");
+      }
+    }
   }
 }
diff --git a/src/docs/Components/Flags/code.mdx b/src/docs/Components/Flags/code.mdx
@@ -14,13 +14,13 @@ Import the settings and the flag `scss` files.
 
 ## Basic usage
 
-To create a flag you have one main class to apply `mc-flag`, and wrap the text inside the flag in a `span.mc-flag__label`. While the text without span will look mostly fine, we use it to opticaly align the characters baseline in the flag.
+The creation of a **Flag** component in your code is done using the following HTML structure:
 
 ```html
 <div class="mc-flag">Flag label</div>
 ```
 
-<Preview path="flag-default" />
+<Preview path="default" />
 
 ## Variations
 
@@ -47,23 +47,11 @@ example :
 
 #### Solid
 
-<Preview path="flag-solid" />
+<Preview path="solid" />
 
 #### Bordered
 
-<Preview path="flag-bordered" />
-
-### Multi-line flag
-
-<Highlight theme="warning">
-
-By default, the flag component can't extend over several lines.
-
-Indeed, as indicated in the [Do's and Dont's](/Components/Flags/#dos-and-donts) section of the documentation, it is not allowed to use too long text inside your flag.
-
-</Highlight>
-
-However in rare exceptions where you don't have the possibility to make your content fit on a single line we provide you with the `mc-flag--extend` modifier which allows you to get a multi-line flag.
+<Preview path="bordered" />
 
 ## Customization and mixins
 

diff --git a/...Flags/previews/flag-bordered.preview.html → ...ents/Flags/previews/bordered.preview.html b/...Flags/previews/flag-bordered.preview.html → ...ents/Flags/previews/bordered.preview.html
@@ -1,17 +1,17 @@
-<div class="example">
-  <div class="example__item">
-    <div class="mc-flag mc-flag--bordered">Flag bordered</div>
-  </div>
-
-  <div class="example__item">
-    <div class="mc-flag mc-flag--bordered-dark">Flag bordered dark</div>
-  </div>
-
-  <div class="example__item example__item--light">
-    <div class="mc-flag mc-flag--bordered-light">Flag bordered light</div>
-  </div>
-
-  <div class="example__item">
-    <div class="mc-flag mc-flag--bordered-danger">Flag bordered danger</div>
-  </div>
-</div>
+<div class="example">
+  <div class="example__item">
+    <div class="mc-flag mc-flag--bordered">Flag bordered</div>
+  </div>
+
+  <div class="example__item">
+    <div class="mc-flag mc-flag--bordered-dark">Flag bordered dark</div>
+  </div>
+
+  <div class="example__item example__item--light">
+    <div class="mc-flag mc-flag--bordered-light">Flag bordered light</div>
+  </div>
+
+  <div class="example__item">
+    <div class="mc-flag mc-flag--bordered-danger">Flag bordered danger</div>
+  </div>
+</div>
diff --git a/...Flags/previews/flag-bordered.preview.scss → ...ents/Flags/previews/bordered.preview.scss b/...Flags/previews/flag-bordered.preview.scss → ...ents/Flags/previews/bordered.preview.scss
diff --git a/src/docs/Components/Flags/previews/default.preview.html b/src/docs/Components/Flags/previews/default.preview.html
@@ -0,0 +1,13 @@
+<div class="example">
+  <div class="example__item">
+    <div class="mc-flag">
+      <span class="mc-flag__label">Flag label</span>
+    </div>
+  </div>
+
+  <div class="example__item">
+    <div class="mc-flag mc-flag--bordered">
+      <span class="mc-flag__label">This is a flag with a very long label</span>
+    </div>
+  </div>
+</div>
diff --git a/src/docs/Components/Flags/previews/default.preview.scss b/src/docs/Components/Flags/previews/default.preview.scss
@@ -0,0 +1,15 @@
+@import "settings-tools/_all-settings";
+
+@include import-font-families();
+
+@import "components/_c.flag";
+
+.example {
+  margin: $mu100 auto;
+  padding: 0 $mu150;
+
+  &__item {
+    margin: $mu100;
+    max-width: $mu1000;
+  }
+}
diff --git a/src/docs/Components/Flags/previews/flag-all.preview.html b/src/docs/Components/Flags/previews/flag-all.preview.html
@@ -1,25 +1,25 @@
-<div class="example">
-  <div class="example__item">
-    <div class="mc-flag">Flag solid</div>
-
-    <div class="mc-flag mc-flag--bordered">Flag bordered</div>
-  </div>
-
-  <div class="example__item">
-    <div class="mc-flag mc-flag--solid-dark">Flag solid dark</div>
-
-    <div class="mc-flag mc-flag--bordered-dark">Flag bordered dark</div>
-  </div>
-
-  <div class="example__item example__item--light">
-    <div class="mc-flag mc-flag--solid-light">Flag solid light</div>
-
-    <div class="mc-flag mc-flag--bordered-light">Flag bordered light</div>
-  </div>
-
-  <div class="example__item">
-    <div class="mc-flag mc-flag--solid-danger">Flag solid danger</div>
-
-    <div class="mc-flag mc-flag--bordered-danger">Flag bordered danger</div>
-  </div>
-</div>
+<div class="example">
+  <div class="example__item">
+    <div class="mc-flag">Flag solid</div>
+
+    <div class="mc-flag mc-flag--bordered">Flag bordered</div>
+  </div>
+
+  <div class="example__item">
+    <div class="mc-flag mc-flag--solid-dark">Flag solid dark</div>
+
+    <div class="mc-flag mc-flag--bordered-dark">Flag bordered dark</div>
+  </div>
+
+  <div class="example__item example__item--light">
+    <div class="mc-flag mc-flag--solid-light">Flag solid light</div>
+
+    <div class="mc-flag mc-flag--bordered-light">Flag bordered light</div>
+  </div>
+
+  <div class="example__item">
+    <div class="mc-flag mc-flag--solid-danger">Flag solid danger</div>
+
+    <div class="mc-flag mc-flag--bordered-danger">Flag bordered danger</div>
+  </div>
+</div>
diff --git a/src/docs/Components/Flags/previews/flag-basic.preview.html b/src/docs/Components/Flags/previews/flag-basic.preview.html
diff --git a/src/docs/Components/Flags/previews/flag-basic.preview.scss b/src/docs/Components/Flags/previews/flag-basic.preview.scss
diff --git a/src/docs/Components/Flags/previews/flag-default.preview.html b/src/docs/Components/Flags/previews/flag-default.preview.html
diff --git a/src/docs/Components/Flags/previews/flag-default.preview.scss b/src/docs/Components/Flags/previews/flag-default.preview.scss
diff --git a/...ts/Flags/previews/flag-solid.preview.html → ...ponents/Flags/previews/solid.preview.html b/...ts/Flags/previews/flag-solid.preview.html → ...ponents/Flags/previews/solid.preview.html
@@ -1,17 +1,17 @@
-<div class="example">
-  <div class="example__item">
-    <div class="mc-flag">Flag solid</div>
-  </div>
-
-  <div class="example__item">
-    <div class="mc-flag mc-flag--solid-dark">Flag solid dark</div>
-  </div>
-
-  <div class="example__item example__item--light">
-    <div class="mc-flag mc-flag--solid-light">Flag solid light</div>
-  </div>
-
-  <div class="example__item">
-    <div class="mc-flag mc-flag--solid-danger">Flag solid danger</div>
-  </div>
-</div>
+<div class="example">
+  <div class="example__item">
+    <div class="mc-flag">Flag solid</div>
+  </div>
+
+  <div class="example__item">
+    <div class="mc-flag mc-flag--solid-dark">Flag solid dark</div>
+  </div>
+
+  <div class="example__item example__item--light">
+    <div class="mc-flag mc-flag--solid-light">Flag solid light</div>
+  </div>
+
+  <div class="example__item">
+    <div class="mc-flag mc-flag--solid-danger">Flag solid danger</div>
+  </div>
+</div>
diff --git a/...ts/Flags/previews/flag-solid.preview.scss → ...ponents/Flags/previews/solid.preview.scss b/...ts/Flags/previews/flag-solid.preview.scss → ...ponents/Flags/previews/solid.preview.scss