feat: w-16216523. Align Array to the top

Author: spezzirriemiliano

src/PropertyShapeDocument.js

@@ -870,9 +870,11 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
       propertyName,
       parentTypeName,
       hasParentTypeName,
+      isComplex,
+      avroValue
     } = this;
-    if(!hasDisplayName && !propertyName && this.isComplex && this.avroValue){
-      return html`<div class="property-display-name">${this.avroValue}</div>`
+    if(!hasDisplayName && !propertyName && isComplex && avroValue){
+      return html`<div class="property-display-name">${avroValue}</div>`
     }
     return html` ${hasDisplayName
       ? html`<div class="property-display-name">${displayName}</div>`
@@ -894,6 +896,20 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
     return html`<div class="deprecated-warning">Warning: Deprecated</div>`
   }
 
+  _noNameAvroClass() {
+    const {
+      hasDisplayName,
+      propertyName,
+      isComplex,
+      avroValue,
+      _renderToggleButton
+    } = this;
+    if(!hasDisplayName && !propertyName && isComplex && !avroValue && _renderToggleButton){
+      return ' no-name'
+    }
+    return ''
+  }
+
   /**
    * @return {TemplateResult} Main render function.
    */
@@ -902,7 +918,7 @@ export class PropertyShapeDocument extends PropertyDocumentMixin(LitElement) {
         ${this.styles}
       </style>
       ${this._headerTemplate()}
-      <div class="property-traits">
+      <div class="property-traits${this._noNameAvroClass()}">
         ${this._getTypeNameTemplate()}
         ${this.isRequired
           ? html`<span

src/ShapeStyles.js

@@ -1,17 +1,11 @@
-import { css } from 'lit-element';
+import { css } from "lit-element";
 
 export default css`
   :host {
     display: block;
     border-bottom-width: 1px;
-    border-bottom-color: var(
-      --property-shape-document-border-bottom-color,
-      #cfd8dc
-    );
-    border-bottom-style: var(
-      --property-shape-document-border-bottom-style,
-      dashed
-    );
+    border-bottom-color: var(--property-shape-document-border-bottom-color, #cfd8dc);
+    border-bottom-style: var(--property-shape-document-border-bottom-style, dashed);
     padding: var(--property-shape-document-padding);
   }
 
@@ -24,38 +18,20 @@ export default css`
   }
 
   .property-title {
-    font-family: var(
-      --property-shape-document-title-font-family,
-      var(--arc-font-subhead-font-family)
-    );
-    font-size: var(
-      --property-shape-document-title-font-size,
-      var(--arc-font-subhead-font-size, 1rem)
-    );
-    font-weight: var(
-      --property-shape-document-title-font-weight,
-      var(--arc-font-subhead-font-weight)
-    );
-    line-height: var(
-      --property-shape-document-title-line-height,
-      var(--arc-font-subhead-line-height)
-    );
-
-    margin: var(
-      --property-shape-document-title-margin,
-      4px 0 4px 0
-    );
+    font-family: var(--property-shape-document-title-font-family, var(--arc-font-subhead-font-family));
+    font-size: var(--property-shape-document-title-font-size, var(--arc-font-subhead-font-size, 1rem));
+    font-weight: var(--property-shape-document-title-font-weight, var(--arc-font-subhead-font-weight));
+    line-height: var(--property-shape-document-title-line-height, var(--arc-font-subhead-line-height));
+
+    margin: var(--property-shape-document-title-margin, 4px 0 4px 0);
     font-size: 1rem;
     font-weight: var(--api-type-document-property-title-font-weight, 500);
     word-break: break-word;
     color: var(--api-type-document-property-title-color);
   }
 
   .property-title[secondary] {
-    font-weight: var(
-      --api-type-document-property-title-secondary-font-weight,
-      400
-    );
+    font-weight: var(--api-type-document-property-title-secondary-font-weight, 400);
     color: var(--api-type-document-property-title-secondary-color, #616161);
   }
 
@@ -65,10 +41,7 @@ export default css`
 
   .property-display-name {
     font-weight: var(--api-type-document-property-name-font-weight, 500);
-    color: var(
-      --api-type-document-property-name-color,
-      var(--api-type-document-property-color, #212121)
-    );
+    color: var(--api-type-document-property-name-color, var(--api-type-document-property-color, #212121));
     margin: 4px 0 4px 0;
     font-size: var(--api-type-document-property-name-font-size, 16px);
   }
@@ -117,6 +90,10 @@ export default css`
     margin-bottom: 8px;
   }
 
+  .property-traits.no-name {
+    margin-top: -33px;
+  }
+
   .property-traits > span {
     display: inline-block;
     margin-right: 8px;
@@ -163,7 +140,7 @@ export default css`
     -ms-flex: 1;
     flex: 1;
   }
-  
+
   .property-traits > span.readonly-type {
     background-color: var(--api-type-readonly-property-background-color, #ff9292);
     color: var(--api-type-readonly-property-color, black);