fix: tabs styling in steps shortcode (#440)

* fix: tabs styling in steps shortcode * docs: add notes for intended usage
imfing · Aug 18, 2024 · 526be88 · 526be88
1 parent 2863a3a
commit 526be88
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git 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
@@ -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
@@ -13,15 +13,16 @@
  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>
  {{- end -}}
  </div>
 </div>
 <div>
- {{ .Inner }}
+ {{- .Inner -}}
 </div>
+{{- /* Drop trailing newlines */ -}}