Skip to content

Commit

Permalink
chore: update tabs overview (#2279)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nmerget
nmerget authored Feb 29, 2024
1 parent ea00577 commit 2833e4b
Show file tree
Hide file tree
Showing 6 changed files with 16 additions and 19 deletions.
Binary file modified ...ots__/tabs/showcase/chromium/regular/neutral/DBTabs-should-match-screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...hots__/tabs/showcase/firefox/regular/neutral/DBTabs-should-match-screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../tabs/showcase/mobile-chrome/regular/neutral/DBTabs-should-match-screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../tabs/showcase/mobile-safari/regular/neutral/DBTabs-should-match-screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...shots__/tabs/showcase/webkit/regular/neutral/DBTabs-should-match-screenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 16 additions & 19 deletions showcases/shared/tabs.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,7 @@
"examples": [
{
"name": "auto",
"style": { "width": "300px" },
"className": "db-bg-informational",
"style": { "width": "100%" },
"props": {
"width": "auto"
},
Expand All @@ -85,8 +84,7 @@
},
{
"name": "full - alignment: start",
"style": { "width": "300px" },
"className": "db-bg-informational",
"style": { "width": "100%" },
"props": {
"width": "full"
},
Expand All @@ -99,8 +97,7 @@
},
{
"name": "full - alignment: center",
"style": { "width": "300px" },
"className": "db-bg-informational",
"style": { "width": "100%" },
"props": {
"width": "full",
"alignment": "center"
Expand Down Expand Up @@ -130,19 +127,6 @@
"vue": "<DBTabs>\n\t\t<DBTabList>\n\t\t\t<DBTab>Tab 1</DBTab>\n\t\t\t<DBTab>Tab 2</DBTab>\n\t\t\t<DBTab>Tab 3</DBTab>\n\t\t</DBTabList>\n\t\t<DBTabPanel>Tab Panel 1</DBTabPanel>\n\t\t<DBTabPanel>Tab Panel 2</DBTabPanel>\n\t\t<DBTabPanel>Tab Panel 3</DBTabPanel>\n\t</DBTabs>"
}
},
{
"name": "with overflow - behaviour: scrollbar",
"style": { "width": "300px" },
"props": {
"overflow": true
},
"code": {
"html": "<div class=\"db-tabs\">\n\t\t<div role=\"tablist\" class=\"db-tab-list\" aria-orientation=\"horizontal\">\n\t\t\t<div class=\"db-tab-list-scroll-container\">\n\t\t\t\t<label\n\t\t\t\t\trole=\"tab\"\n\t\t\t\t\tfor=\"my-tabs-tab-0\"\n\t\t\t\t\tclass=\"db-tab\"\n\t\t\t\t\tdata-width=\"auto\"\n\t\t\t\t\tdata-alignment=\"start\"\n\t\t\t\t\taria-controls=\"my-tabs-tab-panel-0\"\n\t\t\t\t\t><input\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tid=\"my-tabs-tab-0\"\n\t\t\t\t\t\tname=\"my-tabs\"\n\t\t\t\t\t/>Test 1</label\n\t\t\t\t><label\n\t\t\t\t\trole=\"tab\"\n\t\t\t\t\tfor=\"my-tabs-tab-1\"\n\t\t\t\t\tclass=\"db-tab\"\n\t\t\t\t\tdata-width=\"auto\"\n\t\t\t\t\tdata-alignment=\"start\"\n\t\t\t\t\taria-controls=\"my-tabs-tab-panel-1\"\n\t\t\t\t\t><input\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tid=\"my-tabs-tab-1\"\n\t\t\t\t\t\tname=\"my-tabs\"\n\t\t\t\t\t/>Test 2</label\n\t\t\t\t><label\n\t\t\t\t\trole=\"tab\"\n\t\t\t\t\tfor=\"my-tabs-tab-2\"\n\t\t\t\t\tclass=\"db-tab\"\n\t\t\t\t\tdata-width=\"auto\"\n\t\t\t\t\tdata-alignment=\"start\"\n\t\t\t\t\taria-controls=\"my-tabs-tab-panel-2\"\n\t\t\t\t\t><input\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tid=\"my-tabs-tab-2\"\n\t\t\t\t\t\tname=\"my-tabs\"\n\t\t\t\t\t/>Test 3</label\n\t\t\t\t>\n\t\t\t</div>\n\t\t</div>\n\t\t<article\n\t\t\trole=\"tabpanel\"\n\t\t\tclass=\"db-tab-panel\"\n\t\t\tid=\"my-tabs-tab-panel-0\"\n\t\t\taria-labelledby=\"my-tabs-tab-0\"\n\t\t>\n\t\t\tTab Panel 1\n\t\t</article>\n\t\t<article\n\t\t\trole=\"tabpanel\"\n\t\t\tclass=\"db-tab-panel\"\n\t\t\tid=\"my-tabs-tab-panel-1\"\n\t\t\taria-labelledby=\"my-tabs-tab-1\"\n\t\t>\n\t\t\tTab Panel 2\n\t\t</article>\n\t\t<article\n\t\t\trole=\"tabpanel\"\n\t\t\tclass=\"db-tab-panel\"\n\t\t\tid=\"my-tabs-tab-panel-2\"\n\t\t\taria-labelledby=\"my-tabs-tab-2\"\n\t\t>\n\t\t\tTab Panel 3\n\t\t</article>\n\t</div>",
"angular": "<db-tabs>\n\t<db-tab-list>\n\t\t<db-tab>Tab 1</db-tab>\n\t\t<db-tab>Tab 2</db-tab>\n\t\t<db-tab>Tab 3</db-tab>\n\t</db-tab-list>\n\t<db-tab-panel>Tab Panel 1</db-tab-panel>\n\t<db-tab-panel>Tab Panel 2</db-tab-panel>\n\t<db-tab-panel>Tab Panel 3</db-tab-panel>\n</db-tabs>",
"react": "<DBTabs>\n\t\t<DBTabList>\n\t\t\t<DBTab>Tab 1</DBTab>\n\t\t\t<DBTab>Tab 2</DBTab>\n\t\t\t<DBTab>Tab 3</DBTab>\n\t\t</DBTabList>\n\t\t<DBTabPanel>Tab Panel 1</DBTabPanel>\n\t\t<DBTabPanel>Tab Panel 2</DBTabPanel>\n\t\t<DBTabPanel>Tab Panel 3</DBTabPanel>\n\t</DBTabs>",
"vue": "<DBTabs>\n\t\t<DBTabList>\n\t\t\t<DBTab>Tab 1</DBTab>\n\t\t\t<DBTab>Tab 2</DBTab>\n\t\t\t<DBTab>Tab 3</DBTab>\n\t\t</DBTabList>\n\t\t<DBTabPanel>Tab Panel 1</DBTabPanel>\n\t\t<DBTabPanel>Tab Panel 2</DBTabPanel>\n\t\t<DBTabPanel>Tab Panel 3</DBTabPanel>\n\t</DBTabs>"
}
},
{
"name": "with overflow - behaviour: arrows",
"style": { "width": "300px" },
Expand All @@ -156,6 +140,19 @@
"react": "<DBTabs behaviour=\"arrows\">\n\t\t<DBTabList>\n\t\t\t<DBTab>Tab 1</DBTab>\n\t\t\t<DBTab>Tab 2</DBTab>\n\t\t\t<DBTab>Tab 3</DBTab>\n\t\t</DBTabList>\n\t\t<DBTabPanel>Tab Panel 1</DBTabPanel>\n\t\t<DBTabPanel>Tab Panel 2</DBTabPanel>\n\t\t<DBTabPanel>Tab Panel 3</DBTabPanel>\n\t</DBTabs>",
"vue": "<DBTabs behaviour=\"arrows\">\n\t\t<DBTabList>\n\t\t\t<DBTab>Tab 1</DBTab>\n\t\t\t<DBTab>Tab 2</DBTab>\n\t\t\t<DBTab>Tab 3</DBTab>\n\t\t</DBTabList>\n\t\t<DBTabPanel>Tab Panel 1</DBTabPanel>\n\t\t<DBTabPanel>Tab Panel 2</DBTabPanel>\n\t\t<DBTabPanel>Tab Panel 3</DBTabPanel>\n\t</DBTabs>"
}
},
{
"name": "with overflow - behaviour: scrollbar",
"style": { "width": "300px" },
"props": {
"overflow": true
},
"code": {
"html": "<div class=\"db-tabs\">\n\t\t<div role=\"tablist\" class=\"db-tab-list\" aria-orientation=\"horizontal\">\n\t\t\t<div class=\"db-tab-list-scroll-container\">\n\t\t\t\t<label\n\t\t\t\t\trole=\"tab\"\n\t\t\t\t\tfor=\"my-tabs-tab-0\"\n\t\t\t\t\tclass=\"db-tab\"\n\t\t\t\t\tdata-width=\"auto\"\n\t\t\t\t\tdata-alignment=\"start\"\n\t\t\t\t\taria-controls=\"my-tabs-tab-panel-0\"\n\t\t\t\t\t><input\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tid=\"my-tabs-tab-0\"\n\t\t\t\t\t\tname=\"my-tabs\"\n\t\t\t\t\t/>Test 1</label\n\t\t\t\t><label\n\t\t\t\t\trole=\"tab\"\n\t\t\t\t\tfor=\"my-tabs-tab-1\"\n\t\t\t\t\tclass=\"db-tab\"\n\t\t\t\t\tdata-width=\"auto\"\n\t\t\t\t\tdata-alignment=\"start\"\n\t\t\t\t\taria-controls=\"my-tabs-tab-panel-1\"\n\t\t\t\t\t><input\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tid=\"my-tabs-tab-1\"\n\t\t\t\t\t\tname=\"my-tabs\"\n\t\t\t\t\t/>Test 2</label\n\t\t\t\t><label\n\t\t\t\t\trole=\"tab\"\n\t\t\t\t\tfor=\"my-tabs-tab-2\"\n\t\t\t\t\tclass=\"db-tab\"\n\t\t\t\t\tdata-width=\"auto\"\n\t\t\t\t\tdata-alignment=\"start\"\n\t\t\t\t\taria-controls=\"my-tabs-tab-panel-2\"\n\t\t\t\t\t><input\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tid=\"my-tabs-tab-2\"\n\t\t\t\t\t\tname=\"my-tabs\"\n\t\t\t\t\t/>Test 3</label\n\t\t\t\t>\n\t\t\t</div>\n\t\t</div>\n\t\t<article\n\t\t\trole=\"tabpanel\"\n\t\t\tclass=\"db-tab-panel\"\n\t\t\tid=\"my-tabs-tab-panel-0\"\n\t\t\taria-labelledby=\"my-tabs-tab-0\"\n\t\t>\n\t\t\tTab Panel 1\n\t\t</article>\n\t\t<article\n\t\t\trole=\"tabpanel\"\n\t\t\tclass=\"db-tab-panel\"\n\t\t\tid=\"my-tabs-tab-panel-1\"\n\t\t\taria-labelledby=\"my-tabs-tab-1\"\n\t\t>\n\t\t\tTab Panel 2\n\t\t</article>\n\t\t<article\n\t\t\trole=\"tabpanel\"\n\t\t\tclass=\"db-tab-panel\"\n\t\t\tid=\"my-tabs-tab-panel-2\"\n\t\t\taria-labelledby=\"my-tabs-tab-2\"\n\t\t>\n\t\t\tTab Panel 3\n\t\t</article>\n\t</div>",
"angular": "<db-tabs>\n\t<db-tab-list>\n\t\t<db-tab>Tab 1</db-tab>\n\t\t<db-tab>Tab 2</db-tab>\n\t\t<db-tab>Tab 3</db-tab>\n\t</db-tab-list>\n\t<db-tab-panel>Tab Panel 1</db-tab-panel>\n\t<db-tab-panel>Tab Panel 2</db-tab-panel>\n\t<db-tab-panel>Tab Panel 3</db-tab-panel>\n</db-tabs>",
"react": "<DBTabs>\n\t\t<DBTabList>\n\t\t\t<DBTab>Tab 1</DBTab>\n\t\t\t<DBTab>Tab 2</DBTab>\n\t\t\t<DBTab>Tab 3</DBTab>\n\t\t</DBTabList>\n\t\t<DBTabPanel>Tab Panel 1</DBTabPanel>\n\t\t<DBTabPanel>Tab Panel 2</DBTabPanel>\n\t\t<DBTabPanel>Tab Panel 3</DBTabPanel>\n\t</DBTabs>",
"vue": "<DBTabs>\n\t\t<DBTabList>\n\t\t\t<DBTab>Tab 1</DBTab>\n\t\t\t<DBTab>Tab 2</DBTab>\n\t\t\t<DBTab>Tab 3</DBTab>\n\t\t</DBTabList>\n\t\t<DBTabPanel>Tab Panel 1</DBTabPanel>\n\t\t<DBTabPanel>Tab Panel 2</DBTabPanel>\n\t\t<DBTabPanel>Tab Panel 3</DBTabPanel>\n\t</DBTabs>"
}
}
]
},
Expand Down

0 comments on commit 2833e4b

Please sign in to comment.