Improve chip styling within tables

craftcms · Mar 6, 2025 · 51b07b3 · 51b07b3
1 parent d1f1939
commit 51b07b3
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Release Notes for Craft CMS 5
 
+## Unreleased
+
+- Improved chip styling within tables. ([#16771](https://github.com/craftcms/cms/issues/16771))
+
 ## 5.6.11 - 2025-03-04
 
 - Added `craft\base\conditions\BaseTextConditionRule::isEmpty()`.

diff --git a/src/elements/Entry.php b/src/elements/Entry.php
@@ -2066,7 +2066,11 @@ protected function attributeHtml(string $attribute): string
                 return $section ? Html::encode(Craft::t('site', $section->name)) : '';
             case 'type':
                 try {
-                    $config = [];
+                    $config = [
+                        'attributes' => [
+                            'class' => 'chromeless',
+                        ],
+                    ];
                     if ($this->viewMode === 'cards') {
                         $config['showThumb'] = false;
                     }

diff --git a/src/fields/BaseRelationField.php b/src/fields/BaseRelationField.php
@@ -945,11 +945,7 @@ public function previewPlaceholderHtml(mixed $value, ?ElementInterface $element)
         $mockup = new (static::elementType());
         $mockup->title = Craft::t('app', 'Related {type} Title', ['type' => $mockup->displayName()]);
 
-        return Cp::chipHtml($mockup, [
-            'attributes' => [
-                'class' => ['chromeless'],
-            ],
-        ]);
+        return Cp::chipHtml($mockup);
     }
 
     /**

diff --git a/src/fields/Entries.php b/src/fields/Entries.php
@@ -160,10 +160,6 @@ public function previewPlaceholderHtml(mixed $value, ?ElementInterface $element)
 
         $mockup->sectionId = $section->id;
 
-        return Cp::chipHtml($mockup, [
-            'attributes' => [
-                'class' => ['chromeless'],
-            ],
-        ]);
+        return Cp::chipHtml($mockup);
     }
 }
diff --git a/src/helpers/Cp.php b/src/helpers/Cp.php
@@ -1153,9 +1153,6 @@ public static function elementPreviewHtml(
                 'showStatus' => $showStatus,
                 'showThumb' => $showThumb,
                 'size' => $size,
-                'attributes' => [
-                    'class' => ['chromeless'],
-                ],
             ]);
 
         if (!empty($elements)) {
@@ -1167,9 +1164,6 @@ public static function elementPreviewHtml(
                     'showStatus' => $showStatus,
                     'showThumb' => $showThumb,
                     'size' => $size,
-                    'attributes' => [
-                        'class' => ['chromeless'],
-                    ],
                 ]);
             }
             $html .= Html::tag('span', '+' . Craft::$app->getFormatter()->asInteger(count($elements)), [

diff --git a/src/web/assets/cp/dist/css/cp.css b/src/web/assets/cp/dist/css/cp.css
diff --git a/src/web/assets/cp/dist/css/cp.css.map b/src/web/assets/cp/dist/css/cp.css.map
diff --git a/src/web/assets/cp/src/css/_main.scss b/src/web/assets/cp/src/css/_main.scss
@@ -3233,6 +3233,10 @@ table {
             th,
             td {
               background-color: var(--hover-bg-color);
+
+              .chip:not(.chromeless) {
+                background-color: var(--gray-100);
+              }
             }
           }
 
@@ -3261,6 +3265,10 @@ table {
             td {
               color: var(--white);
               background-color: var(--selected-bg-color);
+
+              .chip:not(.chromeless) {
+                background-color: var(--gray-600);
+              }
             }
 
             .icon,
@@ -3677,7 +3685,7 @@ table {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
-  gap: var(--s);
+  gap: var(--xs);
 
   .chip {
     margin: 0 !important;
@@ -4240,10 +4248,6 @@ table {
       }
     }
 
-    .chip {
-      background-color: transparent;
-    }
-
     tr.disabled {
       opacity: 1;