From e30915dba4b460af8cc1bc1917278ce81c157c02 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 13 Jul 2022 16:50:53 +0530 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=93=9D=20docs(side=20tabs):=20update?= =?UTF-8?q?=20documentation=20for=20side=20tabs=20radiobox?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- page-side-tabs.html | 125 ++++++++++++++++++-------------------------- 1 file changed, 52 insertions(+), 73 deletions(-) diff --git a/page-side-tabs.html b/page-side-tabs.html index 8937934a..06aebe84 100644 --- a/page-side-tabs.html +++ b/page-side-tabs.html @@ -396,86 +396,65 @@

Sample Markup

-<div class="sui-tabs sui-side-tabs">
-
-	<div role="tablist" class="sui-tabs-menu">
-
-		<!--
-		NOTE(S):
-
-		1. Include "type" attribute when using tabs inside a form to prevent
-		problems when submitting the form.
-
-		2. Include "aria-controls" attribute when using tabs with content.
-
-		3. Unique IDs are a must for button tab and its content.
-		-->
+<div class="sui-side-tabs">
 
-		<button
-			type="button"
-			role="tab"
-			id="one__tab"
-			class="sui-tab-item active"
-			aria-controls="one__content"
-			aria-selected="true">
+	<div class="sui-tabs-menu">
+		<label class="sui-tab-item active" class="active">
+			<input 
+				type="radio" 
+				data-tab-menu="get-tab-1" 
+				checked="checked" 
+				id="sample-tab-1">
 			Tab 1
-		</button>
-		<input
-			type="radio"
-			name="sample-tabs"
-			value="one"
-			class="sui-screen-reader-text"
-			aria-label="Tab 1"
-			aria-hidden="true"
-			checked="checked" />
-
-		<button
-			type="button"
-			role="tab"
-			id="two__tab"
-			class="sui-tab-item"
-			aria-controls="two__content"
-			aria-selected="false"
-			tabindex="-1">
+		</label>
+		<label class="sui-tab-item">
+			<input 
+				type="radio" 
+				data-tab-menu="get-tab-2" 
+				id="sample-tab-2">
 			Tab 2
-		</button>
-		<input
-			type="radio"
-			name="sample-tabs"
-			value="two"
-			class="sui-screen-reader-text"
-			aria-label="Tab 2"
-			aria-hidden="true" />
-
+		</label>
+		<label class="sui-tab-item">
+			<input 
+				type="radio" 
+				data-tab-menu="get-tab-3" 
+				id="sample-tab-3">
+			Tab 3
+		</label>
+		<label class="sui-tab-item">
+			<input 
+				type="radio" 
+				data-tab-menu="get-tab-4"
+				id="sample-tab-4">
+			Tab 4
+		</label>
 	</div>
 
-	<div class="sui-tabs-content">
-
-		<div role="tabpanel"
-			id="one__content"
-			class="sui-tab-content active"
-			aria-labelledby="one__tab"
-			tabindex="0">
-
-			<div class="sui-border-frame">
-				<p>Tab 1</p>
-			</div>
-
+	<div data-panes>
+		<div 
+			class="sui-tab-content sui-tab-boxed active" 
+			data-tab-content="get-tab-1"
+		>
+				<p>Content. Tab 1.</p>
 		</div>
-
-		<div role="tabpanel"
-			id="two__content"
-			class="sui-tab-content"
-			aria-labelledby="two__tab"
-			tabindex="0"
-			hidden>
-
-			<div class="sui-border-frame">
-				<p>Tab 2</p>
-			</div>
-
+		<div 
+			class="sui-tab-content sui-tab-boxed" 
+			data-tab-content="get-tab-2"
+		>
+				<p>Content. Tab 2.</p>
+		</div>
+		<div 
+			class="sui-tab-content sui-tab-boxed" 
+			data-tab-content="get-tab-3"
+		>
+				<p>Content. Tab 3.</p>
+		</div>
+		<div 
+			class="sui-tab-content sui-tab-boxed" 
+			data-tab-content="get-tab-4"
+		>
+				<p>Content. Tab 4.</p>
 		</div>
-
 	</div>
 
 </div>

