IBX-2653: Introduce colorful ibexa-tag and ibexa-tag-view-select

ibexa · Apr 25, 2022 · 74d2b39 · 74d2b39
1 parent 9a73a10
commit 74d2b39
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 50 deletions.
diff --git a/src/bundle/Resources/public/scss/_page-title.scss b/src/bundle/Resources/public/scss/_page-title.scss
@@ -15,14 +15,7 @@
         display: flex;
     }
 
-    .ibexa-tag {
-        max-height: calculateRem(28px);
+    .ibexa-badge {
         margin-left: calculateRem(8px);
-        padding: calculateRem(2px) calculateRem(12px);
-
-        &__content {
-            font-weight: normal;
-            font-size: $ibexa-text-font-size-medium;
-        }
     }
 }
diff --git a/src/bundle/Resources/public/scss/_tag-view-select.scss b/src/bundle/Resources/public/scss/_tag-view-select.scss
@@ -4,8 +4,6 @@
     padding: calculateRem(24px);
 
     &__info {
-        @include ibexa-font-sans-serif();
-
         font-size: $ibexa-text-font-size-medium;
         color: $ibexa-color-black;
         white-space: nowrap;
@@ -23,13 +21,15 @@
     &__selected-item-tag {
         display: inline-flex;
         align-items: center;
-        height: calculateRem(24px);
         max-width: 100%;
-        padding: 0 calculateRem(8px);
-        border-radius: $ibexa-border-radius;
-        background-color: $ibexa-color-light-400;
+        height: calculateRem(24px);
+        padding: calculateRem(4px) calculateRem(10px);
         font-size: $ibexa-text-font-size-small;
-        line-height: calculateRem(18px);
+        line-height: calculateRem(16px);
+        font-weight: normal;
+        border: calculateRem(1px) solid $ibexa-color-dark;
+        border-radius: calculateRem(12px);
+        background-color: $ibexa-color-light-400;
         margin-top: calculateRem(5px);
         margin-bottom: calculateRem(5px);
 
@@ -50,7 +50,6 @@
                     }
                 }
 
-
                 &__selected-item-tag-ellipsize {
                     display: inline-block;
                 }
@@ -68,25 +67,63 @@
         text-overflow: ellipsis;
         color: transparent;
 
-        &--start {
-            width: 100%;
-
+        &--start,
+        &--end {
             .ibexa-tag-view-select__selected-item-tag-content-ellipsized {
                 color: $ibexa-color-black;
             }
         }
 
+        &--start {
+            width: 100%;
+        }
+
         &--end {
             width: 0;
             direction: rtl;
             text-align: right;
+        }
+    }
 
-            .ibexa-tag-view-select__selected-item-tag-content-ellipsized {
-                color: $ibexa-color-black;
+    $color-versions: 'primary' $ibexa-color-primary $ibexa-color-primary $ibexa-color-primary-200,
+        'secondary' $ibexa-color-dark $ibexa-color-dark $ibexa-color-light-400,
+        'info' $ibexa-color-info $ibexa-color-info $ibexa-color-info-200,
+        'danger' $ibexa-color-danger $ibexa-color-danger $ibexa-color-danger-200,
+        'success' $ibexa-color-success-600 $ibexa-color-success $ibexa-color-success-200,
+        'complementary' $ibexa-color-complementary-600 $ibexa-color-complementary $ibexa-color-complementary-200;
+
+    @mixin color-tags($color-text, $color-border, $color-background) {
+        .ibexa-tag-view-select {
+            &__selected-item-tag {
+                border-color: $color-border;
+                background-color: $color-background;
+
+                .ibexa-icon {
+                    fill: $color-text;
+                }
+            }
+
+            &__selected-item-tag-ellipsize {
+                color: $color-text;
+            }
+
+            &__selected-item-tag-content {
+                &--start,
+                &--end {
+                    .ibexa-tag-view-select__selected-item-tag-content-ellipsized {
+                        color: $color-text;
+                    }
+                }
             }
         }
     }
 
+    @each $name, $color-text, $color-border, $color-background in $color-versions {
+        &--#{$name} {
+            @include color-tags($color-text, $color-border, $color-background);
+        }
+    }
+
     &__selected-item-tag-remove-btn {
         padding: 0;
         margin-left: calculateRem(12px);
@@ -97,16 +134,6 @@
     &[disabled] {
         border-color: $ibexa-color-light;
 
-        .ibexa-tag-view-select {
-            &__info {
-                color: $ibexa-color-dark-300;
-            }
-
-            &__selected_item {
-                color: $ibexa-color-dark-400;
-                fill: $ibexa-color-dark-400;
-                background-color: $ibexa-color-light-300;
-            }
-        }
+        @include color-tags($ibexa-color-dark-400, $ibexa-color-light, $ibexa-color-light-300);
     }
 }
