fix(panel): align button and make clearer (#98)

* fix(panel): align button and make clearer fixes #97 * chore: remove headerText
algolia · Mar 8, 2019 · bad5d03 · bad5d03
1 parent befa0d3
commit bad5d03
Showing 1 changed file with 21 additions and 5 deletions.
diff --git a/packages/instantsearch-specs/content/widgets/panel.md b/packages/instantsearch-specs/content/widgets/panel.md
@@ -3,23 +3,37 @@ title: Panel
 type: widget
 html: |
   <div class="ais-Panel">
-    <div class="ais-Panel-header">Header</div>
+    <div class="ais-Panel-header">
+      <span>Header</span>
+    </div>
     <div class="ais-Panel-body">Panel content</div>
     <div class="ais-Panel-footer">Footer</div>
   </div>
 alt1: Collapsible
 althtml1: |
   <div class="ais-Panel ais-Panel--collapsible">
-    <div class="ais-Panel-header">Header</div>
-    <button class="ais-Panel-collapseButton" aria-expanded="true">➖</button>
+    <div class="ais-Panel-header">
+      <span>Header</span>
+      <button class="ais-Panel-collapseButton" aria-expanded="true">
+        <svg class="ais-Panel-collapseIcon" width="1em" height="1em" viewBox="0 0 500 500">
+          <path d="M250 400l150-300H100z" fill="currentColor" />
+        </svg>
+      </button>
+    </div>
     <div class="ais-Panel-body">Panel content</div>
     <div class="ais-Panel-footer">Footer</div>
   </div>
 alt2: Collapsed
 althtml2: |
   <div class="ais-Panel ais-Panel--collapsible ais-Panel--collapsed">
-    <div class="ais-Panel-header">Header</div>
-    <button class="ais-Panel-collapseButton" aria-expanded="false">➕</button>
+    <div class="ais-Panel-header">
+      <span>Header</span>
+      <button class="ais-Panel-collapseButton" aria-expanded="false">
+        <svg class="ais-Panel-collapseIcon" width="1em" height="1em" viewBox="0 0 500 500">
+          <path d="M100 250l300-150v300z" fill="currentColor" />
+        </svg>
+      </button>
+    </div>
     <div class="ais-Panel-body">Panel content</div>
     <div class="ais-Panel-footer">Footer</div>
   </div>
@@ -38,6 +52,8 @@ classes:
     description: the footer of the Panel (optional)
   - name: .ais-Panel-collapseButton
     description: the button that collapses the panel (mandatory when the panel is collapsible)
+  - name: .ais-Panel-collapseIcon
+    description: the icon in the button that collapses the panel (mandatory when the panel is collapsible)
 options:
   - name: header
     description: Text to put before the widget