From 7e400d6791c5f329d16b323dc6172003f6bc09d8 Mon Sep 17 00:00:00 2001
From: Pawan Kumar 
Date: Thu, 14 Jul 2022 14:39:59 +0530
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=93=9D=20docs(side=20tabs):=20remove?=
 =?UTF-8?q?=20unnecessar=20y=20documentation.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 page-side-tabs.html | 125 ++++++++++++++++++++++++++------------------
 1 file changed, 73 insertions(+), 52 deletions(-)

diff --git a/page-side-tabs.html b/page-side-tabs.html
index 06aebe84..8937934a 100644
--- a/page-side-tabs.html
+++ b/page-side-tabs.html
@@ -396,65 +396,86 @@ 
Sample Markup

 									

 
 
-<div class="sui-side-tabs">
+<div class="sui-tabs sui-side-tabs">
 
-	<div class="sui-tabs-menu">
-		<label class="sui-tab-item active" class="active">
-			<input 
-				type="radio" 
-				data-tab-menu="get-tab-1" 
-				checked="checked" 
-				id="sample-tab-1">
+	<div role="tablist" class="sui-tabs-menu">
+
+		<!--
+		NOTE(S):
+
+		1. Include "type" attribute when using tabs inside a form to prevent
+		problems when submitting the form.
+
+		2. Include "aria-controls" attribute when using tabs with content.
+
+		3. Unique IDs are a must for button tab and its content.
+		-->
+
+		<button
+			type="button"
+			role="tab"
+			id="one__tab"
+			class="sui-tab-item active"
+			aria-controls="one__content"
+			aria-selected="true">
 			Tab 1
-		</label>
-		<label class="sui-tab-item">
-			<input 
-				type="radio" 
-				data-tab-menu="get-tab-2" 
-				id="sample-tab-2">
+		</button>
+		<input
+			type="radio"
+			name="sample-tabs"
+			value="one"
+			class="sui-screen-reader-text"
+			aria-label="Tab 1"
+			aria-hidden="true"
+			checked="checked" />
+
+		<button
+			type="button"
+			role="tab"
+			id="two__tab"
+			class="sui-tab-item"
+			aria-controls="two__content"
+			aria-selected="false"
+			tabindex="-1">
 			Tab 2
-		</label>
-		<label class="sui-tab-item">
-			<input 
-				type="radio" 
-				data-tab-menu="get-tab-3" 
-				id="sample-tab-3">
-			Tab 3
-		</label>
-		<label class="sui-tab-item">
-			<input 
-				type="radio" 
-				data-tab-menu="get-tab-4"
-				id="sample-tab-4">
-			Tab 4
-		</label>
+		</button>
+		<input
+			type="radio"
+			name="sample-tabs"
+			value="two"
+			class="sui-screen-reader-text"
+			aria-label="Tab 2"
+			aria-hidden="true" />
+
 	</div>
 
-	<div data-panes>
-		<div 
-			class="sui-tab-content sui-tab-boxed active" 
-			data-tab-content="get-tab-1"
-		>
-				<p>Content. Tab 1.</p>
-		</div>
-		<div 
-			class="sui-tab-content sui-tab-boxed" 
-			data-tab-content="get-tab-2"
-		>
-				<p>Content. Tab 2.</p>
-		</div>
-		<div 
-			class="sui-tab-content sui-tab-boxed" 
-			data-tab-content="get-tab-3"
-		>
-				<p>Content. Tab 3.</p>
+	<div class="sui-tabs-content">
+
+		<div role="tabpanel"
+			id="one__content"
+			class="sui-tab-content active"
+			aria-labelledby="one__tab"
+			tabindex="0">
+
+			<div class="sui-border-frame">
+				<p>Tab 1</p>
+			</div>
+
 		</div>
-		<div 
-			class="sui-tab-content sui-tab-boxed" 
-			data-tab-content="get-tab-4"
-		>
-				<p>Content. Tab 4.</p>
+
+		<div role="tabpanel"
+			id="two__content"
+			class="sui-tab-content"
+			aria-labelledby="two__tab"
+			tabindex="0"
+			hidden>
+
+			<div class="sui-border-frame">
+				<p>Tab 2</p>
+			</div>
+
 		</div>
+
 	</div>
 
 </div>