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

Jump to bottom

docs(grid): updated with API docs and example #3136

Merged
merged 5 commits into from
Sep 16, 2022
Merged

docs(grid): updated with API docs and example #3136

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
77ea8ac
docs(grid): updated with API docs and example
sstrubberg Sep 7, 2022
a85aeaf
docs(grid): better description
sstrubberg Sep 7, 2022
622d27d
docs(grid): progressive disclosure and helpers
sstrubberg Sep 9, 2022
e7cc987
Merge branch 'main' into docs-breakpoint-api
sstrubberg Sep 16, 2022
9cc7d80
Merge branch 'main' into docs-breakpoint-api
sstrubberg Sep 16, 2022
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
54 changes: 54 additions & 0 deletions src/pages/guidelines/2x-grid/implementation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ guide to start building.
<AnchorLink>Incorporating the shell</AnchorLink>
<AnchorLink>Alignments</AnchorLink>
<AnchorLink>Techniques</AnchorLink>
<AnchorLink>API & Helpers</AnchorLink>
<AnchorLink>Resources</AnchorLink>

</AnchorLinks>
Expand Down Expand Up @@ -1343,6 +1344,39 @@ Image size can change ratios when the breakpoint changes.
</DoDont>
</DoDontRow>

## API & Helpers

There are many ways to make the 2x Grid work for your application using our API.
The example below illustrates removing visibility of a given component based on
the maximum width of the `md` breakpoint.

```css
.component {
display: inline;

/* applies styles inside mixin on md breakpoint or below, like max-width */
@include carbon--breakpoint-down('md') {
display: none;
}
Comment on lines +1358 to +1360
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The adding of helper classes in carbon-design-system/carbon#11786 was intended to replace the need for this type of manual config. Should we just point them to those classes instead?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the grid mixins would still be needed for other use cases, no? Like if you wanted to change the layout or styles of something at mobile breakpoints (not necessarily just hide it). @tay1orjones but we should also add those classes and surface them here! I think surfacing all options is good.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great points all around. Let me do another rev where have both options listed, but do a little progressive disclosure to link out to our github docs so things don't get out of sync like Taylor mentions in his other comment.

}
```

In addition, you can also use Helpers to control what is being displayed on the
screen at a given breakpoint.

```css
@use '@carbon/styles/scss/utilities/helper-classes';

.my-class {
@include helper-classes.hide-at-sm();
}
```

Checkout the [resources](#resources) section for links to
[the helpers on storybook](https://react.carbondesignsystem.com/?path=/story/helpers-hideatbreakpoint--hide-at-breakpoint)
and the full
[API list on Github](https://github.com/carbon-design-system/carbon/blob/main/packages/grid/docs/sass.md#api).

## Resources

<Row className="resource-card-group">
Expand Down Expand Up @@ -1374,6 +1408,26 @@ Image size can change ratios when the breakpoint changes.

<MdxIcon name="bee" />

</ResourceCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
subTitle="Carbon grid docs API"
href="https://github.com/carbon-design-system/carbon/blob/main/packages/grid/docs/sass.md#api"
>

<MdxIcon name="github" />

</ResourceCard>
</Column>
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
subTitle="Hide at Breakpoint Helpers on Storybook"
href="https://react.carbondesignsystem.com/?path=/story/helpers-hideatbreakpoint--hide-at-breakpoint"
>

<MdxIcon name="storybook" />

</ResourceCard>
</Column>
</Row>