Skip to content

Commit

Permalink
fix(sage-tabpanel): update naming of to to align with namingof aria role
Browse files Browse the repository at this point in the history
  • Loading branch information
goodwinchris committed Feb 17, 2023
1 parent ab1c0e9 commit 8c79288
Show file tree
Hide file tree
Showing 10 changed files with 31 additions and 47 deletions.
18 changes: 9 additions & 9 deletions libs/core/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export namespace Components {
"tab": string;
"variant": string;
}
interface SageTabPanel {
interface SageTabpanel {
"activeTab": string;
"ariaControlledBy": string;
"parentComponent": string;
Expand Down Expand Up @@ -228,11 +228,11 @@ declare global {
prototype: HTMLSageTabElement;
new (): HTMLSageTabElement;
};
interface HTMLSageTabPanelElement extends Components.SageTabPanel, HTMLStencilElement {
interface HTMLSageTabpanelElement extends Components.SageTabpanel, HTMLStencilElement {
}
var HTMLSageTabPanelElement: {
prototype: HTMLSageTabPanelElement;
new (): HTMLSageTabPanelElement;
var HTMLSageTabpanelElement: {
prototype: HTMLSageTabpanelElement;
new (): HTMLSageTabpanelElement;
};
interface HTMLSageTabsElement extends Components.SageTabs, HTMLStencilElement {
}
Expand All @@ -247,7 +247,7 @@ declare global {
"sage-input": HTMLSageInputElement;
"sage-link": HTMLSageLinkElement;
"sage-tab": HTMLSageTabElement;
"sage-tab-panel": HTMLSageTabPanelElement;
"sage-tabpanel": HTMLSageTabpanelElement;
"sage-tabs": HTMLSageTabsElement;
}
}
Expand Down Expand Up @@ -407,7 +407,7 @@ declare namespace LocalJSX {
"tab"?: string;
"variant"?: string;
}
interface SageTabPanel {
interface SageTabpanel {
"activeTab"?: string;
"ariaControlledBy"?: string;
"parentComponent"?: string;
Expand Down Expand Up @@ -440,7 +440,7 @@ declare namespace LocalJSX {
"sage-input": SageInput;
"sage-link": SageLink;
"sage-tab": SageTab;
"sage-tab-panel": SageTabPanel;
"sage-tabpanel": SageTabpanel;
"sage-tabs": SageTabs;
}
}
Expand All @@ -454,7 +454,7 @@ declare module "@stencil/core" {
"sage-input": LocalJSX.SageInput & JSXBase.HTMLAttributes<HTMLSageInputElement>;
"sage-link": LocalJSX.SageLink & JSXBase.HTMLAttributes<HTMLSageLinkElement>;
"sage-tab": LocalJSX.SageTab & JSXBase.HTMLAttributes<HTMLSageTabElement>;
"sage-tab-panel": LocalJSX.SageTabPanel & JSXBase.HTMLAttributes<HTMLSageTabPanelElement>;
"sage-tabpanel": LocalJSX.SageTabpanel & JSXBase.HTMLAttributes<HTMLSageTabpanelElement>;
"sage-tabs": LocalJSX.SageTabs & JSXBase.HTMLAttributes<HTMLSageTabsElement>;
}
}
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Component, Element, Host, h, Prop, Listen, State } from '@stencil/core';
@Component({
tag: 'sage-tab-panel',
styleUrl: 'sage-tab-panel.scss',
tag: 'sage-tabpanel',
styleUrl: 'sage-tabpanel.scss',
shadow: false,
})
export class SageTabPanel {
Expand Down
4 changes: 2 additions & 2 deletions libs/core/src/components/sage-tabs/sage-tabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export class SageTabs {

private passPropsToChildren = () => {
this.tabs = this.el.querySelectorAll('sage-tab');
this.tabPanels = this.el.querySelectorAll('sage-tab-panel');
this.tabPanels = this.el.querySelectorAll('sage-tabpanel');
this.tabs.forEach(child => {
child['activeTab'] = this.activeTab.toString();
child['parentComponent'] = this.componentId.toString();
Expand Down Expand Up @@ -153,7 +153,7 @@ export class SageTabs {
<div class="sage-tabs__tablist" role="tablist" aria-label={this.tablistLabel}>
<slot name="tabs" />
</div>
<slot name="tab-panels" />
<slot name="tabpanels" />
</Host>
);
}
Expand Down
34 changes: 17 additions & 17 deletions libs/core/src/components/sage-tabs/stories/sage-tabs.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ export const Primary = (args) => html`
<sage-tab slot="tabs" tab="one">Test</sage-tab>
<sage-tab slot="tabs" tab="two">Test</sage-tab>
<sage-tab slot="tabs" tab="three">Test</sage-tab>
<sage-tab-panel slot="tab-panels" tab="one">
<sage-tabpanel slot="tabpanels" tab="one">
<p>Content 1</p>
</sage-tab-panel>
<sage-tab-panel slot="tab-panels" tab="two">
</sage-tabpanel>
<sage-tabpanel slot="tabpanels" tab="two">
<p>Content 2</p>
</sage-tab-panel>
<sage-tab-panel slot="tab-panels" tab="three">
</sage-tabpanel>
<sage-tabpanel slot="tabpanels" tab="three">
<p>Content 3</p>
</sage-tab-panel>
</sage-tabpanel>
</sage-tabs>
`;

Expand All @@ -32,13 +32,13 @@ export const Availability = (args) => html`
<sage-tab slot="tabs" tab="thursday">Thur</sage-tab>
<sage-tab slot="tabs" tab="friday">Fri</sage-tab>
<sage-tab slot="tabs" tab="saturday">Sat</sage-tab>
<sage-tab-panel slot="tab-panels" tab="sunday">Sunday</sage-tab-panel>
<sage-tab-panel slot="tab-panels" tab="monday">Monday</sage-tab-panel>
<sage-tab-panel slot="tab-panels" tab="tuesday">Tuesday</sage-tab-panel>
<sage-tab-panel slot="tab-panels" tab="wednesday">Wednesday</sage-tab-panel>
<sage-tab-panel slot="tab-panels" tab="thursday">Thursday</sage-tab-panel>
<sage-tab-panel slot="tab-panels" tab="friday">Friday</sage-tab-panel>
<sage-tab-panel slot="tab-panels" tab="saturday">Saturday</sage-tab-panel>
<sage-tabpanel slot="tabpanels" tab="sunday">Sunday</sage-tabpanel>
<sage-tabpanel slot="tabpanels" tab="monday">Monday</sage-tabpanel>
<sage-tabpanel slot="tabpanels" tab="tuesday">Tuesday</sage-tabpanel>
<sage-tabpanel slot="tabpanels" tab="wednesday">Wednesday</sage-tabpanel>
<sage-tabpanel slot="tabpanels" tab="thursday">Thursday</sage-tabpanel>
<sage-tabpanel slot="tabpanels" tab="friday">Friday</sage-tabpanel>
<sage-tabpanel slot="tabpanels" tab="saturday">Saturday</sage-tabpanel>
</sage-tabs>
</div>
`;
Expand All @@ -49,10 +49,10 @@ export const Filter = (args) => html`
<sage-tab slot="tabs" tab="second">Second</sage-tab>
<sage-tab slot="tabs" tab="third">Third</sage-tab>
<sage-tab slot="tabs" tab="fourth">Fourth</sage-tab>
<sage-tab-panel slot="tab-panels" tab="first">First</sage-tab-panel>
<sage-tab-panel slot="tab-panels" tab="second">Second</sage-tab-panel>
<sage-tab-panel slot="tab-panels" tab="third">Third</sage-tab-panel>
<sage-tab-panel slot="tab-panels" tab="fourth">Fourth</sage-tab-panel>
<sage-tabpanel slot="tabpanels" tab="first">First</sage-tabpanel>
<sage-tabpanel slot="tabpanels" tab="second">Second</sage-tabpanel>
<sage-tabpanel slot="tabpanels" tab="third">Third</sage-tabpanel>
<sage-tabpanel slot="tabpanels" tab="fourth">Fourth</sage-tabpanel>
</sage-tabs>
`;

Expand Down
2 changes: 1 addition & 1 deletion libs/react/src/components/proxies.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@ export const SageImage = /*@__PURE__*/createReactComponent<JSX.SageImage, HTMLSa
export const SageInput = /*@__PURE__*/createReactComponent<JSX.SageInput, HTMLSageInputElement>('sage-input');
export const SageLink = /*@__PURE__*/createReactComponent<JSX.SageLink, HTMLSageLinkElement>('sage-link');
export const SageTab = /*@__PURE__*/createReactComponent<JSX.SageTab, HTMLSageTabElement>('sage-tab');
export const SageTabPanel = /*@__PURE__*/createReactComponent<JSX.SageTabPanel, HTMLSageTabPanelElement>('sage-tab-panel');
export const SageTabpanel = /*@__PURE__*/createReactComponent<JSX.SageTabpanel, HTMLSageTabpanelElement>('sage-tabpanel');
export const SageTabs = /*@__PURE__*/createReactComponent<JSX.SageTabs, HTMLSageTabsElement>('sage-tabs');

0 comments on commit 8c79288

Please sign in to comment.