GitHub icon

Scroll Indicator

Scroll indicator, the shadow, provides an extra visual cue that content exists below or above the fold.

const loremIpsum =
	'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

render (
	<Stack>
		<Scroll height="100px" className="m-r-3" scrollIndicator>
			<BodyText>With scroll indicator. {loremIpsum}</BodyText>
		</Scroll>
		<Scroll height="100px" className="m-r-3">
			<BodyText>{loremIpsum}</BodyText>
		</Scroll>
	</Stack>
)

Size

Maximum width and height may be set explicitly via props, as in example above. Size also may be controlled by external container.

const loremIpsum =
	'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

render (
	<Card padding="none" light className="of-hidden">
		<Card.Section style={{ height: '100px' }}>
			<Scroll scrollIndicator>
				<div className="m-x-2 m-y-2">
					<BodyText>
						Height is controlled by container.
					</BodyText>
					<BodyText className="m-t-1">{loremIpsum}</BodyText>
					<BodyText className="m-t-1">{loremIpsum}</BodyText>
				</div>
			</Scroll>
		</Card.Section>
	</Card>
);

Horizontal

If content goes further rigth side of the Scroll, it may reflect such behavior.

<State initial={{}}>
	{([state, setState]) => {
		const names =
			['Ben Ho', 'Matt Felton', 'James Coyle', 'Sergey Ya', 'Ara Mah', 'Doctor Rex', 'Alex Star', 'Trent Walton', 'Crazy Horse', 'Greg High', 'John Puy', 'Elen Lupton', 'Karl Wisley', 'Pol Obrian',];

		return (
			<Card light className="of-hidden">
				<Card.Section className="h3">Participants</Card.Section>
				<Card.Section className="p-0">
					<Scroll horizontal="scroll" scrollIndicator>
						<div className="m-x-2 m-y-2 d-f">
							{names.map((name, nameIndex) => (
								<div className="m-r-2" key={`name${nameIndex}`}>
									<Avatar
										autoColor
										name={name}
										size="l"
									/>
								</div>
							))}
						</div>
					</Scroll>
				</Card.Section>
			</Card>
		);
	}}
</State>

Hidden Scrollbar

User is capable to scroll content even without visible scrollbar.

<State initial={{}}>
	{([state, setState]) => {
		const loremIpsum =
			'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

		return (
			<div className="m-t-8">
				<Popover
					direction="tr"
					open
					trigger={<Button>Popover</Button>}
					padding={null}
				>
					<Scroll height="118px" scrollbar="hidden" scrollIndicator>
						<div className="p-x-3 p-y-2">
							<BodyText>{loremIpsum}</BodyText>
						</div>
					</Scroll>
				</Popover>
			</div>
		);
	}}
</State>

Use Cases

Scroll component intended to be used in:

overlay components, like Modal, Drawer, Popover, Toast, Takeover, ActionMenu, etc., where scrollable behavior might be unexpected
fixed-size components, like Card, Tab, Sidebar, where extra visual hint come in handy
Select component in case of too long list of options, which makes scrollbar unusable

Examples

<State initial={{}}>
	{([state, setState]) => {
		const loremIpsum =
			'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

		return (
			<Modal
				title="Modal Title"
				closable
				open
				onClose={() => {}}
				footer={
					<ButtonGroup>
						<Button>Cancel</Button>
						<Button primary>Save</Button>
					</ButtonGroup>
				}
				portal={false}
				size={Modal.Sizes.S}
			>
				<div
					style={{
						margin: `-${tokens.spacing3} -${tokens.spacing4}`,
						height: `calc(100% + ${tokens.spacing5})`,
					}}
				>
					<Scroll scrollIndicator>
						<div className="p-3">
							<BodyText>{loremIpsum}</BodyText>
							<BodyText className="m-t-2">{loremIpsum}</BodyText>
						</div>
					</Scroll>
				</div>
			</Modal>
		);
	}}
</State>

<State initial={{}}>
	{([state, setState]) => {
		const loremIpsum =
			'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

		return (
			<Drawer
				open
				header="Drawer"
				onClose={() => {}}
				portal={false}
				footer={
					<ButtonGroup>
						<Button>Cancel</Button>
						<Button primary>Save</Button>
					</ButtonGroup>
				}
				>
				<div
					style={{
						margin: `-${tokens.spacing3}`,
						height: `calc(100% + ${tokens.spacing5})`,
					}}
				>
					<Scroll scrollIndicator>
						<div className="p-3">
							<BodyText>{loremIpsum}</BodyText>
							<BodyText className="m-t-2">{loremIpsum}</BodyText>
							<BodyText className="m-t-2">{loremIpsum}</BodyText>
							<BodyText className="m-t-2">{loremIpsum}</BodyText>
						</div>
					</Scroll>
				</div>
			</Drawer>
		);
	}}
</State>

<State initial={{}}>
	{([state, setState]) => {
		const loremIpsum =
			'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

		return (
			<Takeover
				backLabel="Previous Page"
				title="Takeover Title"
				footer={
					<ButtonGroup>
						<Button>Cancel</Button>
						<Button primary>Save</Button>
					</ButtonGroup>
				}
				footerAlign="right"
				onClose={() => {}}
				portal={false}
			>
				<Takeover.Section
					style={{ padding: '0px', height: '100%' }}
				>
					<Scroll scrollIndicator>
						<div className="p-3">
							<BodyText>{loremIpsum}</BodyText>
							<BodyText className="m-t-2">
								{loremIpsum}
							</BodyText>
							<BodyText className="m-t-2">
								{loremIpsum}
							</BodyText>
							<BodyText className="m-t-2">
								{loremIpsum}
							</BodyText>
						</div>
					</Scroll>
				</Takeover.Section>
			</Takeover>
		);
	}}
</State>

Collapsible

Importing

import { Scroll } from '@servicetitan/design-system';

Scroll