Adopt badge design for all features dart-lang#3047 (dart-lang#3101)

Author: klr981

lib/resources/styles.css

@@ -647,12 +647,14 @@ h1 .category {
   vertical-align: middle;
 }
 
+/* The badge under a declaration for things like "const", "read-only", etc. and for the badges inline like Null safety*/
+/* See https://github.com/dart-lang/dartdoc/blob/master/lib/src/model/feature.dart */
 .feature {
   display: inline-block;
-  background: white;
-  border: 1px solid #0175c2;
+  background: var(--main-bg-color);
+  border: 1px solid var(--main-hyperlinks-color);
   border-radius: 20px;
-  color: #0175c2;
+  color: var(--main-hyperlinks-color);;
 
   font-size: 12px;
   padding: 1px 6px;
@@ -796,14 +798,6 @@ td {
   padding: 0;
 }
 
-li
-
-/* The slug line under a declaration for things like "const", "read-only", etc. */
-.features {
-  font-style: italic;
-  color: #727272;
-}
-
 .multi-line-signature {
   font-size: 17px;
   color: #727272;

lib/src/generator/templates.runtime_renderers.dart

@@ -407,6 +407,28 @@ class _Renderer_Annotation extends RendererBase<Annotation> {
                         getters: _invisibleGetters['ElementAnnotation']!);
                   },
                 ),
+                'cssClassName': Property(
+                  getValue: (CT_ c) => c.cssClassName,
+                  renderVariable:
+                      (CT_ c, Property<CT_> self, List<String> remainingNames) {
+                    if (remainingNames.isEmpty) {
+                      return self.getValue(c).toString();
+                    }
+                    var name = remainingNames.first;
+                    var nextProperty =
+                        _Renderer_String.propertyMap().getValue(name);
+                    return nextProperty.renderVariable(
+                        self.getValue(c) as String,
+                        nextProperty,
+                        [...remainingNames.skip(1)]);
+                  },
+                  isNullValue: (CT_ c) => false,
+                  renderValue: (CT_ c, RendererBase<CT_> r,
+                      List<MustachioNode> ast, StringSink sink) {
+                    _render_String(c.cssClassName, ast, r.template, sink,
+                        parent: r);
+                  },
+                ),
                 'hashCode': Property(
                   getValue: (CT_ c) => c.hashCode,
                   renderVariable: (CT_ c, Property<CT_> self,
@@ -5137,6 +5159,28 @@ class _Renderer_Feature extends RendererBase<Feature> {
           CT_,
           () => {
                 ..._Renderer_Object.propertyMap<CT_>(),
+                'cssClassName': Property(
+                  getValue: (CT_ c) => c.cssClassName,
+                  renderVariable:
+                      (CT_ c, Property<CT_> self, List<String> remainingNames) {
+                    if (remainingNames.isEmpty) {
+                      return self.getValue(c).toString();
+                    }
+                    var name = remainingNames.first;
+                    var nextProperty =
+                        _Renderer_String.propertyMap().getValue(name);
+                    return nextProperty.renderVariable(
+                        self.getValue(c) as String,
+                        nextProperty,
+                        [...remainingNames.skip(1)]);
+                  },
+                  isNullValue: (CT_ c) => false,
+                  renderValue: (CT_ c, RendererBase<CT_> r,
+                      List<MustachioNode> ast, StringSink sink) {
+                    _render_String(c.cssClassName, ast, r.template, sink,
+                        parent: r);
+                  },
+                ),
                 'featurePrefix': Property(
                   getValue: (CT_ c) => c.featurePrefix,
                   renderVariable:
@@ -16009,6 +16053,7 @@ const _invisibleGetters = {
     'runtimeType'
   },
   'Feature': {
+    'cssClassName',
     'featurePrefix',
     'hashCode',
     'isPublic',

lib/src/model/annotation.dart

@@ -74,4 +74,7 @@ class Annotation extends Feature with ModelBuilder {
 
   @override
   int get hashCode => annotation.hashCode;
+
+  @override
+  String get cssClassName => '';
 }

lib/src/model/feature.dart

@@ -31,6 +31,8 @@ class Feature implements Privacy {
 
   final String featurePrefix = '';
 
+  String get cssClassName => 'feature';
+
   String get name => _name;
 
   String get linkedName => name;

lib/src/render/model_element_renderer.dart

@@ -17,7 +17,10 @@ abstract class ModelElementRenderer {
 
   String renderFeatures(ModelElement modelElement) {
     var allFeatures = modelElement.features.toList()..sort(byFeatureOrdering);
-    return allFeatures.map((f) => f.linkedNameWithParameters).join(', ');
+    return allFeatures
+        .map((f) =>
+            '<span class="${f.cssClassName} ${f.linkedNameWithParameters}">${f.linkedNameWithParameters}</span>')
+        .join();
   }
 }
 

test/templates/enum_test.dart

@@ -244,7 +244,7 @@ enum EnumWithDefaultConstructor { four, five, six }
             matches('<h2>Properties</h2>'),
             matches('<a href="../lib/E/ig1.html">ig1</a>'),
             matches('An instance getter.'),
-            matches('<div class="features">read-only</div>'),
+            matches('<span class="feature read-only">read-only</span>'),
           ]));
     });
 
@@ -255,7 +255,7 @@ enum EnumWithDefaultConstructor { four, five, six }
             matches('<h2>Properties</h2>'),
             matches('<a href="../lib/E/is1.html">is1</a>'),
             matches('An instance setter.'),
-            matches('<div class="features">write-only</div>'),
+            matches('<span class="feature write-only">write-only</span>'),
           ]));
     });