From 065d47113e4cb660d7cb24334b3d33bc529b2f72 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 20 Jul 2021 17:14:39 -0500 Subject: [PATCH 1/4] feat(styles): add layer sets --- packages/styles/scss/_theme.scss | 95 ++++++++++++++++++++++++++++---- 1 file changed, 84 insertions(+), 11 deletions(-) diff --git a/packages/styles/scss/_theme.scss b/packages/styles/scss/_theme.scss index 7c6bb58a8a30..83537cd12da8 100644 --- a/packages/styles/scss/_theme.scss +++ b/packages/styles/scss/_theme.scss @@ -12,20 +12,93 @@ @use '@carbon/themes/scss/modules/tokens'; @forward '@carbon/themes/scss/modules/theme'; @forward '@carbon/themes/scss/modules/tokens'; +@use './utilities/custom-property'; +@use './utilities/layer-set' with ( + $layer-sets: ( + layer: ( + tokens.$layer-01, + tokens.$layer-02, + tokens.$layer-03, + ), + layer-active: ( + tokens.$layer-active-01, + tokens.$layer-active-02, + tokens.$layer-active-03, + ), + layer-hover: ( + tokens.$layer-hover-01, + tokens.$layer-hover-02, + tokens.$layer-hover-03, + ), + layer-selected: ( + tokens.$layer-selected-01, + tokens.$layer-selected-02, + tokens.$layer-selected-03, + ), + layer-selected-hover: ( + tokens.$layer-selected-hover-01, + tokens.$layer-selected-hover-02, + tokens.$layer-selected-hover-03, + ), + layer-accent: ( + tokens.$layer-accent-01, + tokens.$layer-accent-02, + tokens.$layer-accent-03, + ), + layer-accent-hover: ( + tokens.$layer-accent-hover-01, + tokens.$layer-accent-hover-02, + tokens.$layer-accent-hover-03, + ), + layer-accent-active: ( + tokens.$layer-accent-active-01, + tokens.$layer-accent-active-02, + tokens.$layer-accent-active-03, + ), + field: ( + tokens.$field-01, + tokens.$field-02, + tokens.$field-03, + ), + field-hover: ( + tokens.$field-hover-01, + tokens.$field-hover-02, + tokens.$field-hover-03, + ), + border-subtle: ( + tokens.$border-subtle-01, + tokens.$border-subtle-02, + tokens.$border-subtle-03, + ), + border-subtle-selected: ( + tokens.$border-subtle-selected-01, + tokens.$border-subtle-selected-02, + tokens.$border-subtle-selected-03, + ), + border-strong: ( + tokens.$border-strong-01, + tokens.$border-strong-02, + tokens.$border-strong-03, + ), + ), +); -// TODO: add contextual tokens -$border-subtle: tokens.$border-subtle-01; -$border-strong: tokens.$border-strong-01; +// Layer sets +$layer: custom-property.get-var('layer'); +$layer-active: custom-property.get-var('layer-active'); +$layer-hover: custom-property.get-var('layer-hover'); +$layer-selected: custom-property.get-var('layer-selected'); +$layer-selected-hover: custom-property.get-var('layer-selected-hover'); +$layer-accent: custom-property.get-var('layer-accent'); +$layer-accent-hover: custom-property.get-var('layer-accent-hover'); +$layer-accent-active: custom-property.get-var('layer-accent-active'); -$layer: tokens.$layer-01; -$layer-active: tokens.$layer-active-01; -$layer-hover: tokens.$layer-hover-01; -$layer-accent: tokens.$layer-accent-01; -$layer-selected: tokens.$layer-selected-01; -$layer-selected-hover: tokens.$layer-selected-hover-01; +$field: custom-property.get-var('field'); +$field-hover: custom-property.get-var('field-hover'); -$field: tokens.$field-01; -$field-hover: tokens.$field-hover-01; +$border-subtle: custom-property.get-var('border-subtle'); +$border-subtle-selected: custom-property.get-var('border-subtle-selected'); +$border-strong: custom-property.get-var('border-strong'); // TODO remove $interactive-01: #0f62fe; From 6ff340cc70d6c965248095562302a145964929d0 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 20 Jul 2021 17:15:45 -0500 Subject: [PATCH 2/4] docs(carbon-react): update data attributes to same level as :root --- packages/carbon-react/.storybook/preview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/carbon-react/.storybook/preview.js b/packages/carbon-react/.storybook/preview.js index a3975650671c..6cd8052c77ac 100644 --- a/packages/carbon-react/.storybook/preview.js +++ b/packages/carbon-react/.storybook/preview.js @@ -136,7 +136,7 @@ export const decorators = [ const { locale, theme } = context.globals; React.useEffect(() => { - document.body.setAttribute('data-carbon-theme', theme); + document.documentElement.setAttribute('data-carbon-theme', theme); }, [theme]); React.useEffect(() => { From 605ab9a3068cafadc1939a619644fff8180108c3 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 20 Jul 2021 17:17:49 -0500 Subject: [PATCH 3/4] feat(carbon-react): add Layer component --- .../src/components/Layer/Layer-story.scss | 14 ++++ .../src/components/Layer/Layer-test.js | 41 ++++++++++++ .../src/components/Layer/Layer.mdx | 66 +++++++++++++++++++ .../src/components/Layer/Layer.stories.js | 59 +++++++++++++++++ .../src/components/Layer/index.js | 47 +++++++++++++ 5 files changed, 227 insertions(+) create mode 100644 packages/carbon-react/src/components/Layer/Layer-story.scss create mode 100644 packages/carbon-react/src/components/Layer/Layer-test.js create mode 100644 packages/carbon-react/src/components/Layer/Layer.mdx create mode 100644 packages/carbon-react/src/components/Layer/Layer.stories.js create mode 100644 packages/carbon-react/src/components/Layer/index.js diff --git a/packages/carbon-react/src/components/Layer/Layer-story.scss b/packages/carbon-react/src/components/Layer/Layer-story.scss new file mode 100644 index 000000000000..c6660db92484 --- /dev/null +++ b/packages/carbon-react/src/components/Layer/Layer-story.scss @@ -0,0 +1,14 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '@carbon/styles/scss/theme'; + +.example-layer-test-component { + padding: 1rem; + background: theme.$layer; + color: theme.$text-primary; +} diff --git a/packages/carbon-react/src/components/Layer/Layer-test.js b/packages/carbon-react/src/components/Layer/Layer-test.js new file mode 100644 index 000000000000..fa3b5553184d --- /dev/null +++ b/packages/carbon-react/src/components/Layer/Layer-test.js @@ -0,0 +1,41 @@ +/** + * Copyright IBM Corp. 2016, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { screen, render } from '@testing-library/react'; +import React from 'react'; +import { Layer } from '../Layer'; + +describe('Layer', () => { + it('should render the children passed in as a prop', () => { + render( + + test + + ); + + expect(screen.getByTestId('test')).toBeInTheDocument(); + }); + + it('should spread any additional props onto the top-level element', () => { + render( + + test + + ); + + expect(screen.getByTestId('test')).toBeInTheDocument(); + }); + + it('should accept a custom class name', () => { + render( + + test + + ); + expect(screen.getByTestId('test')).toHaveClass('custom-class'); + }); +}); diff --git a/packages/carbon-react/src/components/Layer/Layer.mdx b/packages/carbon-react/src/components/Layer/Layer.mdx new file mode 100644 index 000000000000..dd20420ba5c4 --- /dev/null +++ b/packages/carbon-react/src/components/Layer/Layer.mdx @@ -0,0 +1,66 @@ +import { Story, Props, Source, Preview } from '@storybook/addon-docs/blocks'; + +# Layer + +[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/carbon-react/src/components/Layer) + + + + +## Table of Contents + +- [Overview](#overview) +- [Component API](#component-api) + - [Layer as](#layer-as) +- [Feedback](#feedback) + + + + +## Overview + +The `Layer` component is used to render components on different layers. Each +layer has a specific set of token values associated with it. You can use these +tokens directly, or use contextual tokens from our styles package like `$layer` +or `$field`. + +The `Layer` component accepts `children` as a prop. Each child of a `Layer` +component is rendered using the layer tokens at that layer. `Layer` components +can be nested indefinitely, but the token sets typically end after 3 layers. + +```jsx + + + + + + + + + +``` + +## Component API + + + +### Layer as + +You can configure the base element rendered by `Layer` using the `as` prop. For +example, if you would like the `Layer` component to render as a `section` you +could write the following: + +```jsx + + + +``` + +Similarly, you can provide any custom component to the `as` prop which the +`Layer` component will use. + +## Feedback + +Help us improve this component by providing feedback, asking questions on Slack, +or updating this file on +[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/carbon-react/src/components/Layer/Layer.mdx). diff --git a/packages/carbon-react/src/components/Layer/Layer.stories.js b/packages/carbon-react/src/components/Layer/Layer.stories.js new file mode 100644 index 000000000000..ce1525efeec5 --- /dev/null +++ b/packages/carbon-react/src/components/Layer/Layer.stories.js @@ -0,0 +1,59 @@ +/** + * Copyright IBM Corp. 2016, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import './Layer-story.scss'; +import React from 'react'; +import { Layer } from '../Layer'; +import mdx from './Layer.mdx'; + +export default { + title: 'Components/Layer', + component: Layer, + parameters: { + controls: { + hideNoControlsWarning: true, + }, + docs: { + page: mdx, + }, + }, + argTypes: { + as: { + table: { + disable: true, + }, + }, + children: { + table: { + disable: true, + }, + }, + className: { + table: { + disable: true, + }, + }, + }, +}; + +export const Default = () => { + function TestComponent() { + return
Test component
; + } + + return ( + <> + + + + + + + + + ); +}; diff --git a/packages/carbon-react/src/components/Layer/index.js b/packages/carbon-react/src/components/Layer/index.js new file mode 100644 index 000000000000..688fa0990e20 --- /dev/null +++ b/packages/carbon-react/src/components/Layer/index.js @@ -0,0 +1,47 @@ +/** + * Copyright IBM Corp. 2016, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import cx from 'classnames'; + +export function Layer({ + as: BaseComponent = 'div', + className: customClassName, + children, + ...rest +}) { + const className = cx('bx--layer', customClassName); + return ( + + {children} + + ); +} + +Layer.propTypes = { + /** + * Specify a custom component or element to be rendered as the top-level + * element in the component + */ + as: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.string, + PropTypes.elementType, + ]), + + /** + * Provide child elements to be rendered inside of `Theme` + */ + children: PropTypes.node, + + /** + * Provide a custom class name to be used on the outermost element rendered by + * the component + */ + className: PropTypes.string, +}; From 9d154c851655a4442a0e2aab98a257a7e035e411 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 21 Jul 2021 09:21:10 -0500 Subject: [PATCH 4/4] test: update styles test --- config/jest-config-carbon/index.js | 1 + packages/styles/scss/__tests__/theme-test.js | 9 ++++++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/config/jest-config-carbon/index.js b/config/jest-config-carbon/index.js index 903e5dbb9df2..afb95348e0fe 100644 --- a/config/jest-config-carbon/index.js +++ b/config/jest-config-carbon/index.js @@ -37,6 +37,7 @@ module.exports = { 'e2e', 'examples', '/umd/', + '/vendor/', ], transformIgnorePatterns: [ '/build/', diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js index f78af5dd4fca..04ff17dfef6d 100644 --- a/packages/styles/scss/__tests__/theme-test.js +++ b/packages/styles/scss/__tests__/theme-test.js @@ -132,16 +132,19 @@ Array [ "focus-inverse", "skeleton-background", "skeleton-element", - "border-subtle", - "border-strong", "layer", "layer-active", "layer-hover", - "layer-accent", "layer-selected", "layer-selected-hover", + "layer-accent", + "layer-accent-hover", + "layer-accent-active", "field", "field-hover", + "border-subtle", + "border-subtle-selected", + "border-strong", "interactive-01", "interactive-04", "decorative-01",