Issue #2399939 by DickJohnson, LewisNyman, mherchel, idebr, brahmjeet789:...

Issue #2399939 by DickJohnson, LewisNyman, mherchel, idebr, brahmjeet789: Refactor 'admin-panel' CSS component

core/modules/system/css/system.admin.css

@@ -45,13 +45,13 @@
 }
 
 /**
- * Administration blocks.
+ * Panel.
+ * Used to visually group items together.
  */
-.admin-panel {
-  margin: 0;
-  padding: 5px 5px 15px 5px;
+.panel {
+  padding: 5px 5px 15px;
 }
-.admin-panel .description {
+.panel__description {
   margin: 0 0 3px;
   padding: 2px 0 3px 0;
 }

core/modules/system/templates/admin-block-content.html.twig

@@ -18,16 +18,16 @@
 #}
 {%
   set classes = [
-    'admin-list',
+    'list-group',
     compact ? 'compact',
   ]
 %}
 {% if content %}
   <dl{{ attributes.addClass(classes) }}>
     {% for item in content %}
-      <dt>{{ item.link }}</dt>
+      <dt class="list-group__link">{{ item.link }}</dt>
       {% if item.description %}
-        <dd>{{ item.description }}</dd>
+        <dd class="list-group__description">{{ item.description }}</dd>
       {% endif %}
     {% endfor %}
   </dl>

core/modules/system/templates/admin-block.html.twig

@@ -14,13 +14,13 @@
  * @ingroup themeable
  */
 #}
-<div class="admin-panel">
+<div class="panel">
   {% if block.title %}
-    <h3>{{ block.title }}</h3>
+    <h3 class="panel__title">{{ block.title }}</h3>
   {% endif %}
   {% if block.content %}
-    <div class="body">{{ block.content }}</div>
+    <div class="panel__content">{{ block.content }}</div>
   {% elseif block.description %}
-    <div class="description">{{ block.description }}</div>
+    <div class="panel__description">{{ block.description }}</div>
   {% endif %}
 </div>

core/themes/bartik/bartik.libraries.yml

@@ -21,9 +21,11 @@ global-styling:
       css/components/header.css: {}
       css/components/region-help.css: {}
       css/components/item-list.css: {}
+      css/components/list-group.css: {}
       css/components/messages.css: {}
       css/components/node-preview.css: {}
       css/components/pager.css: {}
+      css/components/panel.css: {}
       css/components/primary-menu.css: {}
       css/components/search.css: {}
       css/components/search-results.css: {}

core/themes/bartik/css/components/admin.css

@@ -31,27 +31,4 @@
   width: 500px;
 }
 
-/* Configuration. */
-div.admin-panel {
-  background: #fbfbfb;
-  border: 1px solid #ccc;
-  margin: 10px 0;
-  padding: 0 5px 5px;
-}
-div.admin-panel h3 {
-  margin: 16px 7px;
-}
-div.admin-panel dt {
-  border-top: 1px solid #ccc;
-  padding: 7px 0 0;
-}
-div.admin-panel dd {
-  margin: 0 0 10px;
-}
-div.admin-panel .description {
-  margin: 0 0 14px 7px; /* LTR */
-}
-[dir="rtl"] div.admin-panel .description {
-  margin-left: 0;
-  margin-right: 7px;
-}
+

core/themes/bartik/css/components/list-group.css

+/**
+ * @file
+ * List group.
+ * A list of links, grouped together.
+ */
+
+.list-group__link {
+  border-top: 1px solid #ccc;
+  padding: 7px 0 0;
+}
+.list-group__description {
+  margin: 0 0 10px;
+}

core/themes/bartik/css/components/panel.css

+/**
+ * @file
+ * Panel styling. Panels are used to visually group items together.
+ */
+
+.panel {
+  background: #fbfbfb;
+  border: 1px solid #ccc;
+  margin: 10px 0;
+  padding: 0 5px 5px;
+}
+.panel__title {
+  margin: 16px 7px;
+}
+.panel__content {
+  padding: 0 4px 2px 8px; /* LTR */
+}
+[dir="rtl"] .panel__content {
+  padding-right: 8px;
+  padding-left: 4px;
+}

core/themes/seven/css/components/admin-panel.css → core/themes/seven/css/components/panel.css

 /**
- * Admin panel.
+ * @file
+ * Panel styling. Panels are used to visually group items together.
  */
-div.admin-panel,
-div.admin-panel .body {
-  padding: 0;
-  clear: left;
-}
-div.admin-panel {
+
+.panel {
   margin: 0 0 20px;
   padding: 9px;
   background: #f8f8f8;
   border: 1px solid #ccc;
 }
-div.admin-panel h3 {
+.panel__title {
   font-size: 0.923em;
   text-transform: uppercase;
   margin: 0;

core/themes/seven/seven.libraries.yml

@@ -7,7 +7,6 @@ global-styling:
       css/base/print.css: {}
     component:
       css/components/admin-list.css: {}
-      css/components/admin-panel.css: {}
       css/components/block-recent-content.css: {}
       css/components/content-header.css: {}
       css/components/breadcrumb.css: {}
@@ -24,6 +23,7 @@ global-styling:
       css/components/node.css: {}
       css/components/page-title.css: {}
       css/components/pager.css: {}
+      css/components/panel.css: {}
       css/components/skip-link.css: {}
       css/components/tables.css: {}
       css/components/tabs.css: {}