Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add tabs components #420

Merged
merged 7 commits into from
Feb 28, 2023
Merged

Add tabs components #420

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9015cfb
Add an option for dark background
MisRob Jan 24, 2023
48c4567
Fix focus ring not being displayed randomly
MisRob Jan 31, 2023
837fcab
Add tabs components
MisRob Jan 6, 2023
a02afe8
Update changelog
MisRob Feb 14, 2023
68242f2
Merge branch 'develop' into tabs
MisRob Feb 14, 2023
7434f74
Re-organize tabs documentation
MisRob Feb 22, 2023
577f9a5
Move function to common utilities
MisRob Feb 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ Releases are recorded as git tags in the [Github releases](https://github.com/le
- [#380] - Wrap `KRadioButton` text.
- [#384] - Add `KDateRange` to KDS
- [#403] - Add `KOptionalText` to KDS
- [#420] - Add `KTabs`, `KTabsList`, and `KTabsPanel`
- [#420] - Fix randomly missing focus ring

<!-- Referenced PRs -->
[#351]: https://github.com/learningequality/kolibri-design-system/pull/351
Expand All @@ -25,6 +27,7 @@ Releases are recorded as git tags in the [Github releases](https://github.com/le
[#380]: https://github.com/learningequality/kolibri-design-system/pull/380
[#384]: https://github.com/learningequality/kolibri-design-system/pull/384
[#403]: https://github.com/learningequality/kolibri-design-system/pull/403
[#420]: https://github.com/learningequality/kolibri-design-system/pull/420

## Version 1.4.x

Expand Down
8 changes: 8 additions & 0 deletions docs/common/DocsShow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,20 @@
type: Boolean,
default: true,
},
/**
* Toggles dark background
*/
dark: {
type: Boolean,
required: false,
},
},
computed: {
style() {
return {
display: this.block ? 'block' : 'inline-block',
padding: this.padding ? '8px 24px' : null,
backgroundColor: this.dark ? this.$themePalette.grey.v_500 : undefined,
};
},
},
Expand Down
71 changes: 71 additions & 0 deletions docs/pages/ktabs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<template>

<DocsPageTemplate apiDocs>
<DocsPageSection title="Overview" anchor="#overview">
<p>Displays tabs:</p>

<DocsShow>
<KTabs
tabsId="coachReportsTabs"
ariaLabel="Coach reports"
:tabs="tabs"
>
<template #tabLessons>
Lessons tab content
</template>
<template #tabLearners>
Learners tab content
</template>
<template #tabGroups>
Groups tab content
</template>
</KTabs>
</DocsShow>

<p>This component is only one of more ways to implement tabs. See the <DocsInternalLink text="Tabs page" href="/tabs" /> for guidance on all tab-related components, how they compare, as well as on how to use them together with the router.</p>

</DocsPageSection>

<DocsPageSection title="Appearance" anchor="#appearance">
<p>There are several ways to adjust tabs styling. Please refer to <DocsInternalLink text="KTabsList: Appearance" href="/ktabslist#appearance" /> to see examples as <DocsLibraryLink component="KTabsList" /> accepts exactly the same styling props and slots.</p>
</DocsPageSection>

<DocsPageSection title="Related" anchor="#related">
<ul>
<li>
<DocsInternalLink text="Tabs page" href="/tabs" /> has an overview and usage guidance for all tab-related components
</li>
<li>
<DocsLibraryLink component="KTabsList" /> and <DocsLibraryLink component="KTabsPanel" /> are an alternative way to implement tabs
</li>
<li>
<DocsInternalLink text="KTabsList: Appearance" href="/ktabslist#appearance" /> contains examples of tabs styling that apply to <code>KTabs</code>as well
</li>
</ul>
</DocsPageSection>
</DocsPageTemplate>

</template>


<script>
import KTabs from '../../lib/tabs/KTabs.vue';
export default {
components: { KTabs },
data() {
return {
tabs: [
{ id: 'tabLessons', label: 'Lessons' },
{ id: 'tabLearners', label: 'Learners' },
{ id: 'tabGroups', label: 'Groups' },
],
};
},
};
</script>


<style lang="scss" scoped></style>
198 changes: 198 additions & 0 deletions docs/pages/ktabslist.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
<template>

<DocsPageTemplate apiDocs>
<DocsPageSection title="Overview" anchor="#overview">

<p>Displays the tab list of a tabbed interface:</p>

<DocsShow language="html">
<KTabsList
v-model="ex1activeTabId"
tabsId="tabsIntro"
ariaLabel="Coach reports"
:tabs="tabs"
/>
<KTabsPanel
tabsId="tabsIntro"
:activeTabId="ex1activeTabId"
/>
</DocsShow>

<p>It is meant to be used together with <DocsLibraryLink component="KTabsPanel" />. See the <DocsInternalLink text="Tabs page" href="/tabs" /> for guidance on all tab-related components, how they compare, as well as on how to use them together with the router.</p>

</DocsPageSection>

<DocsPageSection title="Appearance" anchor="#appearance">
<p>There are several ways to adjust tabs styling.</p>

<p>Using props is the most straightforward:</p>

<DocsShow language="html" dark>
<KTabsList
v-model="ex2activeTabId"
tabsId="tabsProps"
ariaLabel="Coach reports"
:tabs="tabs"
:color="$themeTokens.textInverted"
:colorActive="$themeTokens.textInverted"
:backgroundColor="$themeTokens.primary"
:hoverBackgroundColor="$themeTokens.primaryDark"
/>
<KTabsPanel
tabsId="tabsProps"
:activeTabId="ex2activeTabId"
/>
</DocsShow>

<DocsShowCode language="html">
<KTabsList
v-model="activeTabId"
tabsId="tabsProps"
ariaLabel="Coach reports"
:tabs="tabs"
:color="$themeTokens.textInverted"
:colorActive="$themeTokens.textInverted"
:backgroundColor="$themeTokens.primary"
:hoverBackgroundColor="$themeTokens.primaryDark"
/>
</DocsShowCode>

<p>When that's not sufficient, <code>appearanceOverrides</code> and <code>appearanceOverridesActive</code> can be used, where the former complements or overrides styles common to all tabs and the latter contains styles specific to an active tab:</p>

<DocsShow language="html">
<KTabsList
v-model="ex3activeTabId"
tabsId="tabsAppearanceOverrides"
ariaLabel="Coach reports"
:tabs="tabs"
:appearanceOverrides="{
':hover': {
color: $themeTokens.primary
},
textTransform: 'none',
margin: '0 32px'
}"
:appearanceOverridesActive="{
borderBottomWidth: '6px'
}"
/>
<KTabsPanel
tabsId="tabsAppearanceOverrides"
:activeTabId="ex3activeTabId"
/>
</DocsShow>

<DocsShowCode language="html">
<KTabsList
v-model="activeTabId"
tabsId="tabsAppearanceOverrides"
ariaLabel="Coach reports"
:tabs="tabs"
:appearanceOverrides="{
':hover': {
color: $themeTokens.primary
},
textTransform: 'none',
margin: '0 32px'
}"
:appearanceOverridesActive="{
borderBottomWidth: '6px'
}"
/>
</DocsShowCode>

<p>Lastly, the <code>tab</code> slot can be used to adjust labels, for example to add icons. It's a scoped slot that exposes <code>tab</code> object and <code>isActive</code> boolean value:</p>

<DocsShow language="html">
<KTabsList
v-model="ex4activeTabId"
tabsId="tabsSlot"
ariaLabel="Coach reports"
:tabs="tabs"
>
<template #tab="{ tab, isActive }">
<KLabeledIcon
:icon="icons[tab.id]"
:label="tab.label"
:color="isActive ? $themeTokens.primary : $themeTokens.annotation"
/>
</template>
</KTabsList>
<KTabsPanel
tabsId="tabsSlot"
:activeTabId="ex4activeTabId"
/>
</DocsShow>

<DocsShowCode language="html">
<KTabsList
v-model="activeTabId"
tabsId="tabsSlot"
ariaLabel="Coach reports"
:tabs="tabs"
>
<template #tab="{ tab, isActive }">
<KLabeledIcon
:icon="icons[tab.id]"
:label="tab.label"
:color="isActive ? $themeTokens.primary : $themeTokens.annotation"
/>
</template>
</KTabsList>
</DocsShowCode>

<!-- eslint-disable -->
<!-- prevent prettier from changing indentation -->
<DocsShowCode language="javascript">
icons: {
tabLessons: 'lesson',
tabLearners: 'person',
tabGroups: 'people',
},
</DocsShowCode>
<!-- eslint-enable -->
</DocsPageSection>

<DocsPageSection title="Related" anchor="#related">
<ul>
<li>
<DocsInternalLink text="Tabs page" href="/tabs" /> has an overview and usage guidance for all tab-related components
</li>
<li><DocsLibraryLink component="KTabsPanel" /> is a component to be used together with <code>KTabsList</code></li>
<li>
<DocsLibraryLink component="KTabs" /> is an alternative way to implement tabs
</li>
</ul>
</DocsPageSection>
</DocsPageTemplate>

</template>


<script>
export default {
data() {
return {
tabs: [
{ id: 'tabLessons', label: 'Lessons' },
{ id: 'tabLearners', label: 'Learners' },
{ id: 'tabGroups', label: 'Groups' },
],
ex1activeTabId: 'tabLessons',
ex2activeTabId: 'tabLessons',
ex3activeTabId: 'tabLessons',
ex4activeTabId: 'tabLessons',
icons: {
tabLessons: 'lesson',
tabLearners: 'person',
tabGroups: 'people',
},
};
},
};
</script>


<style lang="scss" scoped></style>
31 changes: 31 additions & 0 deletions docs/pages/ktabspanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<template>

<DocsPageTemplate apiDocs>
<DocsPageSection title="Overview" anchor="#overview">
<p>A part of a tabbed interface that displays content associated with the active tab. It is meant to be used together with <DocsLibraryLink component="KTabsList" />. See the <DocsInternalLink text="Tabs page" href="/tabs" /> for guidance on all tab-related components, how they compare, as well as on how to use them together with the router.</p>
</DocsPageSection>

<DocsPageSection title="Related" anchor="#related">
<ul>
<li>
<DocsInternalLink text="Tabs page" href="/tabs" /> has an overview and usage guidance for all tab-related components
</li>
<li><DocsLibraryLink component="KTabsList" /> is a component to be used together with <code>KTabsPanel</code></li>
<li>
<DocsLibraryLink component="KTabs" /> is an alternative way to implement tabs
</li>
</ul>
</DocsPageSection>
</DocsPageTemplate>

</template>


<script>
export default {};
</script>


<style lang="scss" scoped></style>
Loading