Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

website: Update Surface documentation #1219

Merged
merged 2 commits into from
Apr 20, 2023
Merged

website: Update Surface documentation #1219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
34011c5
initial commit
adamhock Apr 20, 2023
454603a
removed truncation for elevation example
adamhock Apr 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions apps/website/src/examples/Surface.elevation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
/*---------------------------------------------------------------------------------------------

* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from 'react';
import { Surface, Flex } from '@itwin/itwinui-react';

export default () => {
const cardStyle = {
display: 'flex',
width: '100px',
padding: '12px',
justifyContent: 'center',
textAlign: 'center',
flex: '1',
};
return (
<>
<Flex gap={'2xl'}>
<Surface elevation={0} style={cardStyle}>
<p>Elevation 0 (0dp)</p>
</Surface>
<Surface elevation={1} style={cardStyle}>
<p>Elevation 1 (2dp)</p>
</Surface>
<Surface elevation={2} style={cardStyle}>
<p>Elevation 2 (4dp)</p>
</Surface>
</Flex>
<Flex gap={'2xl'}>
<Surface elevation={3} style={cardStyle}>
<p>Elevation 3 (8dp)</p>
</Surface>
<Surface elevation={4} style={cardStyle}>
<p>Elevation 4 (16dp)</p>
</Surface>
<Surface elevation={5} style={cardStyle}>
<p>Elevation 5 (24dp)</p>
</Surface>
</Flex>
</>
);
};
0 apps/website/src/examples/Surface.custom.tsx → ...ite/src/examples/Surface.headerfooter.tsx
View file
Open in desktop
File renamed without changes.
14 changes: 12 additions & 2 deletions apps/website/src/examples/Surface.main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,18 @@ import { Surface } from '@itwin/itwinui-react';

export default () => {
return (
<Surface elevation={4} style={{ height: 200, padding: 12 }}>
<p>Change the elevation prop to adjust the shadow level.</p>
<Surface
elevation={4}
style={{
height: 200,
padding: 12,
width: 200,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<p>This is a surface</p>
</Surface>
);
};
61 changes: 61 additions & 0 deletions apps/website/src/examples/Surface.nopadding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from 'react';
import { Surface, Text, Flex, Anchor, Divider } from '@itwin/itwinui-react';

export default () => {
const listStyle = {
padding: 'var(--iui-size-s)',
position: 'relative',
} as React.CSSProperties;
const cardStyle = {
maxHeight: '300px',
};
return (
<Surface elevation={3} style={cardStyle}>
<Surface.Header>
<Text variant='subheading' as='h2'>
Surface with overflow & no body padding
</Text>
</Surface.Header>
<Surface.Body isPadded={false}>
<Flex flexDirection='column' style={{ flex: '1' }}>
<ul
style={{
width: '100%',
listStyle: 'none',
margin: '0',
padding: '0',
}}
>
<li style={listStyle}>
<Anchor>Daily log</Anchor>
</li>
<Divider />
<li style={listStyle}>
<Anchor>Inspections</Anchor>
</li>
<Divider />
<li style={listStyle}>
<Anchor>Issues</Anchor>
</li>
<Divider />
<li style={listStyle}>
<Anchor>Observations</Anchor>
</li>
<Divider />
<li style={listStyle}>
<Anchor>RFIs</Anchor>
</li>
<Divider />
<li style={listStyle}>
<Anchor>Weather delay notices</Anchor>
</li>
</ul>
</Flex>
</Surface.Body>
</Surface>
);
};
4 changes: 3 additions & 1 deletion apps/website/src/examples/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,9 @@ export { default as StepperLocalizationExample } from './Stepper.localization';
export { default as StepperLayoutExample } from './Stepper.layout';

export { default as SurfaceMainExample } from './Surface.main';
export { default as SurfaceCustomExample } from './Surface.custom';
export { default as SurfaceElevationExample } from './Surface.elevation';
export { default as SurfaceHeaderFooterExample } from './Surface.headerfooter';
export { default as SurfaceNoPaddingExample } from './Surface.nopadding';

export { default as TableMainExample } from './Table.main';

Expand Down
29 changes: 23 additions & 6 deletions apps/website/src/pages/docs/surface.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,40 @@ group: core

import PropsTable from '~/components/PropsTable.astro';
import LiveExample from '~/components/LiveExample.astro';
import Placeholder from '~/components/Placeholder.astro';
import * as AllExamples from '~/examples';

<p>{frontmatter.description}</p>

<Placeholder componentPageName='core-surface' />

<LiveExample src='Surface.main.tsx' truncate={false}>
<AllExamples.SurfaceMainExample client:load />
</LiveExample>

## Custom
## Variants

### Elevation

Elevation is measured as the distance between surfaces.

<LiveExample src='Surface.elevation.tsx'>
<AllExamples.SurfaceElevationExample client:load />
</LiveExample>

The distance from the front of one surface to the front of another is measured along the z-axis in density-independent pixels (`dp`) and depicted using drop shadows.

We support from `0dp` up to `24dp` in elevation with the shadows copying real life, getting larger and more blurred the further they go away from the surface. `0dp` represents the absence of drop shadow. Next are `2dp` and `4dp`, then scaling directly up to `8dp`, `16dp`, to finally reach the maximal elevation of `24dp`.

### Header & Body

The surface component also has customizable subcomponents for header and body

<LiveExample src='Surface.custom.tsx'>
<AllExamples.SurfaceCustomExample client:load />
<LiveExample src='Surface.headerfooter.tsx'>
<AllExamples.SurfaceHeaderFooterExample client:load />
</LiveExample>

By default, the surface's body component includes padding. This can be disabled using the `isPadded` prop

<LiveExample src='Surface.nopadding.tsx'>
<AllExamples.SurfaceNoPaddingExample client:load />
</LiveExample>

## Props
Expand Down