From 526be88d7bed950ed997124d8c3e5bbc2d21888a Mon Sep 17 00:00:00 2001
From: Xin <xin@imfing.com>
Date: Sun, 18 Aug 2024 15:38:06 +0100
Subject: [PATCH] fix: tabs styling in steps shortcode (#440)

* fix: tabs styling in steps shortcode

* docs: add notes for intended usage
---
 exampleSite/content/docs/guide/shortcodes/steps.md | 5 +++++
 layouts/shortcodes/tab.html                        | 7 ++++---
 layouts/shortcodes/tabs.html                       | 9 +++++----
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/exampleSite/content/docs/guide/shortcodes/steps.md b/exampleSite/content/docs/guide/shortcodes/steps.md
index 584f081..6c66c07 100644
--- a/exampleSite/content/docs/guide/shortcodes/steps.md
+++ b/exampleSite/content/docs/guide/shortcodes/steps.md
@@ -25,6 +25,11 @@ This is the third step.
 
 ## Usage
 
+{{< callout emoji="ℹ️" >}}
+  Please note that this shortcode is intended **only for Markdown content**.
+  If you put HTML content or other shortcodes as step content, it may not render as expected.
+{{< /callout >}}
+
 Put Markdown h3 header within `steps` shortcode.
 
 ```
diff --git a/layouts/shortcodes/tab.html b/layouts/shortcodes/tab.html
index 3d0fb47..2a15791 100644
--- a/layouts/shortcodes/tab.html
+++ b/layouts/shortcodes/tab.html
@@ -4,8 +4,9 @@
   class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
   id="tabs-panel-{{ .Ordinal }}"
   role="tabpanel"
-  {{ if eq .Ordinal $defaultIndex }}tabindex="0"{{ end }}
-  {{ if eq .Ordinal $defaultIndex }}data-state="selected"{{ end }}
+  {{- if eq .Ordinal $defaultIndex }} tabindex="0" {{ end -}}
+  {{- if eq .Ordinal $defaultIndex }} data-state="selected" {{ end -}}
 >
-  {{ .InnerDeindent | markdownify }}
+  {{- .InnerDeindent | markdownify -}}
 </div>
+{{- /* Drop trailing newlines */ -}}
diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html
index a2da907..c1df7cc 100644
--- a/layouts/shortcodes/tabs.html
+++ b/layouts/shortcodes/tabs.html
@@ -13,9 +13,9 @@
         role="tab"
         type="button"
         aria-controls="tabs-panel-{{ $i }}"
-        {{ if eq $i $defaultIndex }}aria-selected="true"{{ end }}
-        {{ if eq $i $defaultIndex }}tabindex="0"{{ end }}
-        {{ if eq $i $defaultIndex }}data-state="selected"{{ end }}
+        {{- if eq $i $defaultIndex }} aria-selected="true" {{ end -}}
+        {{- if eq $i $defaultIndex }} tabindex="0" {{ end -}}
+        {{- if eq $i $defaultIndex }} data-state="selected"{{ end -}}
       >
         {{- $item -}}
       </button>
@@ -23,5 +23,6 @@
   </div>
 </div>
 <div>
-  {{ .Inner }}
+  {{- .Inner -}}
 </div>
+{{- /* Drop trailing newlines */ -}}