help: Add tab styling to untabbed instructions as well.

This changes the border-radius to 6px for the tabbed display, which is not
in line with the current Zulip style for border-radius (4px). However 6px
really looks a lot better for this (possibly because it's a bigger box than
most of our other boxes?)

static/styles/portico.scss

@@ -109,12 +109,21 @@ body {
     border-radius: 4px 4px 0px 0px;
 }
 
+.code-section.no-tabs ul.nav {
+    display: none;
+}
+
 .code-section .blocks {
     padding: 10px;
-
     border: 1px solid hsl(0, 0%, 87%);
+}
 
-    border-radius: 0px 4px 4px 4px;
+.code-section.has-tabs .blocks {
+    border-radius: 0px 6px 6px 6px;
+}
+
+.code-section.no-tabs .blocks {
+    border-radius: 6px;
 }
 
 /* The API tabbed content tends to have a lot of code blocks,
@@ -138,7 +147,8 @@ body {
     display: none;
 }
 
-.code-section .blocks > .active {
+.code-section.no-tabs .blocks > div,
+.code-section.has-tabs .blocks > .active {
     display: block;
 }
 

templates/zerver/help/change-your-name.md

@@ -7,12 +7,16 @@ Organization administrators can [change anyone's name](/help/change-a-users-name
 [prevent users from changing their names](/help/restrict-name-and-email-changes). This
 is useful when users' names are managed via LDAP or another data source.
 
+{start_tabs}
+
 {settings_tab|your-account}
 
 1. Under **User settings**, click on the button with your name in it.
 
 1. Change your name, and click **Save**.
 
+{end_tabs}
+
 !!! warn ""
     **Note:** If you are unable to click on the button with your name, check
     that your organization allows name changes. Follow the steps at

templates/zerver/tests/markdown/test_tabbed_sections.md

@@ -20,3 +20,9 @@ Desktop/browser instructions
 {tab|android}
 Android instructions
 {end_tabs}
+
+## Heading 3
+
+{start_tabs}
+Instructions for all platforms
+{end_tabs}

zerver/lib/bugdown/tabbed_sections.py

@@ -10,7 +10,7 @@ END_TABBED_SECTION_REGEX = re.compile(r'^\{end_tabs\}$')
 TAB_CONTENT_REGEX = re.compile(r'^\{tab\|\s*(.+?)\s*\}$')
 
 CODE_SECTION_TEMPLATE = """
-<div class="code-section" markdown="1">
+<div class="code-section {tab_class}" markdown="1">
 {nav_bar}
 <div class="blocks">
 {blocks}
@@ -65,10 +65,16 @@ class TabbedSectionsPreprocessor(Preprocessor):
     def run(self, lines: List[str]) -> List[str]:
         tab_section = self.parse_tabs(lines)
         while tab_section:
+            if 'tabs' in tab_section:
+                tab_class = 'has-tabs'
+            else:
+                tab_class = 'no-tabs'
+                tab_section['tabs'] = [{'tab_name': 'null_tab',
+                                        'start': tab_section['start_tabs_index']}]
             nav_bar = self.generate_nav_bar(tab_section)
             content_blocks = self.generate_content_blocks(tab_section, lines)
             rendered_tabs = CODE_SECTION_TEMPLATE.format(
-                nav_bar=nav_bar, blocks=content_blocks)
+                tab_class=tab_class, nav_bar=nav_bar, blocks=content_blocks)
 
             start = tab_section['start_tabs_index']
             end = tab_section['end_tabs_index'] + 1

zerver/tests/test_templates.py

@@ -239,7 +239,7 @@ header
 
 <h1 id="heading">Heading</h1>
 <p>
-  <div class="code-section" markdown="1">
+  <div class="code-section has-tabs" markdown="1">
     <ul class="nav">
       <li data-language="ios">iOS</li>
       <li data-language="desktop-web">Desktop/Web</li>
@@ -257,7 +257,7 @@ header
 
 <h2 id="heading-2">Heading 2</h2>
 <p>
-  <div class="code-section" markdown="1">
+  <div class="code-section has-tabs" markdown="1">
     <ul class="nav">
       <li data-language="desktop-web">Desktop/Web</li>
       <li data-language="android">Android</li>
@@ -273,6 +273,20 @@ header
   </div>
 </p>
 
+<h2 id="heading-3">Heading 3</h2>
+<p>
+  <div class="code-section no-tabs" markdown="1">
+    <ul class="nav">
+      <li data-language="null_tab">None</li>
+    </ul>
+    <div class="blocks">
+      <div data-language="null_tab" markdown="1"></p>
+        <p>Instructions for all platforms</p>
+      <p></div>
+    </div>
+  </div>
+</p>
+
 footer
 """