diff --git a/packages/styles/components/_c.flag.scss b/packages/styles/components/_c.flag.scss
index 717ea0fa0..f91a9f0e9 100644
--- 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
index d2510297a..7459a9d47 100644
--- 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
index e6e26d35f..bfaaf4eab 100644
--- 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
Flag label
```
-
+
## Variations
@@ -47,23 +47,11 @@ example :
#### Solid
-
+
#### Bordered
-
-
-### Multi-line flag
-
-
-
-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.
-
-
-
-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.
+
## Customization and mixins
diff --git a/src/docs/Components/Flags/previews/flag-bordered.preview.html b/src/docs/Components/Flags/previews/bordered.preview.html
similarity index 96%
rename from src/docs/Components/Flags/previews/flag-bordered.preview.html
rename to src/docs/Components/Flags/previews/bordered.preview.html
index f5d3199ba..af4aeea31 100644
--- a/src/docs/Components/Flags/previews/flag-bordered.preview.html
+++ b/src/docs/Components/Flags/previews/bordered.preview.html
@@ -1,17 +1,17 @@
-
-
-
Flag bordered
-
-
-
-
Flag bordered dark
-
-
-
-
Flag bordered light
-
-
-
-
Flag bordered danger
-
-
+
+
+
Flag bordered
+
+
+
+
Flag bordered dark
+
+
+
+
Flag bordered light
+
+
+
+
Flag bordered danger
+
+
diff --git a/src/docs/Components/Flags/previews/flag-bordered.preview.scss b/src/docs/Components/Flags/previews/bordered.preview.scss
similarity index 100%
rename from src/docs/Components/Flags/previews/flag-bordered.preview.scss
rename to src/docs/Components/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
new file mode 100644
index 000000000..7b6dd6906
--- /dev/null
+++ b/src/docs/Components/Flags/previews/default.preview.html
@@ -0,0 +1,13 @@
+
diff --git a/src/docs/Components/Flags/previews/flag-solid.preview.scss b/src/docs/Components/Flags/previews/solid.preview.scss
similarity index 100%
rename from src/docs/Components/Flags/previews/flag-solid.preview.scss
rename to src/docs/Components/Flags/previews/solid.preview.scss