Display tag items as pills

We already had this styling in our FollowTag formatting, but it's
actually a universal design pattern for tags in Open Social that they're
displayed as small pills. To accomplish this we add the classes in our
TagSplitFormatter so that themes can use this.

This is accompanied by a field file change in socialbase that ensures
the main label for the profile tag field is not shown but the individual
labels of the subfields are rendered as labels instead.

modules/custom/social_tag_split/src/Plugin/Field/FieldFormatter/TagSplitFormatter.php

@@ -119,7 +119,30 @@ function (EntityReferenceItem $item) use ($parent_id) {
   protected function viewHierarchy(TermInterface $parent, EntityReferenceFieldItemListInterface $items, string $langcode) : array {
     return [
       'label' => ["#plain_text" => $parent->label()],
-      'items' => parent::viewElements($items, $langcode),
+      'items' => array_map(
+        function (array $element) {
+          // Move any '#options.attributes' to '#attributes' which makes for a
+          // more ergonomic DX for extending formatters.
+          $element['#attributes'] = $element['#options']['attributes'] ?? [];
+          unset($element['#options']['attributes']);
+
+          if (!isset($element['#attributes']['class'])) {
+            $element['#attributes']['class'] = [];
+          }
+
+          // In Open Social our tags are shown as pills, so we add the badge
+          // classes that allow styling this way.
+          $element['#attributes']['class'] += [
+            'badge',
+            'badge-default',
+            'badge--large',
+            'badge--pill',
+          ];
+
+          return $element;
+        },
+        parent::viewElements($items, $langcode)
+      ),
     ];
   }
 

modules/social_features/social_follow_taxonomy/modules/social_follow_tag/src/Plugin/Field/FieldFormatter/FollowTagSplitFormatter.php

@@ -55,10 +55,6 @@ protected function viewHierarchy(TermInterface $parent, EntityReferenceFieldItem
         $classes[] = "term-followed";
       }
       $classes += [
-        'badge',
-        'badge-default',
-        'badge--large',
-        'badge--pill',
         'btn-action__term',
       ];
       $field['items'][$delta] = [

modules/social_features/social_profile/config/install/core.entity_view_display.profile.profile.default.yml

@@ -117,7 +117,7 @@ content:
   field_profile_profile_tag:
     type: social_tag_split
     weight: 6
-    label: visually_hidden
+    label: inline
     settings:
       link: true
     third_party_settings: {  }

modules/social_features/social_profile/config/update/social_profile_update_12026.yml

@@ -0,0 +1,10 @@
+core.entity_view_display.profile.profile.default:
+  expected_config:
+    content:
+      field_profile_profile_tag:
+        label: visually_hidden
+  update_actions:
+    change:
+      content:
+        field_profile_profile_tag:
+          label: inline

modules/social_features/social_profile/social_profile.install

@@ -2036,3 +2036,21 @@ function social_profile_update_12025() : string {
   // Output logged messages to related channel of update execution.
   return $updater->logger()->output();
 }
+
+/**
+ * Ensure profile tag labels are displayed inline.
+ */
+function social_profile_update_12026() : string {
+  // The profile tag field is shown as individual fields but they respect the
+  // label display set on the parent (even though the label itself is never
+  // rendered). Thus the label must be inline to ensure that happens for every
+  // individual "subfield".
+  /** @var \Drupal\update_helper\Updater $updater */
+  $updater = \Drupal::service('update_helper.updater');
+
+  // Execute configuration update definitions with logging of success.
+  $updater->executeUpdate('social_profile', 'social_profile_update_12026');
+
+  // Output logged messages to related channel of update execution.
+  return $updater->logger()->output();
+}