diff --git a/src/bundle/Resources/public/scss/_tag.scss b/src/bundle/Resources/public/scss/_tag.scss
@@ -1,32 +1,62 @@
 .ibexa-tag {
-    border-radius: calculateRem(18px);
-    background: $ibexa-color-light-300;
-    font-size: $ibexa-text-font-size-small;
-    padding: calculateRem(2px) calculateRem(28px) calculateRem(2px) calculateRem(8px);
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     position: relative;
+    height: calculateRem(24px);
+    padding: calculateRem(4px) calculateRem(24px) calculateRem(4px) calculateRem(10px);
+    border: calculateRem(1px) solid $ibexa-color-dark;
+    border-radius: calculateRem(12px);
+    background-color: $ibexa-color-light-400;
 
     &__content {
-        line-height: calculateRem(22px);
+        font-size: $ibexa-text-font-size-small;
+        font-weight: normal;
     }
 
     &__spinner {
         height: calculateRem(22px);
         line-height: 0;
+
+        .ibexa-icon {
+            fill: $ibexa-color-dark;
+        }
     }
 
     &__remove-btn {
         position: absolute;
-        top: calc(50% - #{calculateRem(8px)});
-        right: calculateRem(6px);
+        right: calculateRem(8px);
         cursor: pointer;
         border: 0;
         padding: 0;
         outline: none;
         line-height: 0;
 
-        &:disabled {
+        &:disabled,
+        &[disabled] {
             cursor: not-allowed;
         }
     }
+
+    $color-versions: 'primary' $ibexa-color-primary $ibexa-color-primary $ibexa-color-primary-200,
+        'secondary' $ibexa-color-dark $ibexa-color-dark $ibexa-color-light-400,
+        'info' $ibexa-color-info $ibexa-color-info $ibexa-color-info-200,
+        'danger' $ibexa-color-danger $ibexa-color-danger $ibexa-color-danger-200,
+        'success' $ibexa-color-success-600 $ibexa-color-success $ibexa-color-success-200,
+        'complementary' $ibexa-color-complementary-600 $ibexa-color-complementary $ibexa-color-complementary-200;
+
+    @each $name, $color-text, $color-border, $color-background in $color-versions {
+        &--#{$name} {
+            color: $color-text;
+            border-color: $color-border;
+            background-color: $color-background;
+
+            .ibexa-tag {
+                &__remove-btn,
+                &__spinner,
+                .ibexa-icon {
+                    fill: $color-text;
+                }
+            }
+        }
+    }
 }
diff --git a/src/bundle/Resources/views/themes/admin/ui/page_title.html.twig b/src/bundle/Resources/views/themes/admin/ui/page_title.html.twig
@@ -3,9 +3,10 @@
         <div class="ibexa-page-title__top">
             <h1 class="ibexa-page-title__title">
                 {{ title }}
+                {% set tag = 'asdf' %}
                 {% if tag is defined %}
-                    <div class="ibexa-tag">
-                        <div class="ibexa-tag__content">{{ tag }}</div>
+                    <div class="ibexa-badge">
+                        {{ tag }}
                     </div>
                 {% endif %}
             </h1>

diff --git a/src/bundle/Resources/views/themes/admin/ui/search_tag.html.twig b/src/bundle/Resources/views/themes/admin/ui/search_tag.html.twig
@@ -7,13 +7,13 @@
     <div class="ibexa-tag__content">
         {{ content }}
     </div>
-    <button 
-        type="button" 
+    <button
+        type="button"
         class="ibexa-tag__remove-btn {{ btn_class }}"
         data-target-selector="{{ target_selector }}"
     >
-        <svg class="ibexa-icon ibexa-icon--small">
-            <use xlink:href="{{ ibexa_icon_path('circle-close') }}"></use>
+        <svg class="ibexa-icon ibexa-icon--tiny">
+            <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
         </svg>
     </button>
 </div>
diff --git a/src/bundle/Resources/views/themes/admin/ui/tag.html.twig b/src/bundle/Resources/views/themes/admin/ui/tag.html.twig
@@ -7,13 +7,13 @@
         {{ content }}
     </div>
     <div class="ibexa-tag__spinner" {% if not is_loading_state %} hidden {% endif %}>
-        <svg class="ibexa-icon ibexa-icon--small ibexa-icon--dark ibexa-spin">
+        <svg class="ibexa-icon ibexa-icon--small ibexa-spin">
             <use xlink:href="{{ ibexa_icon_path('spinner') }}"></use>
         </svg>
     </div>
     <button type="button" class="ibexa-tag__remove-btn">
-        <svg class="ibexa-icon ibexa-icon--small ibexa-icon--dark">
-            <use xlink:href="{{ ibexa_icon_path('circle-close') }}"></use>
+        <svg class="ibexa-icon ibexa-icon--tiny">
+            <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
         </svg>
     </button>
 </div>