Updated docs, story descriptions & css vars

capitec · Jul 3, 2023 · f8caa8a · f8caa8a
1 parent e770a34
commit f8caa8a
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 16 deletions.
diff --git a/src/tab/Tab.stories.ts b/src/tab/Tab.stories.ts
@@ -55,7 +55,7 @@ const App = () =>
     name: 'Basic',
     description: () => html`
     <div>
-        This is the recommended use of the <code class="language-html">&lt;omni-tab-group&gt;</code> with slotted <code class="language-html">&lt;omni-tab&gt;</code> component(s), headers for each tab are set by setting the <code>header</code> attribute of the <code class="language-html">&lt;omni-tab&gt;</code>.
+        This is the recommended use. Headers for each tab is set by the <code>header</code> attribute.
     <div>
     `,
     play: async (context) => {
@@ -123,7 +123,7 @@ const App = () =>
     name: 'Active',
     description: () => html`
     <div>
-        Set which <code class="language-html">&lt;omni-tab&gt;</code> slotted in the <code class="language-html">&lt;omni-tab-group&gt;</code> should be active by default. By setting the <code>active</code> attribute of one of the slotted <code class="language-html">&lt;omni-tab&gt;</code> components.
+     Set the <code>active</code> attribute on an <code class="language-html">&lt;omni-tab&gt;</code> to indicate its active. By default, the first slotted one is active.
     <div>
     `,
     play: async (context) => {
@@ -198,7 +198,7 @@ const App = () =>
     name: 'Disabled',
     description: () => html`
     <div>
-        Set a <code class="language-html">&lt;omni-tab&gt;</code> slotted in the <code class="language-html">&lt;omni-tab-group&gt;</code> component to be disabled by setting <code>disabled</code> attribute.
+     Set the <code>disabled</code> attribute on an <code class="language-html">&lt;omni-tab&gt;</code> to indicate its disabled.
     <div>
     `,
     args: {},

diff --git a/src/tab/Tab.ts b/src/tab/Tab.ts
@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { OmniElement } from '../core/OmniElement.js';
 
 /**
- * Control that can be used to display slotted content, for use within an omni-tab-group component.
+ * Control that can be used to display slotted content, for use within an Tab Group component.
  *
  * @import
  * ```js

diff --git a/src/tab/TabGroup.stories.ts b/src/tab/TabGroup.stories.ts
@@ -41,7 +41,7 @@ export const Interactive: ComponentStoryFormat<Args> = {
         The <code class="language-html">&lt;omni-tab-group&gt;</code> component will display content based on the slotted <code class="language-html">&lt;omni-tab&gt;</code> component(s). 
         </p>
         <p>
-        Tab headers are rendered by either setting the <code>header</code> attribute of the <code class="language-html">&lt;omni-tab&gt;</code> component or via slotted <code class="language-html">&lt;omni-tab-header&gt;</code> component(s) that targets the <code class="language-html">&lt;omni-tab-group&gt;</code> header slot. 
+        For an advanced use case check the <omni-hyperlink href='./components/tab-header'><code class="language-html">&lt;omni-tab-header&gt;</code></omni-hyperlink> example.
         </p>
     `,
     args: {

diff --git a/src/tab/TabGroup.ts b/src/tab/TabGroup.ts
@@ -36,13 +36,12 @@ import { TabHeader } from './TabHeader.js';
  * @slot - All omni-tab components that are managed by this component.
  * @slot header - Optional omni-tab-header components associated with each omni-tab component.
  *
- * @cssprop --omni-tabs-tab-bar-width - Tabs tab bar width.
- * @cssprop --omni-tabs-tab-bar-height - Tabs tab bar height.
- * @cssprop --omni-tabs-tab-bar-border-bottom - Tabs tab bar bottom border.
- * @cssprop --omni-tabs-tab-bar-background-color - Tabs tab bar background color.
+ * @cssprop --omni-tab-group-tab-bar-width - Tabs tab bar width.
+ * @cssprop --omni-tab-group-tab-bar-height - Tabs tab bar height.
+ * @cssprop --omni-tab-group-tab-bar-border-bottom - Tabs tab bar bottom border.
+ * @cssprop --omni-tab-group-tab-bar-background-color - Tabs tab bar background color.
  *
  * @cssinherit omni-tab-header
- * @cssinherit omni-tab
  */
 @customElement('omni-tab-group')
 export class TabGroup extends OmniElement {
@@ -151,10 +150,10 @@ export class TabGroup extends OmniElement {
                     display: flex;
                     flex-direction: row;
                     align-items: center;
-                    width: var(--omni-tabs-tab-bar-width, 100%);
-                    height: var(--omni-tabs-tab-bar-height, 50px);
-                    border-bottom: var(--omni-tabs-tab-bar-border-bottom, none);
-                    background: var(--omni-tabs-tab-bar-background-color, transparent);
+                    width: var(--omni-tab-group-tab-bar-width, 100%);
+                    height: var(--omni-tab-group-tab-bar-height, 50px);
+                    border-bottom: var(--omni-tab-group-tab-bar-border-bottom, none);
+                    background: var(--omni-tab-group-tab-bar-background-color, transparent);
                 }
 
                 /* CONTENT */

diff --git a/src/tab/TabHeader.stories.ts b/src/tab/TabHeader.stories.ts
@@ -104,7 +104,7 @@ const App = () =>
     },
     description: () => html`
     <div>
-        For slotting custom content into the header use the <code class="language-html">&lt;omni-tab-header&gt;</code> component that targets the header slot of the <code class="language-html">&lt;omni-tab-group&gt;</code> component and ensure you have a <code class="language-html">&lt;omni-tab&gt;</code> component which has an <code>id</code> attribute that matches the <code class="language-html">&lt;omni-tab-header&gt;</code> <code>for</code> attribute to display slotted content.
+        For slotting custom content into the header use the <code class="language-html">&lt;omni-tab-header&gt;</code> component that targets the header slot of the <omni-hyperlink href='./components/tab-group'><code class="language-html">&lt;omni-tab-group&gt;</code></omni-hyperlink> component by setting <code class="language-js">slot="header"</code> and ensure you have a <omni-hyperlink href='./components/tab'><code class="language-html">&lt;omni-tab&gt;</code></omni-hyperlink> component which has an <code>id</code> attribute that matches the <code class="language-html">&lt;omni-tab-header&gt;</code> <code>for</code> attribute to display slotted content.
     <div>
     `,
     play: async (context) => {

diff --git a/src/tab/TabHeader.ts b/src/tab/TabHeader.ts
@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { OmniElement } from '../core/OmniElement.js';
 
 /**
- * Control that can be used to display custom slotted content, for use within an omni-tabs component and associated omni-tab component.
+ * Control that can be used to display custom slotted content, for use within Tab Group component with associated Tab component.
  *
  * @import
  * ```js