Add a loading state to the Button component.
Consider:

• loading animation for the button?
• loading state should be accessible

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

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.

The devDependency eslint-config-5app was updated from 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.

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:

• https://sarahmhigley.com/writing/select-your-poison/
• https://www.w3.org/TR/wai-aria-practices-1.2/#combobox

There have been updates to the babel7 monorepo:

• • The devDependency @babel/cli was updated from 7.6.2 to 7.6.3.

• The devDependency @babel/core was updated from 7.6.2 to 7.6.3.
• The devDependency @babel/plugin-proposal-object-rest-spread was updated from 7.5.5 to 7.6.2.
• The 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.

Your Greenkeeper Bot 🌴

There have been updates to the babel7 monorepo:

• • The devDependency @babel/cli was updated from 7.6.3 to 7.6.4.

• The devDependency @babel/core was updated from 7.6.3 to 7.6.4.
• The devDependency @babel/plugin-proposal-object-rest-spread was updated from 7.5.5 to 7.6.2.
• The 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.

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.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency @testing-library/react to v14
• chore(deps): update dependency gh-pages to v5
• chore(deps): update dependency typescript to v5
• chore(deps): update storybook monorepo to v7 (major) (@storybook/addon-actions, @storybook/addon-docs, @storybook/addon-essentials, @storybook/addon-links, @storybook/react)
• fix(deps): update dependency chartist to v1
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update commitlint monorepo to v17 (major) (@commitlint/cli, @commitlint/config-conventional)
• chore(deps): update dependency @testing-library/user-event to v14
• chore(deps): update dependency husky to v8
• chore(deps): update react monorepo to v18 (major) (react, react-dom)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency semantic-release to v19.0.3 [security]
• chore(deps): update dependency eslint-config-5app to ^0.19.0
• chore(deps): update dependency eslint-plugin-storybook to ^0.6.0
• chore(deps): update typescript-eslint monorepo to v5.59.8 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• fix(deps): update dependency focusable-selectors to ^0.8.0
• chore(deps): update jest monorepo to v29 (major) (@types/jest, babel-jest, jest)
• fix(deps): update dependency react-merge-refs to v2
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

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.

Problem

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.

Proposed solution

• Rename current name prop to title, make it isRequired
• Make the name prop optional and use it as a static identifier that is not exposed in the UI

When passing a future date to the Time component, it will show the dateTime in negative seconds:

To support the new menu structure on the playlist page, we need to add some components to base5-ui.

MenuList

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").

Menu

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:

• A wrapper element with role="group" which is aria-labelledby the next element:
• A GroupLabel component

The 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>

There have been updates to the babel7 monorepo:

• • The devDependency @babel/cli was updated from 7.4.4 to 7.5.0.

• The devDependency @babel/core was updated from 7.4.5 to 7.5.0.
• The devDependency @babel/plugin-proposal-object-rest-spread was updated from 7.5.0 to 7.5.1.
• The 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.

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.

The devDependency eslint-config-5app was updated from 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.

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:

1. Button colours are currently global and separate from both Theme Sections and Color Blocks. They're simpler than a Theme Section, and slightly more complex than a Color Block (giving separate control over text and background colour). In a way, they're an escape hatch I introduced because neither concept was fitting 100%.
2. Neither Color Blocks nor Buttons can be customised per Theme Section. Since Buttons are global, they may clash with some of the colours set for a theme section. Ironically, the negative example in the Storybook theming explainer can still easily happen in base5-ui. There needs to be a theme-level escape hatch for that.
3. Theme Sections often share similar variables. Especially the fields links, highlight, textDimStrength, shadeStrength, and lineStrength are often the same across multiple Theme Sections.

Approach:

• Allow specifying a default Theme Section sections.default which will be extended when variables are missing from any other section
• Move default Color Blocks from globals.colorBlocks into sections.default.colorBlocks; then allow overriding them in other sections
• Allow defining Color Blocks in more detail. Currently, they extend a Theme Section named colorBlock, replacing its text, links, and background fields, without precise control over how that's done. It should be possible to instead of assigning a simple colour string, assign an object that overrides the default Theme Section (e.g. instead of positive: 'green', allow positive: {text: '#fff', background: 'green'}). Again, missing fields would be taken from the default.
• With the aforementioned update, buttons could then be turned from special global variables to simple Color Blocks, e.g. button-default, button-primary, and button-important.

Implementation:

• All of this needs to be done in a backwards-compatible way, we can't break existing themes
• Investigate whether the colorBlock section we're currently using is still necessary when we introduce a default Theme Section The colorBlock section has been removed in the meantime ✅

The devDependency docz was updated from 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.

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:

• The distinction between "panels" and "cards" should be removed, instead the border radius should be controllable per card, and theme sections might gain a new optional backgroundAlt property for alternating background colours when Cards are nested.
• One important change will have to be the "inverted" colour mode, which shouldn't be hard-coded the way it currently is in 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.
• The margin declarations that are added to the current Card component when a maxWidth is defined should be removed, they'll be able to be added on a case-by-case basis

Our 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:

• API should mirror the native <input type="radio" />
• Like Checkbox, it should have an additional scale prop with the same behaviour
• Its size & layout properties should match that of the Checkbox component as well, so they can be swapped out for each other seamlessly
• It's design should follow the default mac OS radio buttons, and the size & colours of the Checkbox component:
  • A simple outlined circle when unselected
  • A filled in circle when selected (theme.links colour), and instead of a checkmark icon, a smaller, white outlined circle in the center
  • Cross-hatched filling when disabled (though it may make sense to revisit this design in both the Checkbox component and here – maybe a simple grey filling is a better look)
  • Thick focus indicator outline (theme.links colour) when using a keyboard

Example of default mac OS checkbox design:

Our 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.

The devDependency eslint-config-5app was updated from 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.

Your Greenkeeper Bot 🌴