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

fix(aside): add spread prop, update docs with accessibility labe… #567

Merged
merged 10 commits into from
Dec 9, 2019
18 changes: 13 additions & 5 deletions packages/example/src/pages/components/Aside.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,12 @@ It should only be used within a `<Column>` component with specific parameters. `

</PageDescription>

<InlineNotification kind="warning">

**Warning:** If you use more than one `<Aside>` component on a single page, you need to provide an accessibility label so that someone using assistive technology can quickly understand the purpose of the landmark. See [Mozilla Developer Network's documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Complementary_role#Labeling_landmarks) for more information. Props for accessibility labels are described in the [Props section](#props) below.

</InlineNotification>

## Example

<Row>
Expand All @@ -26,7 +32,7 @@ Aesthetic is defined as the philosophical theory or set of principles governing

</Column>
<Column colMd={2} colLg={3} offsetMd={1} offsetLg={1}>
<Aside>
<Aside aria-label="Example aside">

**Good design is always good design.**

Expand All @@ -51,7 +57,9 @@ What we borrow from our own design history is not a mid-century aesthetic in sty

### Props

| property | propType | required | default | description |
| --------- | -------- | -------- | ------- | --------------------- |
| children | node | | | |
| className | string | | | Add custom class name |
| property | propType | required | default | description |
| --------------- | -------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------- |
| aria-label | string | | | Specify an `aria-label` value to provide a label to the inner aside element. |
| aria-labelledBy | string | | | Specify an `aria-labelledby` value that references the id of an existing element to serve as a label for the inner aside element. |
| children | node | | | |
| className | string | | | Add custom class name |
8 changes: 6 additions & 2 deletions packages/gatsby-theme-carbon/src/components/Aside/Aside.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,16 @@ export default class Aside extends React.Component {
};

render() {
const { children, className } = this.props;
const { children, className, ...rest } = this.props;

const captionClasses = classnames(aside, {
[className]: className,
});

return <aside className={captionClasses}>{children}</aside>;
return (
<aside className={captionClasses} {...rest}>
{children}
</aside>
);
}
}
5 changes: 5 additions & 0 deletions packages/gatsby-theme-carbon/src/styles/internal/_page.scss
Original file line number Diff line number Diff line change
Expand Up @@ -161,3 +161,8 @@ img {
max-width: 100%;
flex: auto;
}

// TODO: remove when fix is released. See https://github.com/carbon-design-system/carbon/issues/4804
.bx--inline-notification--low-contrast:before {
pointer-events: none !important;
}