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.

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

feat!: adjust responsive and spacing tokens/config #1933

Merged
merged 2 commits into from
May 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
26 changes: 15 additions & 11 deletions .storybook/components/Docs/Guidelines/Layout.stories.mdx
Original file line number Diff line number Diff line change
@@ -1,29 +1,33 @@
import { Canvas, Meta } from '@storybook/blocks';
import {InlineNotificationV2 as InlineNotification} from "../../../../src";

<Meta title="Documentation/Defining Layout" />

# Layout

Please refer to our documentation [on ZeroHeight](https://eds.czi.design/styleguide/s/36770/p/17f0a9-layout/b/66febf)
for suggested alternatives and patterns.
Layout for pages is a combination of spacing units between components, and responsive changes based on the available viewport. EDS provides
configururation to use with tailwind, if desired. At the core, EDS also provides tokens to use, which align with spacing units defined in design.

For more information on what TailwindCSS supplies, check out the following links:
For more information on what Tailwind supplies, check out the following links:

* https://tailwindcss.com/docs/columns
* https://tailwindcss.com/docs/container
* https://tailwindcss.com/docs/display
* [Tailwind Columns](https://tailwindcss.com/docs/columns)
* [Tailwind Container](https://tailwindcss.com/docs/container)
* [Tailwind Display](https://tailwindcss.com/docs/display)

## Spacing and alignment

EDS components do not include margin properties as spacing between components should be handled primarily with
EDS components do not include external margin properties as spacing between components should be handled primarily with
utility classes or similar custom classes.

<InlineNotification title="TODO-AH: define and document internal/external spacing tokens"/>

However, it's important to be able to control spacing between components, so EDS works well with tailwind utility
classes like [margin](https://tailwindcss.com/docs/margin).

* [EDS Size Token Documentation](?path=/story/design-tokens-tier-1-definitions--sizes)

Below, we use one of the size units to demonstrate how to use EDS sizing utility classes (with tokens).

```jsx
<InlineNotification title="lorem ipsum dolor sit amet" className="mb-5" />
<InlineNotification title="lorem ipsum dolor sit amet" className="mx-size-5" />
```

Just like with [standard tailwind spacing values](https://tailwindcss.com/docs/customizing-spacing), the `size-X` will correspond to those used in design, AND
be available across all the documented spacing utilities. For now, we provide these along side the built-in utilities, for compatibility.
87 changes: 0 additions & 87 deletions src/components/Grid/Grid.stories.tsx

This file was deleted.

6 changes: 0 additions & 6 deletions src/components/Grid/Grid.test.ts

This file was deleted.

Loading
Loading