learningequality / kolibri-design-system Goto Github PK
View Code? Open in Web Editor NEWKolibri Design System
Home Page: https://design-system.learningequality.org
Kolibri Design System
Home Page: https://design-system.learningequality.org
We do not have control over the length of text in buttons when they are being translated.
In the (rare?) case that the width of the button group in modals happens to exceed the width of the modal, the buttons should wrap, with the secondary action appearing below the primary action. They should still remain right-aligned.
In learningequality/kolibri#5843 we distinguished KGrid
from KFixedGrid
and KGridItem
from KFixedGridItem
.
@jonboiser commented
It may make the Vue devtools component view more noisy, as grid items are now nested a level deeper under
KGrid
>KGridItem
>KGridFixedItem
.
We should move common functionality to composables, like we do with mixins for KButton
to improve the developer experience
none
0.12.7
Having validation only on the backend means that the theme "API" isn't well defined.
It would be better for the front-end to clearly define it, and possibly to provide internal defaults so that unit testing is easier
see thread: learningequality/kolibri#5688 (review)
themes and tests that need themes are confusing for devs to work with
0.12.4
Want to give k-checkbox the same treatment I gave k-radio-button in learningequality/kolibri#3472
Some value adds:
display:xxxxxxx
to the parent element. Right now, locked into using table
.This was originally a problem in learningequality/kolibri#6301, and I'm wondering if something changed with the KModal in this library, because I'm seeing the KModal form appear over the disconnection overlay again. Fortunately, I can close the modal without seeing the same errors as in that issue.
We're currently using the old Material style of textboxes. In addition to having proven UX issues, it also leads to inconsistent vertical rhythm:
![]() |
![]() |
---|---|
![]() |
![]() |
upgrade to the new style:
According to the study, this has improvements in three dimensions:
0.12.x
Similar to learningequality/kolibri#6043, when (shift)-tabbing through a KModal form, keyboard focus will be lost when going out of bounds:
A more convenient keyboard navigation, similar to the fix to learningequality/kolibri#6043 but within KMOdal.
…
…
…
…
.drop-element
. This is from the UserPage, where clicking "Options" opens the drop down menu. They go away after navigating away from User Page, at least.Kolibri v0.13 (develop)
From discussion in this google document https://docs.google.com/document/d/1Qm1vpbbqlgTGn4m-qRX57YLpUr9cKmtH2QkEoy0P8-0/edit#heading=h.c1qqiboowt5l
Bringing clarity on modal behavior since they do not have a URL
The browser back button should function the same as dismissing the modal - the same as hitting the "cancel" button
From Netlify:
A reminder that starting April 14, 2020, sites without a custom domain are being moved from
your-site.netlify.com
toyour-site.netlify.app
The text filter and div scroll position should be maintained as you navigate around the site.
This is a bit challenging because every page is intentionally implemented as an independent HTML page, but should still be possible.
Currently we have a situation where there is one top-level package.json
file, and:
/lib
) are in dependencies
/lib
) are expected/assumed to be provided by the library userdevDependencies
. This includes both build and run-time dependenciesThis situation will be hard to maintain. Preferably, we want:
peerDependencies
?)<router-link>
is like router.push()
- in that it creates a new history
We can extend the replace
prop from <router-link>
to KRouterLink
so that we have the option.
https://router.vuejs.org/api/#replace
I noticed this while looking into the first listed issue in this: learningequality/kolibri#7366
Where the back button "doesn't work" but it's really just that you're getting a bunch of history items pushed to the history stack.
In particular, we want to make sure that the optimizations from learningequality/kolibri#4075 are being enforced
Style updates are expensive, and should not be allowed to be called more often than necessary
potentially lower performance
k011
I wanted a button to be a router link. The "Create Account" button on the sign in. I wanted to also make that button disabled when the form is submitted.
But KRouterLink
does not have the disabled
prop that KButton
has and I think that it maybe ought to.
<a>
and <button>
both have common enough uses for being disabled.
My solution was to wrap KButton
in a <router-link>
- which worked fine - but if KRouterLink
can pretend to be a button then let's help it be better at it?
As observed by @jonboiser in learningequality/kolibri#3173 (comment), the k-select
component interprets {}
as no option selected. If any keys are available it may interpret it as a valid input.
Also, it would be helpful to communicate the fact that input is valid to the wrapping component, so it can handle disabling input buttons.
Should validate for the two keys value
and label
that k-select
expects, and either expose its current validation state to the parent component, or have an externally accessible validator to check this validity.
May implement confusing work flows as demonstrated by learningequality/kolibri#3171..
Currently, some parts of Studio are using the Vuetify VImg
component, which produces responsive images, but does so by setting a background image onto a div
- this goes against good accessibility practices, and is something that @nucleogenesis did significant work to address in github.com/learningequality/kolibri
It would be good to port that responsive image work to a more general component to allow us to use accessible responsive images across our ecosystem.
There are at least three implementations of search boxes.
kFilterTextbox
0.12.3
CSV import instructions at Facility
- DATA
- Import and export users
- View spreadsheet format reference
suggests using email address as an Identifier
-
But an email address overlaps with gender field even for short emails in the Facility
- USERS
list -
Identifier field's value should not overlap with gender field value.
Unreadable data
…
…
Kolibri 0.14.0
Example from SyncAllModal.vue
in Kolibri . Hovering over the "Sync" button will not cause the tooltip to appear
<KButtonGroup>
<KButton
:text="coreString('cancelAction')"
@click="$emit('cancel')"
/>
<KButton
ref="syncbutton"
:text="coreString('syncAction')"
primary
:disabled="submitDisabled"
type="submit"
/>
<!-- TODO make tooltips appear when hovering over disabled buttons-->
<KTooltip
v-if="submitDisabled"
reference="syncbutton"
:refs="$refs"
>
<span v-if="noRegisteredFacilities">
{{ $tr('noFacilitiesTooltip') }}
</span>
<span v-else>
{{ $tr('currentlyOfflineTooltip') }}
</span>
</KTooltip>
</KButtonGroup>
observed in #68 on mac + chrome:
Would expect the icons to be perfectly middle-aligned vertically with the text
Based on a Slack thread
Issue summary: We have inconsistent ways of handling the alignment of flat button components in our products. Should the text or component be aligned to a page container?
A couple of takeaways (copy pasted)
Currently the buttons page does not mention spacing between buttons or the new KButtonGroup
component
ref: #95 (comment)
Intent was to include an intro paragraph that does not generate a section link and anchor:
However the props are required:
We should update DocsPageSection
so that:
title
and anchor
should be optional props, so that they can be omitted entirely. In this case, no title or anchor link is createdanchor
or title
are provided, the other is also requiredNote that an alternative might be to omit the DocsPageSection
component altogether, like this:
<DocsPageTemplate>
<p>These principles allow Learning Equality to apply its core values to the product design process. For non-designers, they also shed light on how the design team makes and prioritizes design decisions internally.</p>
<p>When making decisions that affect our users, we encourage you to reference these principles during the product development process and to hold yourself accountable to these standards.</p>
<p>Finally, these principles are a work in progress. The intent is that this is a living set of principles that will evolve to better serve the design team, the product process, and our users.</p>
<DocsPageSection title="Equitable access" anchor="#equitable">
<p>Equity is at the heart of Learning Equality’s mission. Our products address barriers of access to educational opportunity that are faced by marginalized populations.</p>
<ul>
...
However this results in the text being full-width because it's the DocsPageSection
which provides a max content width:
This is desirable so that other components like component examples can be full-width.
We removed the target="_blank" rel="noopener noreferrer"
due to learningequality/kolibri#7480
However, KExternalLink
ought to have a boolean prop openInNewTab
when true will apply the proper attrs.
It also should be tested in Android and other special-build versions of Kolibri designed to run in a web view.
First, this must be finished: learningequality/kolibri#7482 because Kolibri uses KExternalLink
for internal routing at time of writing.
A PDF and an ePub with the same title are indistinguishable: http://35.196.115.213/learn/#/topics/t/2c953cb70c4d57dbb91a879ab4953834
Certain sources offer both a PDF and ePub version of documents with the same title. Ideally we would want to import both file formats, but it can be confusing if icons for both document sub-kinds are the same.
Severity: minor
Adding a gerund to a title gives the user the impression that the task is in progress when it's not. Several anecdotal accounts of this happening from team members
Slack thread which contains other links
https://learningequality.slack.com/archives/CTG8XDTCL/p1597436796011600
I'm making it work so that KDropdownMenu allows a KIconButton because our specs have required the ability to do so.
The API here ought to be improved though. text
is a required prop that isn't required for a KIconButton - but a KIconButton does need some tooltip text.
I think this is likely to be more useful as we near implementation in Studio.
The following changes to shared Kolibri Components have been made recently in Kolibri develop
. They need to be added here before learningequality/kolibri#6595 is merged in
The DocsColorBlock
component has a boolean definition
property, which is intended to be:
true
when the color block is being used on the "Color" page and is the canonical "definition" which gets linked to.false
when the color block is being used as an example or illustrationkolibri-design-system/docs/common/DocsColorBlock.vue
Lines 36 to 46 in a60d086
Setting definition
to false
should cross-link to the actual definition in the colors page.
In a recent change related to granular import/export (#2610), we added a new prop to the core breadcrumbs component:
+ /**
+ * When set to 'true', a breadcrumb will be shown for each item in 'items' array.
+ * Otherwise, the first item will be omitted.
+ */
+ showAllCrumbs: {
+ type: Boolean,
+ default: false,
+ },
We need to update the style guide to give guidance on when this prop is intended to be used.
The padding
rule for its small
class makes it look lopsided. I would recommend keeping it an even 16px on all sides
kolibri-design-system/lib/KPageContainer.vue
Lines 61 to 63 in 1698dc2
Actually, even the default padding makes it look un even, because margin-top
is less than the other sides.
SSR-related issue related to #6
Kolibri Linter: Linting errors for lib/styles/trackInputModality.js
Kolibri Linter:
lib/styles/trackInputModality.js
116:3 error Parsing error: 'import' and 'export' may only appear at the top level
@indirectlylit made this prop required in a minor release, which broke existing users.
Let's follow up in a major release in #168
I think KExternalLink ought to either give the option to - or just by default open links with target="_blank" rel="noopener noreferrer"
attrs to open external links into a new tab.
We have duplicated code 3x for switching colors based on content types.
Move to a shared helper utility. See learningequality/kolibri#5540 (comment)
None
0.12.3
I think that, perhaps, the only difference between them ought to really just be how we handle events.
:to
route which must be a valid router route.download
prop (among others) to manage external URL linksAll of them should have:
basic-link
raised-button
flat-button
icon
and iconAfter
props & slots w/ a consistent sizing/stylingdisabled
propAnd I'm suggesting that If any of the components receive the same values for these props, they should look 100% identical. The only difference being how they act.
KTextbox will not show error state - even when the invalid
prop is true - if the value of the field has never changed.
This makes a validation like "This field is required" not show up if the user just flat out skipped it. Even if the field was focused at some point, the invalidText
won't show unless you've ever entered a value.
Seems that if you have a Boolean where the implementing parent component says whether or not a field is valid that this should be everything you need to determine whether or not the message is shown.
I'm curious where the use cases were that necessitated the changeOrFocused
value and why the focus
on the element isn't making it show the error as expected.
Not sure if this is actually from KLabeledIcon, but here are some screenshots of text + icon overlapping in RTL
https://kolibri-beta.learningequality.org/ar/learn/#/topics/c/544c345f9d6c4b90a4f51c56d95243fe
Side Nav
We've run into on at least two occasions.
First in learningequality/kolibri#3652, the select menu in the language switcher login-page caused major issues:
More recently in learningequality/kolibri#4016, select boxes that towards the bottom of scrolling areas (or that contain many items) have a very poor user experience because they require the user to scroll down in order to see the pop-up:
Unfortunately, this behavior is built-in to our current custom select widget, and in fact may be unavoidable for any custom select widget.
A true native select box appears on top of everything, even the outer window:
Since we cannot achieve this and retain our custom styling, we should avoid using select boxes anywhere that they might exhibit this type of behavior. In particular, this means:
We should also update our style guide with guidance to this effect
Hard to select items
see steps in learningequality/kolibri#4016
0.11
To fix a problem where two buttons in a Button Group would wrap if their container got too narrow, I added a white-space: nowrap
rule.
https://github.com/learningequality/kolibri/pull/7393/files#diff-127f6559e90cdff95ed013563555933d
I think this will be a pretty common usage where we want buttons to stay in a side-by-side layout, so it would be helpful if this was either a default or can be controlled via a prop.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.