diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx index 178fa71965a357..85631b0b5227a5 100644 --- a/packages/components/src/navigator/navigator-screen/component.tsx +++ b/packages/components/src/navigator/navigator-screen/component.tsx @@ -52,8 +52,16 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) { const cx = useCx(); const classes = useMemo( - // Ensures horizontal overflow is visually accessible - () => cx( css( { overflowX: 'auto' } ), className ), + () => + cx( + css( { + // Ensures horizontal overflow is visually accessible + overflowX: 'auto', + // In case the root has a height, it should not be exceeded + maxHeight: '100%', + } ), + className + ), [ className ] ); diff --git a/packages/components/src/navigator/stories/index.js b/packages/components/src/navigator/stories/index.js index 172c0f5f6f6b91..97e527216eef38 100644 --- a/packages/components/src/navigator/stories/index.js +++ b/packages/components/src/navigator/stories/index.js @@ -1,10 +1,16 @@ +/** + * External dependencies + */ +import { css } from '@emotion/react'; + /** * Internal dependencies */ import Button from '../../button'; -import { Card, CardBody, CardHeader } from '../../card'; +import { Card, CardBody, CardFooter, CardHeader } from '../../card'; import { HStack } from '../../h-stack'; import { Flyout } from '../../flyout'; +import { useCx } from '../../utils/hooks/use-cx'; import { NavigatorProvider, NavigatorScreen, useNavigator } from '../'; export default { @@ -16,6 +22,7 @@ function NavigatorButton( { path, isBack = false, ...props } ) { const navigator = useNavigator(); return ( } + trigger={ + + } placement="bottom-start" > Go @@ -55,30 +74,35 @@ const MyNavigation = () => {

This is the child screen.

- + Go back
+ - + Go back
¯\_(ツ)_/¯ @@ -86,6 +110,31 @@ const MyNavigation = () => { + + + + + + Go back + + + + +

A wild sticky element appears

+
+ +
+ + +

Another wild sticky element appears

+
+ +
+ + + +
+
); }; @@ -93,3 +142,47 @@ const MyNavigation = () => { export const _default = () => { return ; }; + +function Sticky( { + as: Tag = 'div', + bottom = 0, + colors = 'whitesmoke/lightgrey', + top = 0, + z: zIndex = 1, + ...props +} ) { + const cx = useCx(); + const [ bgColor, dotColor ] = colors.split( '/' ); + const className = cx( + css( { + top, + bottom, + zIndex, + display: 'flex', + position: 'sticky', + background: `radial-gradient(${ dotColor } 1px, ${ bgColor } 2px) 50%/1em 1em`, + } ), + props.className + ); + const propsOut = { ...props, className }; + return ; +} + +function MetaphorIpsum( { quantity } ) { + const cx = useCx(); + const list = [ + 'A loopy clarinet’s year comes with it the thought that the fenny step-son is an ophthalmologist. The literature would have us believe that a glabrate country is not but a rhythm. A beech is a rub from the right perspective. In ancient times few can name an unglossed walrus that isn’t an unspilt trial.', + 'Authors often misinterpret the afterthought as a roseless mother-in-law, when in actuality it feels more like an uncapped thunderstorm. In recent years, some posit the tarry bottle to be less than acerb. They were lost without the unkissed timbale that composed their customer. A donna is a springtime breath.', + 'It’s an undeniable fact, really; their museum was, in this moment, a snotty beef. The swordfishes could be said to resemble prowessed lasagnas. However, the rainier authority comes from a cureless soup. Unfortunately, that is wrong; on the contrary, the cover is a powder.', + ]; + quantity = Math.min( list.length, quantity ); + return ( + <> + { list.slice( 0, quantity ).map( ( text, key ) => ( +

+ { text } +

+ ) ) } + + ); +}