Merge branch 'master' of github.com:5app/base5-ui

.circleci/config.yml

@@ -8,8 +8,8 @@ aliases:
   - &attach_workspace
     attach_workspace:
       at: *dir
-  - &cache-key dependency-cache-lts-{{ checksum "package.json" }}
-  - &cache-key-fallback dependency-cache-
+  - &cache-key dependency-cache-lts-a-{{ checksum "package.json" }}
+  - &cache-key-fallback dependency-cache-lts-a-
 
 ################################
 # Executors

CHANGELOG.md

@@ -1,3 +1,106 @@
+## [14.3.2](https://github.com/5app/base5-ui/compare/v14.3.1...v14.3.2) (2021-11-16)
+
+
+### Bug Fixes
+
+* **ThemeSection:** Add fallback for localThemeSection, noissue ([051e1c3](https://github.com/5app/base5-ui/commit/051e1c3a808ca33aad3810fc731debfefc2e9584))
+
+## [14.3.1](https://github.com/5app/base5-ui/compare/v14.3.0...v14.3.1) (2021-11-16)
+
+
+### Code Refactoring
+
+* **ThemeSection:** Improve bg image handling, noissue ([3541f58](https://github.com/5app/base5-ui/commit/3541f58381f652460351151d6873fa9e95013e28))
+
+
+### BREAKING CHANGES
+
+* **ThemeSection:** Removes the  prop, just use  now.
+Renames  to .
+
+# [14.3.0](https://github.com/5app/base5-ui/compare/v14.2.0...v14.3.0) (2021-11-11)
+
+
+### Features
+
+* **icons:** New icons 'section' and 'trash', noissue ([caeeb0a](https://github.com/5app/base5-ui/commit/caeeb0af40d5eba87c2d4d521e8b247639575258))
+
+# [14.2.0](https://github.com/5app/base5-ui/compare/v14.1.0...v14.2.0) (2021-11-10)
+
+
+### Features
+
+* **useBackLink:** Accept array of basePaths, [#164](https://github.com/5app/base5-ui/issues/164) ([4200de3](https://github.com/5app/base5-ui/commit/4200de32638c4aa1683344959bccacad719977ab))
+
+# [14.1.0](https://github.com/5app/base5-ui/compare/v14.0.1...v14.1.0) (2021-11-09)
+
+
+### Bug Fixes
+
+* Work around styles-components parent selector issue, noissue ([75247dc](https://github.com/5app/base5-ui/commit/75247dc632530db2c07cbdce7aac20fa097c216e)), closes [#3265](https://github.com/5app/base5-ui/issues/3265)
+
+
+### Features
+
+* **Switch:** More consistent and visible focus indicator, noissue ([eadb184](https://github.com/5app/base5-ui/commit/eadb184cb95e4d0be31ee15a3e65527f6202a813))
+
+## [14.0.1](https://github.com/5app/base5-ui/compare/v14.0.0...v14.0.1) (2021-11-05)
+
+
+### Bug Fixes
+
+* **BackLinkProvider:** Fix slice/splice mixup, [#164](https://github.com/5app/base5-ui/issues/164) ([5ab21b8](https://github.com/5app/base5-ui/commit/5ab21b8902646ccabc36285d9eee66171f15742c))
+* **BackLinkProvider:** Simplify redirect handling, [#164](https://github.com/5app/base5-ui/issues/164) ([72485ca](https://github.com/5app/base5-ui/commit/72485cadea51bd7629efd31b3a7ddd473502b879))
+* **useBackLink:** Fix inverted subpath logic, [#164](https://github.com/5app/base5-ui/issues/164) ([41648a8](https://github.com/5app/base5-ui/commit/41648a84d2552c0a6ed63c0dab2c27aebbfd805a))
+
+# [14.0.0](https://github.com/5app/base5-ui/compare/v13.5.3...v14.0.0) (2021-11-04)
+
+
+### Bug Fixes
+
+* Small TS fix ([078807c](https://github.com/5app/base5-ui/commit/078807cf764c0d5df5aacc028eb29817b156323f))
+
+
+### Features
+
+* **useBackLink:** Big useBackLink refactor, [#164](https://github.com/5app/base5-ui/issues/164) ([ca9c459](https://github.com/5app/base5-ui/commit/ca9c45925e41b9119cb6351296cbcdb8f96c4da8))
+
+
+### BREAKING CHANGES
+
+* **useBackLink:** This changes the public API of useBackLink and
+BackLinkProvider.
+
+## [13.5.3](https://github.com/5app/base5-ui/compare/v13.5.2...v13.5.3) (2021-11-02)
+
+
+### Bug Fixes
+
+* **Modal:** Fix live regions outside of modals ([3dbe001](https://github.com/5app/base5-ui/commit/3dbe001d0647aac559dc4f9fcb62066a708de46b))
+
+## [13.5.2](https://github.com/5app/base5-ui/compare/v13.5.1...v13.5.2) (2021-11-02)
+
+
+### Bug Fixes
+
+* Don't hide live regions outside of modals, noissue ([a9a5446](https://github.com/5app/base5-ui/commit/a9a54461109098d310f1d9795195e75425556d50))
+
+## [13.5.1](https://github.com/5app/base5-ui/compare/v13.5.0...v13.5.1) (2021-10-11)
+
+
+### Bug Fixes
+
+* **useCallbackRef:** Add missing export, noissue ([7e20065](https://github.com/5app/base5-ui/commit/7e20065a4cf959c2d40bf28565bd4d7764e882d1))
+
+# [13.5.0](https://github.com/5app/base5-ui/compare/v13.4.9...v13.5.0) (2021-10-11)
+
+
+### Features
+
+* New useCallbackRef hook, noissue ([b232306](https://github.com/5app/base5-ui/commit/b232306822560c88314d33a92e778c47f0f1d0cb))
+
+## [13.4.9](https://github.com/5app/base5-ui/compare/v13.4.8...v13.4.9) (2021-10-07)
+
 ## [13.4.8](https://github.com/5app/base5-ui/compare/v13.4.7...v13.4.8) (2021-09-14)
 
 

package.json

@@ -1,9 +1,10 @@
 {
 	"name": "base5-ui",
-	"version": "13.4.8",
+	"version": "14.3.2",
 	"description": "5app's reusable UI component library",
 	"main": "index.js",
 	"types": "dist/index.d.ts",
+	"sideEffects": false,
 	"scripts": {
 		"build-icons": "pixo src-icons/svg --out-dir src/icons --template src-icons/template.js",
 		"compile": "tsc",

src/Button/index.js

@@ -178,7 +178,7 @@ const FocusRing = styled.span.withConfig({
 	transition: opacity 250ms linear;
 	will-change: opacity;
 
-	${Wrapper}.focus-visible > & {
+	${Wrapper}.focus-visible > && {
 		top: -${_3px};
 		left: -${_3px};
 		bottom: -${_3px};
@@ -194,7 +194,7 @@ const FocusRing = styled.span.withConfig({
 		transition-duration: 50ms;
 	}
 	/* prettier-ignore */
-	${Wrapper}:not(.is-disabled):active > & {
+	${Wrapper}:not(.is-disabled):active > && {
 		opacity: 1;
 		transition-duration: 50ms;
 	}
@@ -216,12 +216,12 @@ const HoverShade = styled.span`
 		box-shadow: inset 0 0 0.25rem rgba(0, 0, 0, 0.5);
 	}
 	/* prettier-ignore */
-	${Wrapper}:not(.is-disabled):hover > & {
+	${Wrapper}:not(.is-disabled):hover > && {
 		opacity: 1;
 		transition-duration: 50ms;
 	}
 	/* prettier-ignore */
-	${Wrapper}:not(.is-disabled):active > & {
+	${Wrapper}:not(.is-disabled):active > && {
 		opacity: 0;
 		transition-duration: 250ms;
 	}
@@ -235,7 +235,7 @@ const Content = styled.span`
 `;
 
 /**
- * The button label should just have some horinzontal spacing.
+ * The button label should just have some horizontal spacing.
  * But if `textOverflow="ellipsis" is set, the Button label
  * will have overflow set to "hidden", which can cause the
  * descenders of some characters (g, y, j) to be cut off.

src/ButtonCore/index.js

@@ -33,11 +33,13 @@ const Clickable = styled.button`
 		cursor: pointer;
 	}
 
-	&:focus:not(.focus-visible) {
+	&:focus:not(.focus-visible),
+	&:focus:not([data-focus-visible-added]) {
 		outline: none;
 	}
 
-	&.focus-visible {
+	&.focus-visible,
+	&[data-focus-visible-added] {
 		outline: 3px solid currentColor;
 		outline-offset: 3px;
 	}

src/Icon/iconMap.js

@@ -24,7 +24,6 @@ const iconMap = {
 	captions: require('../icons/Captions').default,
 	chat: require('../icons/Chat').default,
 	chevron: require('../icons/Chevron').default,
-	collection: require('../icons/Collection').default,
 	cycle: require('../icons/Cycle').default,
 	dislike: require('../icons/Dislike').default,
 	disk: require('../icons/Disk').default,
@@ -38,6 +37,7 @@ const iconMap = {
 	'eye-open': require('../icons/EyeOpen').default,
 	favourite: require('../icons/Favourite').default,
 	flag: require('../icons/Flag').default,
+	forbidden: require('../icons/Forbidden').default,
 	fullscreen: require('../icons/Fullscreen').default,
 	'fullscreen-exit': require('../icons/FullscreenExit').default,
 	globe: require('../icons/Globe').default,
@@ -62,6 +62,7 @@ const iconMap = {
 	playlist: require('../icons/Playlist').default,
 	'playlist-link': require('../icons/PlaylistLink').default,
 	plus: require('../icons/Plus').default,
+	section: require('../icons/Section').default,
 	search: require('../icons/Search').default,
 	send: require('../icons/Send').default,
 	settings: require('../icons/Settings').default,
@@ -74,6 +75,8 @@ const iconMap = {
 	team: require('../icons/Team').default,
 	time: require('../icons/Time').default,
 	tools: require('../icons/Tools').default,
+	topic: require('../icons/Topic').default,
+	trash: require('../icons/Trash').default,
 	trending: require('../icons/Trending').default,
 	undo: require('../icons/Undo').default,
 	unpin: require('../icons/Unpin').default,

src/MenuList/index.js

@@ -31,10 +31,14 @@ const Item = styled.li`
 	display: block;
 `;
 
-const Link = styled(ButtonCore).withConfig({
-	shouldForwardProp: prop =>
-		![...textLinkProps, 'isHighlighted'].includes(prop),
-})`
+const Link = styled(ButtonCore)
+	.attrs(({isHighlighted}) => ({
+		className: isHighlighted ? 'is-highlighted' : '',
+	}))
+	.withConfig({
+		shouldForwardProp: prop =>
+			![...textLinkProps, 'isHighlighted'].includes(prop),
+	})`
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -57,7 +61,8 @@ const Link = styled(ButtonCore).withConfig({
 		outline: none;
 	}
 
-	&.focus-visible:focus {
+	${Wrapper}[data-focus-visible-added] &&.is-highlighted,
+	&[data-focus-visible-added]:focus {
 		outline: none;
 
 		&::after {
@@ -106,9 +111,9 @@ const IconWrapper = styled.span`
 
 	opacity: ${p => p.theme.textDimStrength};
 
-	${Link}:hover:not(.is-disabled) > &,
-	.is-focused:not(.is-disabled) > &,
-	.is-active:not(.is-disabled) > & {
+	${Link}:hover:not(.is-disabled) > &&,
+	${Link}[data-focus-visible-added]:not(.is-disabled) > &&,
+	.is-active:not(.is-disabled) > && {
 		opacity: 1;
 	}
 `;

src/Modal/Modal.js

@@ -99,7 +99,13 @@ function Modal({
 				id={name}
 				{...otherProps}
 				role="dialog"
-				aria-modal="true"
+				// We don't need the aria-modal property here,
+				// because we're "polyfilling" its effect (hiding
+				// background content) using the 'aria-hidden' library,
+				// which also gives us more control over it and allows
+				// us to exclude certain elements from being hidden.
+				// This solves issue https://github.com/5app/hub/issues/10949
+				// aria-modal="true"
 			>
 				<CenterOrFullscreen
 					fullscreen={fullscreen}

src/Modal/accessiblyHideModalBackground.js

@@ -4,11 +4,12 @@ import PropTypes from 'prop-types';
 
 const PREVENT_ARIA_HIDDEN_ATTRIBUTE = 'data-prevent-aria-hidden';
 
-// hide everything except modalElement and elements with
-// the PREVENT_ARIA_HIDDEN_ATTRIBUTE
+// hide everything except modalElement, live regions, and
+// elements with the PREVENT_ARIA_HIDDEN_ATTRIBUTE
 function hideForModal(modalElement) {
 	return hideOthers([
 		modalElement,
+		...document.querySelectorAll(`[aria-live]`),
 		...document.querySelectorAll(`[${PREVENT_ARIA_HIDDEN_ATTRIBUTE}]`),
 	]);
 }

src/Pill/index.js

@@ -136,12 +136,12 @@ const HoverShade = styled.span`
 	will-change: opacity;
 
 	/* prettier-ignore */
-	${Wrapper}:not(.is-disabled):hover > & {
+	${Wrapper}:not(.is-disabled):hover > && {
 		opacity: 1;
 		transition-duration: 50ms;
 	}
 	/* prettier-ignore */
-	${Wrapper}:not(.is-disabled):active > & {
+	${Wrapper}:not(.is-disabled):active > && {
 		opacity: 0;
 		transition-duration: 250ms;
 	}
@@ -160,7 +160,7 @@ const FocusRing = styled.span.withConfig({
 	transition: opacity 250ms linear;
 	will-change: opacity;
 
-	${Wrapper}.focus-visible > & {
+	${Wrapper}.focus-visible > && {
 		top: -${_3px};
 		left: -${_3px};
 		bottom: -${_3px};
@@ -173,7 +173,7 @@ const FocusRing = styled.span.withConfig({
 	}
 
 	/* prettier-ignore */
-	${Wrapper}:not(.is-disabled):active > & {
+	${Wrapper}:not(.is-disabled):active > && {
 		opacity: 1;
 		transition-duration: 50ms;
 	}
@@ -234,7 +234,7 @@ function defaultIconRenderer({iconName, iconColor}) {
 	}
 
 	return (
-		<ThemeSection name="colorBlock" colorBlock={iconColor || iconName}>
+		<ThemeSection name={iconColor || iconName}>
 			<IconWrapper>
 				<Icon name={iconName} data-iconname={iconName} />
 			</IconWrapper>

src/Switch/index.js

@@ -82,6 +82,27 @@ const SwitchIcon = styled(OkIcon)`
 		`}
 `;
 
+const _3px = pxToRem(3);
+
+const FocusRing = styled.span`
+	opacity: 0;
+
+	input.focus-visible ~ & {
+		position: absolute;
+		top: -${_3px};
+		left: -${_3px};
+		bottom: -${_3px};
+		right: -${_3px};
+
+		border-radius: inherit;
+
+		box-shadow: 0 0 0 ${_3px} ${p => p.theme.links};
+
+		opacity: 1;
+		transition: opacity 100ms linear;
+	}
+`;
+
 const Switch = forwardRef(
 	({checked, disabled, id, tabIndex, ...otherProps}, ref) => {
 		const inputRef = useRef();
@@ -106,6 +127,7 @@ const Switch = forwardRef(
 				<Handle>
 					<SwitchIcon scale={0.8} checked={checked} />
 				</Handle>
+				<FocusRing />
 			</Wrapper>
 		);
 	}