- A color scale – sometimes called a color ramp – is an evenly-spaced ramp of shades for a particular color hue. In the Kolibri Design System, we follow v_50, v_100, v_20, … v_800, v_900:
+ A color scale – sometimes called a color ramp – is an evenly-spaced ramp of shades for a particular color hue. In the Kolibri Design System, we follow v_200, v_400, v_600, … v_1000, v_1100:
…
-
Due to the inconsistent way that humans perceive color and light, computing these scales is
Brand colors are chosen to reflect the mood, identity, or trademark of an application or an organization. The design system defines primary (dominant) and secondary (accent) branded color hues.
-- The Kolibri Design System has what we call "Kolibri Purple" as its primary and "Kolibri Teal" as its secondary, available across the full brightness scale: -
diff --git a/docs/pages/kcircularloader.vue b/docs/pages/kcircularloader.vue
index 607c97319..bf6549b5a 100644
--- a/docs/pages/kcircularloader.vue
+++ b/docs/pages/kcircularloader.vue
@@ -17,7 +17,7 @@
diff --git a/docs/pages/kimg.vue b/docs/pages/kimg.vue
index a28103f6d..487594a1c 100644
--- a/docs/pages/kimg.vue
+++ b/docs/pages/kimg.vue
@@ -2,117 +2,335 @@
- {{ label }}
@@ -403,17 +402,20 @@
color: $ui-input-label-color--hover;
}
- .ui-textbox-input,
+ .ui-textbox-label,
.ui-textbox-textarea {
border-bottom-color: $ui-input-border-color--hover;
+ border-bottom-width: $ui-input-border-width--active;
}
}
&.is-active:not(.is-disabled) {
- .ui-textbox-input,
+ .ui-textbox-label-text {
+ color: $ui-input-border-color--active;
+ }
+ .ui-textbox-label,
.ui-textbox-textarea {
border-bottom-color: $ui-input-border-color--active;
- border-bottom-width: $ui-input-border-width--active;
}
}
@@ -465,7 +467,7 @@
color: $ui-input-label-color--invalid;
}
- .ui-textbox-input,
+ .ui-textbox-label,
.ui-textbox-textarea {
border-bottom-color: $ui-input-border-color--invalid;
}
@@ -477,6 +479,7 @@
&.is-disabled {
.ui-textbox-input,
+ .ui-textbox-label,
.ui-textbox-textarea {
color: $ui-input-text-color--disabled;
border-bottom-style: $ui-input-border-style--disabled;
@@ -499,8 +502,11 @@
width: 100%;
padding: 4px 0 0 0;
margin: 0;
- background: #e9e9e9;
+ background: $md-grey-100;
border-radius: 4px 4px 0 0;
+ border-bottom-color: $ui-input-border-color;
+ border-bottom-style: solid;
+ border-bottom-width: $ui-input-border-width;
}
.ui-textbox-icon-wrapper {
@@ -539,14 +545,17 @@
cursor: auto;
background: none;
border: none;
- border-bottom-color: $ui-input-border-color;
- border-bottom-style: solid;
- border-bottom-width: $ui-input-border-width;
border-radius: 0;
outline: none;
transition: border 0.1s ease;
}
+ .ui-textbox-textarea {
+ border-bottom-color: $ui-input-border-color;
+ border-bottom-style: solid;
+ border-bottom-width: $ui-input-border-width;
+ }
+
.ui-textbox-input {
height: $ui-input-height;
}
diff --git a/lib/keen/styles/md-colors.scss b/lib/keen/styles/md-colors.scss
index 2c7301cdf..6c17dc03b 100644
--- a/lib/keen/styles/md-colors.scss
+++ b/lib/keen/styles/md-colors.scss
@@ -78,7 +78,7 @@ $md-indigo-a200: #536dfe;
$md-indigo-a400: #3d5afe;
$md-indigo-a700: #304ffe;
-$md-blue: #2196f3;
+$md-blue: #2547F3;
$md-blue-50: #e3f2fd;
$md-blue-100: #bbdefb;
$md-blue-200: #90caf9;
diff --git a/lib/keen/styles/variables.scss b/lib/keen/styles/variables.scss
index 88834cf72..1bb32e97f 100644
--- a/lib/keen/styles/variables.scss
+++ b/lib/keen/styles/variables.scss
@@ -14,7 +14,7 @@ $brand-accent-color: $md-purple-a400 !default;
$primary-text-color: rgba(black, 0.87) !default;
// Secondary text color
-$secondary-text-color: rgba(black, 0.54) !default;
+$secondary-text-color: #666666!default;
// Hint text color
$hint-text-color: rgba(black, 0.38) !default;
@@ -49,16 +49,17 @@ $ui-input-text-color--disabled: $disabled-text-color !default;
$ui-input-text-color--invalid: $md-red !default;
// Input border
-$ui-input-border-color: $divider-color !default;
-$ui-input-border-color--hover: rgba(black, 0.3) !default;
+$ui-input-border-color: $secondary-text-color !default;
+$ui-input-border-color--hover: rgba(black, 0.75) !default;
$ui-input-border-color--active: $brand-primary-color !default;
$ui-input-border-color--invalid: $md-red !default;
$ui-input-border-width: 1px !default;
-$ui-input-border-width--active: 2px !default;
+$ui-input-border-width--active: 1.5px !default;
$ui-input-border-style--disabled: dotted !default;
// Input icons
$ui-input-icon-color: $secondary-text-color !default;
+$ui-input-icon-color--active: $brand-primary-color !default;
$ui-input-icon-opacity--disabled: 0.6 !default;
$ui-input-icon-margin-right: rem(12px) !default;
$ui-input-icon-margin-top: rem(4px) !default;
@@ -68,7 +69,7 @@ $ui-input-icon-margin-top--with-label: rem(24px) !default;
$ui-input-button-color: $secondary-text-color !default;
$ui-input-button-color--hover: $primary-text-color !default;
$ui-input-button-opacity--disabled: 0.6 !default;
-$ui-input-button-size: rem(18px) !default;
+$ui-input-button-size: rem(24px) !default;
$ui-input-button-margin-top: rem(7px) !default;
$ui-input-button-margin-top--with-label: rem(27px) !default;
diff --git a/lib/loaders/KLinearLoader.vue b/lib/loaders/KLinearLoader.vue
index 4027e4780..9f2ca6e7a 100644
--- a/lib/loaders/KLinearLoader.vue
+++ b/lib/loaders/KLinearLoader.vue
@@ -11,7 +11,7 @@
- Dimensions do not exceed 48x48px -
- Progress indicator uses brand.secondary.v_100 +
- Progress indicator uses palette.grey.v_800
- Track width is 4px
- The
+
+
+
+
+
+
+
- Sample implementations of
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Top left
+
+
+
+
+
+
+
+
+ Top left
+
+
+
+
+
+
+
@@ -127,27 +345,9 @@
-
-
-
-
-
diff --git a/docs/pages/klinearloader.vue b/docs/pages/klinearloader.vue
index f4eedcdf4..ecd0af5da 100644
--- a/docs/pages/klinearloader.vue
+++ b/docs/pages/klinearloader.vue
@@ -36,8 +36,8 @@
diff --git a/docs/pages/menus/index.vue b/docs/pages/menus/index.vue
index c6d5f1597..ae865e0b1 100644
--- a/docs/pages/menus/index.vue
+++ b/docs/pages/menus/index.vue
@@ -99,7 +99,7 @@
Iconography color:
-
Corner radius: 2px
Fill color:
-
Bottom stroke color:
-
Bottom stroke focused color:
@@ -196,7 +196,7 @@
Label text color:
-
Focused text color:
diff --git a/docs/pages/usekresponsivewindow.vue b/docs/pages/usekresponsivewindow.vue
new file mode 100644
index 000000000..fb86a7681
--- /dev/null
+++ b/docs/pages/usekresponsivewindow.vue
@@ -0,0 +1,145 @@
+
+
+
+
+
+
+
+
+
+
+
+ import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+
+ export default {
+ setup() {
+ const {
+ windowIsSmall,
+ windowIsMedium,
+ windowIsLarge,
+ windowHeight,
+ windowWidth,
+ windowBreakpoint
+ } = useKResponsiveWindow();
+ }
+ };
+
+
+
+
+
+
+
+
+ import { computed } from '@vue/composition-api';
+ import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+
+ export default {
+ setup() {
+ const {
+ windowIsLarge
+ } = useKResponsiveWindow();
+
+ const boxStyle = computed(function () {
+ return { display: windowIsLarge.value ? 'inline-block' : 'block' };
+ });
+
+ return {
+ boxStyle,
+ };
+ }
+ };
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/rstIconReplacements.txt b/docs/rstIconReplacements.txt
index 52b12a1de..c4c9dafa4 100644
--- a/docs/rstIconReplacements.txt
+++ b/docs/rstIconReplacements.txt
@@ -1,14 +1,18 @@
.. |a11y| replace:: :raw-html:``
+.. |activities| replace:: :raw-html:``
.. |add| replace:: :raw-html:``
.. |allActivities| replace:: :raw-html:``
.. |alternativeRoute| replace:: :raw-html:``
.. |app| replace:: :raw-html:``
.. |artsResource| replace:: :raw-html:``
+.. |attribution| replace:: :raw-html:``
+.. |audience| replace:: :raw-html:``
.. |audio| replace:: :raw-html:``
.. |back| replace:: :raw-html:``
.. |bookmarkEmpty| replace:: :raw-html:``
.. |bookmark| replace:: :raw-html:``
.. |brokenImage| replace:: :raw-html:``
+.. |categories| replace:: :raw-html:``
.. |channel| replace:: :raw-html:``
.. |checked| replace:: :raw-html:``
.. |check| replace:: :raw-html:``
@@ -89,6 +93,7 @@
.. |learn| replace:: :raw-html:``
.. |lessonPlansResource| replace:: :raw-html:``
.. |lesson| replace:: :raw-html:``
+.. |levels| replace:: :raw-html:``
.. |library| replace:: :raw-html:``
.. |listenShaded| replace:: :raw-html:``
.. |listenSolid| replace:: :raw-html:``
@@ -143,6 +148,7 @@
.. |registeredKDP| replace:: :raw-html:``
.. |registered| replace:: :raw-html:``
.. |remove| replace:: :raw-html:``
+.. |rename| replace:: :raw-html:``
.. |reports| replace:: :raw-html:``
.. |resourceList| replace:: :raw-html:``
.. |restart| replace:: :raw-html:``
@@ -155,6 +161,7 @@
.. |skillsResource| replace:: :raw-html:``
.. |slideshow| replace:: :raw-html:``
.. |socialSciencesResource| replace:: :raw-html:``
+.. |sort| replace:: :raw-html:``
.. |starBorder| replace:: :raw-html:``
.. |star| replace:: :raw-html:``
.. |superadmin| replace:: :raw-html:``
diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js
index 55d4d5670..c6aa32e34 100644
--- a/docs/tableOfContents.js
+++ b/docs/tableOfContents.js
@@ -58,7 +58,6 @@ class Page {
const buttonRelatedKeywords = ['button', 'link'];
const textRelatedKeywords = ['text', 'area', 'field', 'box'];
const layoutRelatedKeywords = ['grid', 'layout', 'container', 'page'];
-const responsiveComponentsRelatedKeywords = ['responsive', 'mixin', 'breakpoint'];
const tabsRelatedKeywords = ['tab', 'tabs', 'panel', 'tablist', 'tabpanel'];
const compositionRelatedKeywords = ['composable', 'composition'];
@@ -175,6 +174,12 @@ export default [
title: 'Composables',
autoSort: true,
pages: [
+ new Page({
+ path: '/usekresponsivewindow',
+ title: 'useKResponsiveWindow',
+ isCode: true,
+ keywords: [...compositionRelatedKeywords, 'responsive', 'window', 'breakpoint'],
+ }),
new Page({
path: '/usekshow',
title: 'useKShow',
@@ -316,11 +321,6 @@ export default [
isCode: true,
keywords: ['button'],
}),
- new Page({
- path: '/kcontentrenderer',
- title: 'KContentRenderer',
- isCode: true,
- }),
new Page({
path: '/kgrid',
title: 'KGrid',
@@ -356,17 +356,11 @@ export default [
title: 'KBreadcrumbs',
isCode: true,
}),
- new Page({
- path: '/kresponsivewindow',
- title: 'KResponsiveWindow',
- isCode: true,
- keywords: [...responsiveComponentsRelatedKeywords, 'window'],
- }),
new Page({
path: '/kresponsiveelement',
title: 'KResponsiveElement',
isCode: true,
- keywords: [...responsiveComponentsRelatedKeywords, 'element'],
+ keywords: ['responsive', 'mixin', 'breakpoint', 'element'],
}),
new Page({
path: '/ktabs',
@@ -397,6 +391,11 @@ export default [
title: 'KTextTruncator',
isCode: true,
}),
+ new Page({
+ path: '/klistwithoverflow',
+ title: 'KListWithOverflow',
+ isCode: true,
+ }),
],
}),
];
diff --git a/lib/KDateRange/KDateCalendar.vue b/lib/KDateRange/KDateCalendar.vue
index e67d57fe3..f9c1869d2 100644
--- a/lib/KDateRange/KDateCalendar.vue
+++ b/lib/KDateRange/KDateCalendar.vue
@@ -31,7 +31,7 @@
:style="[
(selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'first') ||
(selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'second') ?
- { backgroundColor: $themeBrand.secondary.v_50 } : {}
+ { backgroundColor: $themeBrand.primary.v_200 } : {}
]"
:class="[{
'calendar-days--disabled': isDateDisabled(weekIndex, dayInWeekIndex, activeMonthDay, activeMonthDate) || isDateDisabledLeft(weekIndex, dayInWeekIndex, activeMonthDay),
@@ -64,7 +64,7 @@
:style="[
(selectionOrder(weekIndex, dayInWeekIndex, 'second', nextActiveMonthDay, nextActiveMonthDate) === 'first') ||
(selectionOrder(weekIndex, dayInWeekIndex, 'second', nextActiveMonthDay, nextActiveMonthDate) === 'second') ?
- { backgroundColor: $themeBrand.secondary.v_50 } : {}
+ { backgroundColor: $themeBrand.primary.v_200 } : {}
]"
:class="[{
'calendar-days--disabled': isDateDisabled(weekIndex, dayInWeekIndex, nextActiveMonthDay, nextActiveMonthDate) || isDateDisabledRight(weekIndex, dayInWeekIndex, nextActiveMonthDay),
diff --git a/lib/KDateRange/KDateDay.vue b/lib/KDateRange/KDateDay.vue
index a32b23ea0..a968e287d 100644
--- a/lib/KDateRange/KDateDay.vue
+++ b/lib/KDateRange/KDateDay.vue
@@ -69,7 +69,7 @@
inRangeStyle() {
return this.isInRange
? {
- backgroundColor: this.$themeBrand.secondary.v_50,
+ backgroundColor: this.$themeBrand.primary.v_200,
':hover': {
backgroundColor: this.$themePalette.grey.v_200,
},
@@ -79,7 +79,7 @@
selectedStyle() {
return this.isSelected
? {
- backgroundColor: this.$themeBrand.secondary.v_600,
+ backgroundColor: this.$themeBrand.primary.v_1000,
color: this.$themePalette.white + '!important',
}
: {};
diff --git a/lib/KIcon/iconDefinitions.js b/lib/KIcon/iconDefinitions.js
index 1c64312ca..1c05266e7 100644
--- a/lib/KIcon/iconDefinitions.js
+++ b/lib/KIcon/iconDefinitions.js
@@ -65,6 +65,7 @@ const KolibriIcons = {
icon: require('./precompiled-icons/material-icons/broken_image/baseline.vue').default,
defaultColor: themePalette().grey.v_400,
},
+ sort: { icon: require('./precompiled-icons/le/sort.vue').default },
// Features and links
learn: { icon: require('./precompiled-icons/material-icons/school/baseline.vue').default },
@@ -81,6 +82,7 @@ const KolibriIcons = {
people: { icon: require('./precompiled-icons/material-icons/people/baseline.vue').default },
person: { icon: require('./precompiled-icons/material-icons/person/baseline.vue').default },
permission: { icon: require('./precompiled-icons/material-icons/vpn_key/baseline.vue').default },
+ audience: { icon: require('./precompiled-icons/material-icons/groups/baseline.vue').default },
// for use in RST docs as we cannot change the fill dynamically in RST
superadmin: {
icon: require('./precompiled-icons/material-icons/vpn_key/baseline.vue').default,
@@ -219,6 +221,10 @@ const KolibriIcons = {
check: { icon: require('./precompiled-icons/material-icons/check/baseline.vue').default },
help: { icon: require('./precompiled-icons/material-icons/help_outline/outline.vue').default },
close: { icon: require('./precompiled-icons/material-icons/close/baseline.vue').default },
+ rename: {
+ icon: require('./precompiled-icons/le/rename.vue').default,
+ rtlFlip: true,
+ },
// Found while removing mat-svg
indeterminateCheck: {
@@ -297,6 +303,17 @@ const KolibriIcons = {
notPinned: {
icon: require('./precompiled-icons/material-icons/push_pin/outline.vue').default,
},
+ // Content node fields
+ categories: { icon: require('./precompiled-icons/le/categories.vue').default },
+ activities: { icon: require('./precompiled-icons/le/activities.vue').default },
+ levels: {
+ icon: require('./precompiled-icons/le/levels.vue').default,
+ rtlFlip: true,
+ },
+ attribution: {
+ icon: require('./precompiled-icons/material-icons/attribution/baseline.vue').default,
+ },
+
// for use in RST docs as we cannot change the fill dynamically in RST
registeredKDP: {
icon: require('./precompiled-icons/material-icons/verified_user/baseline.vue').default,
diff --git a/lib/KIcon/precompiled-icons/le/activities.vue b/lib/KIcon/precompiled-icons/le/activities.vue
new file mode 100644
index 000000000..e5773f968
--- /dev/null
+++ b/lib/KIcon/precompiled-icons/le/activities.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/lib/KIcon/precompiled-icons/le/categories.vue b/lib/KIcon/precompiled-icons/le/categories.vue
new file mode 100644
index 000000000..e50343f76
--- /dev/null
+++ b/lib/KIcon/precompiled-icons/le/categories.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/lib/KIcon/precompiled-icons/le/levels.vue b/lib/KIcon/precompiled-icons/le/levels.vue
new file mode 100644
index 000000000..647fa1b5b
--- /dev/null
+++ b/lib/KIcon/precompiled-icons/le/levels.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/lib/KIcon/precompiled-icons/le/rename.vue b/lib/KIcon/precompiled-icons/le/rename.vue
new file mode 100644
index 000000000..67db183cf
--- /dev/null
+++ b/lib/KIcon/precompiled-icons/le/rename.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/lib/KIcon/precompiled-icons/le/sort.vue b/lib/KIcon/precompiled-icons/le/sort.vue
new file mode 100644
index 000000000..fb1da67d2
--- /dev/null
+++ b/lib/KIcon/precompiled-icons/le/sort.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/lib/KImg/__tests__/KImg.spec.js b/lib/KImg/__tests__/KImg.spec.js
index 3efb4dcd7..f318e493a 100644
--- a/lib/KImg/__tests__/KImg.spec.js
+++ b/lib/KImg/__tests__/KImg.spec.js
@@ -1,45 +1,69 @@
-import { mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
import KImg from '../';
-describe('KImg component', () => {
- let wrapper;
- let img;
+function makeWrapper({ propsData = {} } = {}) {
+ return shallowMount(KImg, { propsData });
+}
- const DEFAULT_PROPS = {
- src: 'https://learningequality.org/static/img/le-logo.svg',
- altText: "Learning Equality's logo",
- };
-
- function makeWrapper(newProps = {}) {
- wrapper = mount(KImg, {
- propsData: { ...DEFAULT_PROPS, ...newProps },
+describe('KImg', () => {
+ it(`renders without any errors when a valid 'src' and 'altText' are provided`, () => {
+ const wrapper = makeWrapper({
+ propsData: { src: '/le-logo.svg', altText: 'LE logo' },
});
- img = wrapper.find('img');
- }
- it('Renders without any errors when a valid src and altText are provided', () => {
- makeWrapper();
expect(wrapper.exists()).toBe(true);
+
+ const img = wrapper.find('img');
expect(img.exists()).toBe(true);
+ expect(img.attributes('src')).toBe('/le-logo.svg');
+ expect(img.attributes('alt')).toBe('LE logo');
+ });
- expect(img.attributes('src')).toBe(DEFAULT_PROPS.src);
- expect(img.attributes('alt')).toBe(DEFAULT_PROPS.altText);
+ it(`throws an error when no 'altText' is provided`, () => {
+ expect(() =>
+ makeWrapper({
+ propsData: { src: '/le-logo.svg', altText: undefined },
+ })
+ ).toThrow();
});
- it('Throws an error when no altText is provided', () => {
- expect(() => makeWrapper({ altText: undefined })).toThrow();
+ describe(`when no 'altText' is provided and it is a decorative image`, () => {
+ it(`does not throw an error`, () => {
+ expect(() =>
+ makeWrapper({
+ propsData: { src: '/le-logo.svg', altText: undefined, isDecorative: true },
+ })
+ ).not.toThrow();
+ });
+
+ it(`sets 'alt' attribute to an empty string`, () => {
+ const wrapper = makeWrapper({
+ propsData: { src: '/le-logo.svg', altText: undefined, isDecorative: true },
+ });
+ expect(wrapper.exists()).toBe(true);
+ expect(wrapper.find('img').attributes('alt')).toBe('');
+ });
});
- it('Does not throw an error when no altText is provided and it is a decorative image', () => {
- expect(() => makeWrapper({ altText: undefined, isDecorative: true })).not.toThrow();
+ it(`throws an error when 'aspectRatio' has an invalid format`, () => {
+ expect(() =>
+ makeWrapper({
+ propsData: { src: '/le-logo.svg', altText: 'LE logo', aspectRatio: '16/9' },
+ })
+ ).toThrow();
+ });
- expect(wrapper.exists()).toBe(true);
- expect(img.attributes('alt')).toBe('');
+ it(`doesn't throw an error when 'aspectRatio' has a valid format`, () => {
+ expect(() =>
+ makeWrapper({
+ propsData: { src: '/le-logo.svg', altText: 'LE logo', aspectRatio: '16:9' },
+ })
+ ).not.toThrow();
});
- it('Emits an `error` event when there is an error in loading the image', () => {
- makeWrapper({
- src: 'invalid-src.jpg',
+ it(`emits an 'error' event when there is an error in loading the image`, () => {
+ const wrapper = makeWrapper({
+ propsData: { src: '/le-logo.svg', altText: 'LE logo' },
});
// Manually trigger the onError method to simulate the image load failure
diff --git a/lib/KImg/index.vue b/lib/KImg/index.vue
index e2dc212ce..20b07acf9 100644
--- a/lib/KImg/index.vue
+++ b/lib/KImg/index.vue
@@ -1,20 +1,93 @@
- ![]()
+
+
+
@@ -64,6 +68,13 @@
type: String,
default: 'bottom',
},
+ /**
+ * Text of the tooltip
+ */
+ text: {
+ type: String,
+ default: null,
+ },
},
data() {
return {
diff --git a/lib/buttons-and-links/KButton.vue b/lib/buttons-and-links/KButton.vue
index 808d3b2f8..d254944cf 100644
--- a/lib/buttons-and-links/KButton.vue
+++ b/lib/buttons-and-links/KButton.vue
@@ -122,12 +122,12 @@
return this.hovering ? this.$themeTokens.primaryDark : this.$themeTokens.primary;
}
- if (this.primary) {
+ if (this.secondary) {
return this.appearance === 'raised-button'
- ? this.$themeTokens.textInverted
- : this.$themeTokens.primary;
+ ? this.$themeBrand.textInverted
+ : this.$themeBrand.secondary;
} else {
- return this.$themeTokens.text;
+ return this.$themeBrand.text;
}
},
htmlTag() {
@@ -139,9 +139,9 @@
return 'button';
},
arrowStyles() {
- if (this.primary) {
+ if (this.secondary) {
return {
- fill: this.$themeTokens.textInverted,
+ fill: this.$themeBrand.textInverted,
};
}
return {};
diff --git a/lib/buttons-and-links/KRouterLink.vue b/lib/buttons-and-links/KRouterLink.vue
index 544a097f6..8befc3dc3 100644
--- a/lib/buttons-and-links/KRouterLink.vue
+++ b/lib/buttons-and-links/KRouterLink.vue
@@ -39,7 +39,7 @@
v-if="iconAfter"
:icon="iconAfter"
style="top: 4px;"
- :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
+ :color="hovering ? $themeTokens.secondaryDark : $themeTokens.secondary"
data-test="icon-after"
/>
diff --git a/lib/buttons-and-links/buttonMixin.js b/lib/buttons-and-links/buttonMixin.js
index 2e26cb3a7..f31665353 100644
--- a/lib/buttons-and-links/buttonMixin.js
+++ b/lib/buttons-and-links/buttonMixin.js
@@ -63,7 +63,7 @@ export default {
linkStyle() {
return {
color: this.$themeTokens.link,
- ':hover': { color: this.$themeTokens.linkDark },
+ ':hover': { color: this.$themeTokens.primaryDark },
':focus': this.$coreOutline,
...(this.disabled ? disabledStyle : {}),
};
@@ -92,21 +92,21 @@ export default {
return {
color: this.$themeTokens.primary,
':hover': {
- backgroundColor: this.$themePalette.grey.v_300,
+ backgroundColor: this.$themePalette.grey.v_100,
},
':focus': { ...this.$coreOutline, outlineOffset: 0 },
':disabled': disabledStyle,
svg: {
- fill: this.$themeTokens.primary,
+ fill: this.$themeTokens.secondary,
},
};
},
secondaryRaisedStyle() {
return {
color: this.$themeTokens.text,
- backgroundColor: this.$themePalette.grey.v_200,
+ backgroundColor: this.$themePalette.grey.v_50,
':hover': {
- backgroundColor: this.$themePalette.grey.v_300,
+ backgroundColor: this.$themePalette.grey.v_100,
},
':focus': { ...this.$coreOutline, outlineOffset: '6px' },
':disabled': disabledStyle,
@@ -119,7 +119,7 @@ export default {
return {
color: this.$themeTokens.text,
':hover': {
- backgroundColor: this.$themePalette.grey.v_300,
+ backgroundColor: this.$themePalette.grey.v_200,
},
':focus': { ...this.$coreOutline, outlineOffset: 0 },
':disabled': disabledStyle,
diff --git a/lib/composables/_useKResponsiveElement.js b/lib/composables/_useKResponsiveElement.js
new file mode 100644
index 000000000..1387a3907
--- /dev/null
+++ b/lib/composables/_useKResponsiveElement.js
@@ -0,0 +1,48 @@
+import { throttle } from 'frame-throttle';
+import { onMounted, onBeforeUnmount, ref, getCurrentInstance } from '@vue/composition-api';
+
+let _resizeObserver;
+
+if (typeof window !== 'undefined' && window.ResizeObserver) {
+ _resizeObserver = new ResizeObserver(entries => {
+ for (const entry of entries) {
+ if (entry.target._resizeListener) {
+ entry.target._resizeListener();
+ }
+ }
+ });
+}
+
+export default function useKResponsiveElement() {
+ const elementWidth = ref(0);
+ const elementHeight = ref(0);
+ const instance = getCurrentInstance();
+
+ function updateEl() {
+ const { $el } = instance.proxy || {};
+ const { clientHeight, clientWidth } = $el || {};
+ elementWidth.value = clientWidth || 0;
+ elementHeight.value = clientHeight || 0;
+ }
+
+ onMounted(() => {
+ updateEl();
+ if (_resizeObserver) {
+ const throttledUpdateEl = throttle(updateEl);
+ instance.proxy.$el._resizeListener = throttledUpdateEl;
+
+ _resizeObserver.observe(instance.proxy.$el);
+ }
+ });
+
+ onBeforeUnmount(() => {
+ if (_resizeObserver) {
+ _resizeObserver.unobserve(instance.proxy.$el);
+ }
+ });
+
+ return {
+ elementWidth,
+ elementHeight,
+ };
+}
diff --git a/lib/__tests__/useKWindowDimensions.spec.js b/lib/composables/_useKWindowDimensions/__tests__/index.spec.js
similarity index 96%
rename from lib/__tests__/useKWindowDimensions.spec.js
rename to lib/composables/_useKWindowDimensions/__tests__/index.spec.js
index f32e5f72b..41c22c725 100644
--- a/lib/__tests__/useKWindowDimensions.spec.js
+++ b/lib/composables/_useKWindowDimensions/__tests__/index.spec.js
@@ -1,6 +1,6 @@
import { defineComponent } from '@vue/composition-api';
import { mount } from '@vue/test-utils';
-import useKWindowDimensions from '../useKWindowDimensions';
+import useKWindowDimensions from '../';
const resizeWindow = (width, height) => {
window.innerWidth = width;
diff --git a/lib/useKWindowDimensions.js b/lib/composables/_useKWindowDimensions/index.js
similarity index 88%
rename from lib/useKWindowDimensions.js
rename to lib/composables/_useKWindowDimensions/index.js
index d0e54bbdf..a799053b9 100644
--- a/lib/useKWindowDimensions.js
+++ b/lib/composables/_useKWindowDimensions/index.js
@@ -1,6 +1,7 @@
-import './composition-api'; //Due to @vue/composition-api shortcomings, add plugin prior to use in kolibri, studio and tests
+import '../composition-api'; //Due to @vue/composition-api shortcomings, add plugin prior to use in kolibri, studio and tests
import { onMounted, onUnmounted, ref } from '@vue/composition-api';
import { throttle } from 'frame-throttle';
+import { isNuxtServerSideRendering } from '../../utils';
/** Global variables */
export const windowWidth = ref(null);
@@ -30,14 +31,6 @@ function windowMetrics() {
};
}
-/**
- * Check if Nuxt is server side rendering
- * @returns {Boolean}
- */
-function isNuxtServerSideRendering() {
- return process && process.server;
-}
-
/**
* @param {CallableFunction} eventHandler - The event callback function
*/
diff --git a/lib/composition-api.js b/lib/composables/composition-api.js
similarity index 100%
rename from lib/composition-api.js
rename to lib/composables/composition-api.js
diff --git a/lib/useKResponsiveWindow/MediaQuery.js b/lib/composables/useKResponsiveWindow/MediaQuery.js
similarity index 83%
rename from lib/useKResponsiveWindow/MediaQuery.js
rename to lib/composables/useKResponsiveWindow/MediaQuery.js
index 627bab61b..d241c02c4 100644
--- a/lib/useKResponsiveWindow/MediaQuery.js
+++ b/lib/composables/useKResponsiveWindow/MediaQuery.js
@@ -1,3 +1,5 @@
+import { isNuxtServerSideRendering } from '../../utils';
+
/**
* Class representing a MediaQuery
*/
@@ -23,21 +25,13 @@ export default class MediaQuery {
return this._mediaQueryList;
}
- /**
- * Check if Nuxt is server side rendering
- * @returns {Boolean}
- */
- isNuxtServerSideRendering() {
- return process && process.server;
- }
-
/**
* Start listening for media query events
* @returns {Object} Containing mediaQueryList, eventHandler, and stopListening
*/
startListening() {
// Prevent function execution if Nuxt is server side rendering
- if (this.isNuxtServerSideRendering() || !window.matchMedia) {
+ if (isNuxtServerSideRendering() || !window.matchMedia) {
return;
}
@@ -53,7 +47,7 @@ export default class MediaQuery {
*/
stopListening() {
// Prevent function execution if Nuxt is server side rendering
- if (this.isNuxtServerSideRendering() || !window.matchMedia) {
+ if (isNuxtServerSideRendering() || !window.matchMedia) {
return;
}
if (this.mediaQueryList.removeEventListener) {
diff --git a/lib/useKResponsiveWindow/__tests__/useKResponsiveWindow.spec.js b/lib/composables/useKResponsiveWindow/__tests__/index.spec.js
similarity index 99%
rename from lib/useKResponsiveWindow/__tests__/useKResponsiveWindow.spec.js
rename to lib/composables/useKResponsiveWindow/__tests__/index.spec.js
index ce9d35808..4f66a7602 100644
--- a/lib/useKResponsiveWindow/__tests__/useKResponsiveWindow.spec.js
+++ b/lib/composables/useKResponsiveWindow/__tests__/index.spec.js
@@ -2,7 +2,7 @@ import 'mock-match-media/jest-setup.cjs';
import { setMedia } from 'mock-match-media';
import { defineComponent } from '@vue/composition-api';
import { mount } from '@vue/test-utils';
-import useKResponsiveWindow from '..';
+import useKResponsiveWindow from '../';
const resizeWindow = (width, height = 768) => {
window.innerWidth = width;
diff --git a/lib/useKResponsiveWindow/index.js b/lib/composables/useKResponsiveWindow/index.js
similarity index 96%
rename from lib/useKResponsiveWindow/index.js
rename to lib/composables/useKResponsiveWindow/index.js
index f9e1515be..60d25a84f 100644
--- a/lib/useKResponsiveWindow/index.js
+++ b/lib/composables/useKResponsiveWindow/index.js
@@ -1,5 +1,6 @@
import { computed, onBeforeUnmount, onMounted, ref, watch } from '@vue/composition-api';
-import useKWindowDimensions, { windowWidth, windowHeight } from '../useKWindowDimensions';
+import useKWindowDimensions, { windowWidth, windowHeight } from '../_useKWindowDimensions';
+import { isNuxtServerSideRendering } from '../../utils';
import MediaQuery from './MediaQuery';
/** Global variables */
@@ -32,6 +33,9 @@ const heightQuery = new MediaQuery('screen and (max-height: 600px)', event => {
* Initialize media query window properties
*/
function initProps() {
+ if (isNuxtServerSideRendering()) {
+ return;
+ }
if (window.matchMedia) {
orientationQuery.eventHandler(orientationQuery.mediaQueryList);
heightQuery.eventHandler(heightQuery.mediaQueryList);
diff --git a/lib/composables/useKShow/__tests__/index.spec.js b/lib/composables/useKShow/__tests__/index.spec.js
index f9b145a05..ab61106e1 100644
--- a/lib/composables/useKShow/__tests__/index.spec.js
+++ b/lib/composables/useKShow/__tests__/index.spec.js
@@ -1,4 +1,4 @@
-import useKShow from '../index';
+import useKShow from '../';
const { show } = useKShow();
diff --git a/lib/keen/UiTextbox.vue b/lib/keen/UiTextbox.vue
index 30360d103..a22c06629 100644
--- a/lib/keen/UiTextbox.vue
+++ b/lib/keen/UiTextbox.vue
@@ -84,7 +84,6 @@
v-if="label || $slots.default"
class="ui-textbox-label-text"
:class="labelClasses"
- :style="isActive ? { color: $themeTokens.primaryDark } : {}"
>
KImg displays an image and provides functionality to manipulate it such as setting its dimensions, aspect ratio, scaling, letterboxing, and more.
Unless you set fixed dimensions, KImg is responsive by default.
+ Note that the majority of settings are applied to the image container rather than the image itself. If you need to apply dimensions, aspect ratio, etc. directly to the image, you can use 'fitXY'
+ Depending on the scale type and other settings, the image may be letterboxed. When an image is letterboxed, backgroundColor
+
This is in more detail illustrated in the examples below, where the original image dimensions are 200×114 px.
+ +Rendering within inline and block elements
+ +Inline
+ +When rendered within an inline element, the image preserves its original dimensions by default.
+ +Sample implementations of
+ Block
+
+ When rendered within a block element, the image container fills the parent block element and the image scales with the 'centerInside'
- Dimensions may be either numbers or strings consisting of a numeral and valid units (e.g.
+ px,
- em, vh).
+
+
+ Dimensions
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ You can apply the most common dimensions to the image container via props such as width
+ maxHeight
+ %, cm, em, ex, ch, in, lh, mm, px, rem, rlh, vh, vw. If you don't provide a unit, px will be used by default.
+
Alternative text
+ +
+ Unless an image is altText
+
+ If it's meant to be decorative, indicate it by using isDecorative
+
Scaling
+ +
+ The
'centerInside' scale type
+
+ Scales an image uniformly and maintains its original aspect ratio. Both its width and height are equal to or less than the width and height of the image container. An image can be letterboxed. It's the safest mode as it never distorts an image or impairs its quality.
+ +
+
-
+
+ 'contain' scale type
+
+ Behaves similarly to 'centerInside' except it ensures that at least one axis of an image fits the image container exactly. The original aspect ratio is maintained. An image can be letterboxed. This mode may impair an image's quality by enlarging it above its original size.
-
+
+
+
+
+ isDecorative is true. In that case, any alt text provided will be overwritten to an
- empty string.
+
+
+
-
-
+
-
-
-
-
- 'fitXY' scale type
+
+ Scales X and Y axis of an image independently, so that the image matches the container exactly. An image is never letterboxed. This mode may impair an image's quality by enlarging it above its original size, or distort its aspect ratio.
-
- If dimensions for the image are not specified, the size will default to the height and width of the source
- image.
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- You can also use the
- appearanceOverrides prop
- to add custom styles to the image. It accepts any Vue dynamic styles object and applies the same with the highest precedence.
-
+
+ Aspect ratio
+ +
+ You can set the aspect ratio of the image container with
+ aspectRatio
+
Note that the ratio styles calculations need to have the width information, therefore it needs to be available in some way. For example, you can set the width directly on KImg. Alternatively, you could ensure that KImg's parent element has width by setting it explicitly or by using a block element.
width prop specifies the width of the image to be 100%, the appearanceOverrides prop overrides it and sets the width to 50%.
- Placeholder area
+ +
+ The placeholder area is displayed when an image is not available. The area respects the dimensions set on the image container and is gray by default. You can change the area color via backgroundColor
+ #placeholder
+
+
+
+
+
+
+
+
+
+
+
+
+ Displaying content on top of an image
+ +
+ Use #topLeft
+ #topRight
+ #bottomLeft
+ #bottomRight
+
-
-
- Progress track uses palette.grey.v_200 -
- Progress indicator uses brand.secondary.v_100 +
- Progress track uses palette.grey.v_100 +
- Progress indicator uses palette.grey.v_800
- Progress track height is 4px
- Include a 2px corner radius
- Remove the corner radius when appended to other components, such as appbars or data tables diff --git a/docs/pages/klistwithoverflow.vue b/docs/pages/klistwithoverflow.vue new file mode 100644 index 000000000..495321f6b --- /dev/null +++ b/docs/pages/klistwithoverflow.vue @@ -0,0 +1,249 @@ + + +
windowIsSmall,windowIsMedium, andwindowIsLarge
- - Returns
truewhen the window width fits the small, medium, or large breakpoint respectively as defined in(boolean)
-
- windowHeight
- - Returns the window height in pixels (integer) - -
windowWidth
- - Returns the window width in pixels (integer) - -
windowBreakpoint
- - Returns one of the more granular breakpoints defined as levels in
(integer, 0-7)
- -
-
has an overview of breakpoints -
- -
- See
if you need a component's size reactive information rather than that of the window -
- -
Thumb ON color:
-
+ -
Track ON color:
-
+ -
Thumb OFF color:
-
+ -
Track OFF color:
-
+
+ The KListWithOverflow component is useful when we want a horizontal list that is responsive and adaptable to the container size. The list only shows the items that fit on the container element. When items exceed the available space, the component seamlessly integrates a "see more" button to show additional items.
+
+ When a number of items fit within the screen boundaries, the list will be displayed without any changes. For example, since there are only 3 items here, we can see the entire list without problems. +
+
+
+
+
+
+
+
+
+
+
+
+ + But if the list becomes very long, and does not fit within the screen, then the overflowed items will be cut, and an element will be placed to show more. For example, here are 12 items in the list. +
+
+
+
+
+
+
+
+
+
+
+
+ + The following is a code example to render the above examples: +
+
+ You can also use dividers within the list by passing a { type: "divider" } object, and set a #divider slot.
+ Note that the visible list will not end with a divider. And a divider object will not be passed as a first overflowed item.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + To use dividers, you can include a divider object in the items list, and add a #divider slot. +
+
+
+
+
+ - Once added to a component it provides the following reactive window's size information: -
- --
-
Provided reactive properties are typically used to dynamically drive the layout of components by adjusting inline styles, CSS classes, component visibility, or even swapping out one component for a completely different one.
- -As mixin
-It can be imported as KResponsiveWindowMixin. As with any other mixin, you need to register it in the script part of a component file:
- Provided reactive properties can then be accessed on the component instance via this.
-
As composable
-It can be imported as useKResponsiveWindow. Register it in the script part of a component file:
useKResponsiveWindow() returns an object of reactive properties, that you could destruture.
Mixin vs composable
-Mixins come with several drawbacks including namespace collision, tight coupling, and dificulties associated with developer debugging. It is recommended that composables are used instead as they attemp to resolve these drawbacks. Benefits among others, include better logic reusability and better code organization.
-- Consider a Vue file with this in its template and script: -
- - -
- Box 1
-
-
- Box 2
-
- - This results in two boxes that stack vertically on small screens and otherwise display side-by-side: -
-Breakpoint level: {{ windowBreakpoint }}
- Window is large: {{ windowIsLarge }}
-
-
-
- Box 1
-
-
- Box 2
-
- - Try adjusting your browser window size to see the example in action. -
-- Consider a Vue file with this in its template and script: -
- - -
- Box 1
-
-
- Box 2
-
- - This results in two boxes that stack vertically on small screens and otherwise display side-by-side: -
-Breakpoint level: {{ composableWindowBreakpoint }}
- Window is large: {{ composableWindowIsLarge }}
-
-
-
- Box 1
-
-
- Box 2
-
- - Try adjusting your browser window size to see the example in action. -
--
-
Value: {{ exampleData }}
diff --git a/docs/pages/kswitch.vue b/docs/pages/kswitch.vue index e00313b63..7787bf918 100644 --- a/docs/pages/kswitch.vue +++ b/docs/pages/kswitch.vue @@ -33,19 +33,19 @@Dropdown menu
diff --git a/docs/pages/textfields/index.vue b/docs/pages/textfields/index.vue index 07f40cf7e..6a758cf0d 100644 --- a/docs/pages/textfields/index.vue +++ b/docs/pages/textfields/index.vue @@ -184,11 +184,11 @@Provides the following reactive window's size information:
+ +-
+
windowIsSmall,windowIsMedium, andwindowIsLarge
+ - Returns
truewhen the window width fits the small, medium, or large breakpoint respectively as defined in(boolean)
+
+ windowHeight
+ - Returns the window height in pixels (integer) + +
windowWidth
+ - Returns the window width in pixels (integer) + +
windowBreakpoint
+ - Returns one of the granular breakpoints defined as levels in
(integer, 0-7)
+
Provided reactive properties are typically used to dynamically drive the layout of components by adjusting inline styles, CSS classes, component visibility, or even swapping out one component for a completely different one.
++ Consider a Vue file with the following template and script: +
+ + +
+ Box 1
+
+
+ Box 2
+
+ + This results in two boxes that stack vertically on small screens and otherwise display side-by-side: +
+Window is large: {{ windowIsLarge }}
+
+
+
+ Box 1
+
+
+ Box 2
+
+ + Try adjusting your browser window size to see the example in action. +
+-
+
-
+
has an overview of breakpoints +
+ -
+ See
if you need a component's size reactive information rather than that of the window +
+
- ![]()
-
+
+
+