5app / base5-ui Goto Github PK
View Code? Open in Web Editor NEWπͺ¦ RIP (5app's reusable UI component library) π’
Home Page: https://5app.github.io/base5-ui/
πͺ¦ RIP (5app's reusable UI component library) π’
Home Page: https://5app.github.io/base5-ui/
Add a loading state to the Button
component.
Consider:
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
Location: renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: matchUpdateTypes: matchUpdateTypes should be inside a 'packageRule' only
TS migration of arrow component
base5-ui/src/usePopoverState/index.js
Lines 25 to 29 in 01955ac
Chroma JS weighs in at 13.7 kB, while there are smaller libraries like https://color2k.com that weigh less than 3 kB. Look into whether the API of the latter is equally capable and switch over if so.
0.8.4
to 0.8.5
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
eslint-config-5app is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 2 commits.
fce8580
chore(release): 0.8.5 [skip ci]
a3c6bb5
fix(deps): update dependency eslint-plugin-jsdoc to v22
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
The Theming documentation in the base5-ui docs is currently a stub. It needs to be extended with a detailed description of how our theming works.
Investigate why a click on a button that is nested within the element specified as "excluded" can still trigger the DocumentClickListener
's onClick
handler.
When the close handler of the Modal
component is recreated during a render while the modal is open, it will unregister & immediately re-register the modal. This will mutate the modalStack and cause the user's focus to be reset to whichever element caused the previous render.
This re-registering & focus reset shouldn't happen, as Modals should only unregister when they're actually closed. One way to prevent this would be to store the latest reference to the onRequestClose
handler in a React ref inside of useModalManager
. This ref can be mutated without causing a re-registration, and without risking a stale close handler (which would be the result of simply removing the prop from the effect's dependency array).
To recreate the bug:
const [someState, setSomeState] = React.useState('');
const [someOtherState, setSomeOtherState] = React.useState('');
<Modal
name="modal"
onRequestClose={() => {}}
aria-labelledby="modal"
>
<input type="text" value={someState} onChange={e => setSomeState(e.target.value)} />
<input type="text" value={someOtherState} onChange={e => setSomeOtherState(e.target.value)} />
</Modal>
Typing into one of the inputs, then moving to another input, should get you into a "focus loop" where focus is continuously moved back and forth between both inputs as you type, as the modal's close handler is recreated on every state update.
The fix in this scenario is to either memoise the function passed to onRequestClose
, or in this case to simply move it outside of the component definition.
To make the Share dialog's user selector accessible, we need to create a multi-select-capable combobox component.
This can be based on the existing search autocomplete dropdown menu, but needs to support multi-selection and must be customisable to work with different input components.
Useful resources:
devDependency
@babel/cli was updated from 7.6.2
to 7.6.3
.devDependency
@babel/core was updated from 7.6.2
to 7.6.3
.devDependency
@babel/plugin-proposal-object-rest-spread was updated from 7.5.5
to 7.6.2
.devDependency
@babel/preset-env was updated from 7.6.2
to 7.6.3
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.
babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
devDependency
@babel/cli was updated from 7.6.3
to 7.6.4
.devDependency
@babel/core was updated from 7.6.3
to 7.6.4
.devDependency
@babel/plugin-proposal-object-rest-spread was updated from 7.5.5
to 7.6.2
.devDependency
@babel/preset-env was updated from 7.6.2
to 7.6.3
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.
babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
I recently noticed that due to the way the dropdown menus of our new accessible menu components are implemented, their positions on the screen are constantly being calculated & updated, even when they're closed.
On most pages this isn't a problem, but in playlists with a lot of assets it could potentially make page scrolling very sluggish, as the position of dozens of hidden menus is being updated.
The cause of this is that for accessibility, the menu containers always need to be present in the DOM. I have implemented this in a less than ideal way, by simply hiding the dropdowns visually, with the popover positioning code still running for them.
The solution is to render the menu containers in the DOM, but "disconnect" them from the usePopover
hook when they're not visible. This should be achievable by making some changes to base5-ui's PopoverCard
component and how it handles the "closed" state when the renderWhenClosed
flag is enabled.
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
@storybook/addon-actions
, @storybook/addon-docs
, @storybook/addon-essentials
, @storybook/addon-links
, @storybook/react
)These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.
@commitlint/cli
, @commitlint/config-conventional
)react
, react-dom
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@typescript-eslint/eslint-plugin
, @typescript-eslint/parser
)@types/jest
, babel-jest
, jest
).circleci/config.yml
package.json
@popperjs/core ^2.11.5
aria-hidden ^1.1.3
chartist ^0.11.4
classnames ^2.3.1
color2k ^2.0.0
focus-visible ^5.2.0
focusable-selectors ^0.3.1
popper-max-size-modifier ^0.2.0
react-focus-lock ^2.8.1
react-merge-refs ^1.1.0
react-popper ^2.2.5
use-item-list 0.1.2
@babel/core ^7.17.9
@babel/preset-env ^7.16.11
@babel/preset-react ^7.16.7
@babel/preset-typescript ^7.16.7
@commitlint/cli ^16.2.3
@commitlint/config-conventional ^16.2.1
@semantic-release/changelog ^6.0.1
@semantic-release/git ^10.0.1
@storybook/addon-actions ^6.4.22
@storybook/addon-docs ^6.4.22
@storybook/addon-essentials ^6.4.22
@storybook/addon-links ^6.4.22
@storybook/react ^6.4.22
@testing-library/jest-dom ^5.16.4
@testing-library/react ^12.1.5
@testing-library/user-event ^13.5.0
@types/jest ^27.4.1
@types/styled-components ^5.1.25
@typescript-eslint/eslint-plugin 5.22.0
@typescript-eslint/parser 5.22.0
babel-jest ^27.5.1
eslint ^8.13.0
eslint-config-5app ^0.16.4
eslint-config-prettier ^8.5.0
eslint-plugin-import ^2.26.0
eslint-plugin-jsx-a11y ^6.5.1
eslint-plugin-react ^7.29.4
eslint-plugin-react-hooks ^4.4.0
eslint-plugin-storybook ^0.5.11
gh-pages ^3.2.3
husky ^7.0.4
jest ^27.5.1
pixo ^1.1.2
prettier ^2.6.2
prop-types ^15.8.1
react ^17.0.2
react-dom ^17.0.2
regenerator-runtime ^0.13.9
semantic-release ^19.0.2
styled-components ^5.3.5
typescript ^4.6.3
react ^17.0.2
react-dom ^17.0.2
styled-components ^5.3.5
We need to add a way for UI components to prevent their own Escape key functionality from conflicting with that of the Modal component. Currently, pressing the Escape key to close e.g. a Select menu that lives within a modal will also close the modal, which is unexpected and frustrating to users.
The easiest way to achieve this would probably be to change global useEventListener
hooks to regular onKeyDown
props on wrapper components, so that the events can be stopped from propagating once they've been handled. Or maybe we just need to declare a more specific targetElement
for the useEventListener
hooks so they're not global and can be cancelled.
Separate handling may be needed for our generic Popover/Tooltip escape key listener, as it can't rely on a single wrapper element and needs to be global.
Sometimes the following error occurs while running tests, both locally and remotely.
TypeError: Cannot read property 'createEvent' of null
at Object.invokeGuardedCallbackDev (/home/circleci/repo/node_modules/react-dom/cjs/react-dom.development.js:3905:26)
at invokeGuardedCallback (/home/circleci/repo/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at flushPassiveEffectsImpl (/home/circleci/repo/node_modules/react-dom/cjs/react-dom.development.js:23543:11)
at unstable_runWithPriority (/home/circleci/repo/node_modules/scheduler/cjs/scheduler.development.js:468:12)
at runWithPriority$1 (/home/circleci/repo/node_modules/react-dom/cjs/react-dom.development.js:11276:10)
at flushPassiveEffects (/home/circleci/repo/node_modules/react-dom/cjs/react-dom.development.js:23447:14)
at Object.<anonymous>.flushWork (/home/circleci/repo/node_modules/react-dom/cjs/react-dom-test-utils.development.js:992:10)
at Immediate.<anonymous> (/home/circleci/repo/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1003:11)
at processImmediate (internal/timers.js:464:21)
/home/circleci/repo/node_modules/react-dom/cjs/react-dom.development.js:3905
var evt = document.createEvent('Event');
It's not clear to me why this is happening and what can be done to prevent it. Usually re-running the tests makes them pass without the error.
Enable full localisation of Time
component
Migrate button and related components to typescript!
The Select component should be able to be disabled, for when changing the selected value needs to be prevented.
Need to investigate how to do this in an accessible way; maybe aria-disabled
& disabling all menu interactions will be enough?
The TextLink
component is built on top of ButtonCore
which has an isDisabled
prop (depending on whether a real link or a button is rendered, this will either render a <span>
instead of a link, or add the aria-disabled
attribute to buttons.
We need to add appropriate styling to make this state perceivable by users.
When multi-selecting rows via keyboard shortcut (Shift + Arrow up/down), the onSelectionChange
callback will be called with duplicate row IDs. This shouldn't normally cause issues, but should still be prevented.
base5-ui's built-in Modal component is currently centring its content by default. It needs an override to support full-screen modals like the asset viewer.
Currently, the Table
component's sort handler returns the name of the column that the sorting was changed on. Since the name
of a column currently doubles as its readable title, this name may be a dynamic, localised string, which is inconvenient for the purpose of serving as an identifier when changing column sorting.
name
prop to title
, make it isRequired
name
prop optional and use it as a static identifier that is not exposed in the UITo support the new menu structure on the playlist page, we need to add some components to base5-ui.
Divider
A new MenuList.Divider
component. This can probably just be the Divider
component with added top and botto margin.
GroupLabel
A new GroupLabel
component with dimmed
text and very small bold text (I think it's fontSize="xxs"
).
With the MenuList
changes in place, we can use them to add more structure to the Menu
component.
https://www.w3.org/TR/wai-aria-practices-1.2/#menu
Divider
(or MenuItemDivider
?)A MenuList.Divider
component with role="separator"
MenuItemGroup
This should be a combination of 2 elements:
role="group"
which is aria-labelledby
the next element:GroupLabel
componentThe intended usage should look something like this:
<MenuList>
<MenuItemGroup label="Birds">
<MenuItem>
Blue-footed booby
</MenuItem>
<MenuItem>
Hungry pelican
</MenuItem>
</MenuItemGroup>
<Divider />
<MenuItemGroup label="Crocodiles">
<MenuItem>
Just a crocodile
</MenuItem>
</MenuList>
devDependency
@babel/cli was updated from 7.4.4
to 7.5.0
.devDependency
@babel/core was updated from 7.4.5
to 7.5.0
.devDependency
@babel/plugin-proposal-object-rest-spread was updated from 7.5.0
to 7.5.1
.devDependency
@babel/preset-env was updated from 7.4.5
to 7.5.0
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.
babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
Adds new JSX linting rules for accessibility
See https://github.com/evcohen/eslint-plugin-jsx-a11y
fyi: this plugin is already in the dependencies, but appears not to be enabled
A refactor caused a bunch of onUpdatePopover
props to remain rendered by various components, without the prop ever being used. This causes the error from the issue title to show up in the console.
0.7.4
to 0.7.5
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
eslint-config-5app is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 2 commits.
dc266c4
chore(release): 0.7.5 [skip ci]
c38fb36
fix(deps): update dependency eslint-plugin-you-dont-need-lodash-underscore to v6.7.1
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
Popovers must be dismissible via the Esc key, this should be built into the usePopoverState
hook, possibly through combining it with the useEventListener
hook. An initial implementation of this was buggy & I worked around it using the DocumentClickListener
component, but a hook-only solution would be preferable. useEventListener
probably needs a proper way to disable it.
The Icon
component currently only supports the non-standard spacingLeft
and spacingRight
props instead of the commonly used ml
, mr
, mx
, etc style props. Additionally, the color
prop is not theme-aware yet, i.e. it only supports raw HTML colours instead of theme colour identifiers like "text", "links" or "highlight".
To improve the UX of reordering items in our app, we need to explore options to facilitate that, e.g. using react-beautiful-dnd.
Some aspects of our theming system could use some streamlining to make it both easier to use and more flexible.
Issues:
links
, highlight
, textDimStrength
, shadeStrength
, and lineStrength
are often the same across multiple Theme Sections.Approach:
sections.default
which will be extended when variables are missing from any other sectionglobals.colorBlocks
into sections.default.colorBlocks
; then allow overriding them in other sectionscolorBlock
, replacing its text
, links
, and background
fields, without precise control over how that's done.positive: 'green'
, allow positive: {text: '#fff', background: 'green'}
). Again, missing fields would be taken from the default.button-default
, button-primary
, and button-important
.Implementation:
colorBlock
section we're currently using is still necessary when we introduce a default
Theme SectioncolorBlock
section has been removed in the meantime β
2.0.0-rc.77
to 2.0.0
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
docz is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
We're currently using two different Card components in the dashboard repo: ui/elements/Card
and ui/elements/Card/legacy
("LegacyCard").
These should be replaced by a single, lower-level Card component that can handle all necessary use cases. The component should be built on top of Box
.
Changes:
backgroundAlt
property for alternating background colours when Cards are nested.LegacyCard
, but should be a new theme section instead (it can be added to the 5app theme and all other themes will inherit it). This will make sure that links and other elements placed in an inverted card will be readable.Card
component when a maxWidth
is defined should be removed, they'll be able to be added on a case-by-case basisOur design system is currently missing a RadioButton
component that blends in with the theme of the site in the same way our Checkbox
component does.
We should create one that works just the same:
<input type="radio" />
Checkbox
, it should have an additional scale
prop with the same behaviourCheckbox
component as well, so they can be swapped out for each other seamlesslyCheckbox
component:
theme.links
colour), and instead of a checkmark icon, a smaller, white outlined circle in the centerCheckbox
component and here β maybe a simple grey filling is a better look)theme.links
colour) when using a keyboardOur BackLinkProvider
component currently only supports absolute backlink levels, i.e. any given URL path has one fixed backlink level. This can be an issue for pages that have many potential "parent" pages, e.g. the hub's asset viewer.
We're working around this issue for the asset viewer by dynamically offsetting its backlink level by 1 and leaving a matching gap between all other levels, but that's quite hacky.
As playlists can also be opened from many places now (which can have a higher backlink level than the one for the playlist page!), we're running into the same issue again: https://github.com/5app/hub/issues/10937
So we'll need to find a way to solve this globally and without temporary hacks.
A potential solution may be introducing relative offsets for pages, to basically tell the back link provider that a given page is always to be "nested" below the previous level. This could be achieved for example by prefixing a level with a .
dot.
In the case of the hub, the playlist page would then get a level of '.1'
, and the asset viewer a level of '.2'
. Even deeper 'nesting' would be indicated by more dots, e.g. '..1'
.
I need to spend a bit more time figuring out how this approach affects sibling pages, e.g. when navigating between subpages of the playlist page.
0.7.1
to 0.7.2
.π¨ View failing branch.
This version is covered by your current version range and after updating it in your project the build failed.
eslint-config-5app is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 6 commits.
cf56437
chore(release): 0.7.2 [skip ci]
6df1a0f
fix(ci): breaking builds on Node12... hopeful fix
7218884
Merge pull request #34 from 5app/greenkeeper/eslint-plugin-jsdoc-15.10.0
3506284
chore(package): update eslint-plugin-jsdoc to version 15.10.0
6204278
Merge pull request #33 from 5app/greenkeeper/eslint-plugin-jsdoc-15.9.3
7718ae5
chore(package): update eslint-plugin-jsdoc to version 15.9.3
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
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.