Skip to content

Commit

Permalink
Merge branch 'main' into add-plex-dependecy
Browse files Browse the repository at this point in the history
  • Loading branch information
sstrubberg authored Jul 29, 2021
2 parents 36161a4 + cb71475 commit 5563200
Show file tree
Hide file tree
Showing 68 changed files with 17,646 additions and 10,739 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ jobs:
run: yarn build --ignore '@carbon/sketch'
- name: Check generated styles
run: |
yarn carbon-cli check --ignore '**/@(node_modules|examples|components|react|fixtures)/**' 'packages/**/*.scss'
yarn carbon-cli check --ignore '**/@(node_modules|examples|components|react|fixtures|compat)/**' 'packages/**/*.scss'
- name: Run tests
run: yarn test --ci

Expand Down
130 changes: 130 additions & 0 deletions docs/migration/11.x-color.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
# Color

> **Note:** The Carbon v11 release is currently in beta release. Be on the
> lookout for the public preview release available in the coming months.
## Color tokens

**Status key:**

- **New:** A net new color token to the system in v11. It has no v10
counterpart.
- **Updated name:** From v10 to V11 the number suffix has been replaced with an
adjective that reflects it's usage. This is just a name change, the role
remains the same between v10 and v11.
- **Split:** V10 token has been split into multiple v11 tokens for more specific
usage.
- **No change:** Token name has no change between versions.
- **Depreciated:** v10 token was removed in v11.

| **V10 token name** | **V11 token name** | **Status** |
| ------------------ | ------------------------- | ------------------- |
| visited-link | link-visited | Updated name |
| ui-background | background | Updated name |
| ui-05 | layer-selected-inverse | Updated name |
| ui-05 | border-inverse | Updated name |
| ui-04 | border-strong-01 | Split, Updated name |
| ui-04 | toggle-off | Split, Updated name |
| ui-03 | layer-accent-01 | Split, Updated name |
| ui-03 | border-subtle-01 | Split, Updated name |
| ui-02 | layer-02 | Updated name |
| ui-01 | layer-01 | Updated name |
| text-error | text-error | Updated name |
| text-05 | text-helper | Updated name |
| text-04 | text-on-color | Updated name |
| text-03 | text-placeholder | Updated name |
| text-02 | text-secondary | Updated name |
| text-01 | text-primary | Updated name |
| support-04 | support-info | Updated name |
| support-03 | support-warning | Updated name |
| support-02 | support-success | Updated name |
| support-01 | support-error | Updated name |
| skeleton-02 | skeleton-element | Updated name |
| skeleton-01 | skeleton-background | Updated name |
| selected-ui | background-selected | Split, Updated name |
| selected-ui | layer-selected-01 | Split, Updated name |
| selected-light-ui | layer-selected-02 | Updated name |
| overlay-01 | overlay | Updated name |
| link-02 | link-secondary | Updated name |
| link-01 | link-primary | Updated name |
| inverse-support-04 | support-info-inverse | Updated name |
| inverse-support-03 | support-warning-inverse | Updated name |
| inverse-support-02 | support-success-inverse | Updated name |
| inverse-support-01 | support-error-inverse | Updated name |
| inverse-link | link-inverse | Updated name |
| inverse-hover-ui | background-inverse-hover | Updated name |
| inverse-focus-ui | focus-inverse | Updated name |
| inverse-02 | background-inverse | Updated name |
| inverse-01 | text-inverse | Split, Updated name |
| inverse-01 | icon-inverse | Split, Updated name |
| inverse-01 | focus-inset | Split, Updated name |
| interactive-04 | interactive | Updated name |
| interactive-04 | border-interactive | Updated name |
| interactive-03 | button-tertiary | Updated name |
| interactive-02 | button-secondary | Updated name |
| interactive-01 | background-brand | Updated name |
| interactive-01 | button-primary | Updated name |
| icon-03 | icon-on-color | Updated name |
| icon-02 | icon-secondary | Updated name |
| icon-01 | icon-primary | Updated name |
| hover-ui | background-hover | Updated name |
| hover-ui | layer-hover-01 | Split, Updated name |
| hover-ui | field-hover-01 | Split, Updated name |
| hover-ui | field-hover-02 | Split, Updated name |
| hover-tertiary | button-tertiary-hover | Updated name |
| hover-selected-ui | background-selected-hover | Split, Updated name |
| hover-selected-ui | layer-selected-hover-01 | Split, Updated name |
| hover-selected-ui | layer-accent-hover-01 | Split, Updated name |
| hover-secondary | button-secondary-hover | Updated name |
| hover-primary-text | link-primary-hover | Updated name |
| hover-primary | button-primary-hover | Updated name |
| hover-light-ui | layer-hover-02 | Updated name |
| hover-danger | button-danger-hover | Updated name |
| highlight | highlight | No change |
| focus | focus | No change |
| field-02 | field-02 | No change |
| field-01 | field-01 | No change |
| disabled-03 | layer-selected-disabled | Split, Updated name |
| disabled-03 | text-on-color-disabled | Split, Updated name |
| disabled-03 | icon-on-color-disabled | Split, Updated name |
| disabled-02 | text-disabled | Split, Updated name |
| disabled-02 | icon-disabled | Split, Updated name |
| disabled-02 | button-disabled | Split, Updated name |
| disabled-01 | layer-disabled-01 | Split |
| disabled-01 | field-disabled-01 | Split |
| disabled-01 | border-disabled-01 | Split |
| disabled-01 | field-disabled-02 | Split |
| disabled-01 | border-disabled-03 | Split |
| decorative-01 | border-subtle-02 | Updated name |
| danger-02 | button-danger-secondary | Updated name |
| danger / danger-01 | button-danger-primary | Updated name |
| button-separator | button-separator | No change |
| active-ui | background-active | Split, Updated name |
| active-ui | layer-active-01 | Split, Updated name |
| active-ui | layer-accent-active-01 | Split, Updated name |
| active-ui | border-subtle-selected-01 | Split, Updated name |
| active-tertiary | button-tertiary-active | Updated name |
| active-secondary | button-secondary-active | Updated name |
| active-primary | button-primary-active | Updated name |
| active-light-ui | layer-active-02 | Updated name |
| active-danger | button-danger-active | Updated name |
| - | border-subtle-00 | New |
| - | layer-selected-hover-02 | New |
| - | layer-accent-02 | New |
| - | layer-accent-hover-02 | New |
| - | layer-accent-active-02 | New |
| - | border-strong-02 | New |
| - | border-subtle-selected-02 | New |
| - | layer-03 | New |
| - | layer-hover-03 | New |
| - | layer-active-03 | New |
| - | layer-selected-03 | New |
| - | layer-selected-hover-03 | New |
| - | layer-accent-03 | New |
| - | layer-accent-hover-03 | New |
| - | layer-accent-active-03 | New |
| - | field-03 | New |
| - | field-hover-03 | New |
| - | border-strong-03 | New |
| - | border-subtle-03 | New |
| - | border-subtle-selected-03 | New |
5 changes: 2 additions & 3 deletions packages/carbon-react/.storybook/Welcome/welcome.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// @import '~carbon-components/scss/globals/scss/typography';
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/theme';
@use '@carbon/styles/scss/type';

.container-welcome {
Expand All @@ -19,7 +18,7 @@
.welcome__heading {
@include type.type-style('productive-heading-07');

color: $text-inverse;
color: theme.$text-inverse;
}

.welcome__heading--subtitle {
Expand Down
12 changes: 6 additions & 6 deletions packages/carbon-react/src/components/Grid/Grid.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,10 @@ Carbon's grid components help developers use the
[2x Grid](https://www.carbondesignsystem.com/guidelines/2x-grid/overview). The
project provides `Grid` and `Column` components which can be used to build a
variety of layouts. You can import these components from
`carbon-components-react`:
`@carbon/react`:

```js
import { Grid, Column } from 'carbon-components-react';
import { Grid, Column } from '@carbon/react';
```

<Preview>
Expand All @@ -65,7 +65,7 @@ number `4` to specify that each `Column` component should span 4 columns at that
breakpoint.

```js
import { Grid, Column } from 'carbon-components-react';
import { Grid, Column } from '@carbon/react';

function MyComponent() {
return (
Expand All @@ -79,7 +79,7 @@ function MyComponent() {
}
```

_Note: by default, `carbon-components` ships with a 16 column grid._
_Note: by default, `@carbon/styles` ships with a 16 column grid._

You can pair up multiple breakpoint props to specify how many columns the
`Column` component should span at different break points. In the example below,
Expand Down Expand Up @@ -216,7 +216,7 @@ to a `section`. Simililarly, we use the `as` prop on `Column` to change it from
a `div` to an `article`.

```jsx
import { Grid, Column } from 'carbon-components-react';
import { Grid, Column } from '@carbon/react';

function MyComponent() {
return (
Expand All @@ -234,7 +234,7 @@ You can also provide a custom component to the `as` prop. This custom component
should accept all props passed to it, like a class name for the column.

```jsx
import { Grid, Column } from 'carbon-components-react';
import { Grid, Column } from '@carbon/react';

function Article({ children, ...rest }) {
return <article {...rest}>{children}</article>;
Expand Down
12 changes: 4 additions & 8 deletions packages/carbon-react/src/components/Grid/Grid.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,14 @@ export default {
),
],
parameters: {
controls: {
include: [], // ensure props are not displayed on the controls pane
hideNoControlsWarning: true,
},
docs: {
page: mdx,
},
},
argTypes: {
narrow: {
control: false,
},
condensed: {
control: false,
},
},
};

export const Wide = () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
/**
* Copyright IBM Corp. 2021
*
* 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, { useState, useEffect } from 'react';

import { unstable_ProgressBar as ProgressBar } from 'carbon-components-react';

export default {
title: 'Experimental/unstable_ProgressBar',

parameters: {
component: ProgressBar,
},
};

export const _ProgressBar = () => (
<ProgressBar
label="Progress bar label"
helperText="Optional helper text"
value={75}
/>
);

export const Indeterminate = () => (
<ProgressBar label="Progress bar label" helperText="Optional helper text" />
);

export const Example = () => {
const size = 728;
const [progress, setProgress] = useState(0);

useEffect(() => {
setTimeout(() => {
const interval = setInterval(() => {
setProgress((currentProgress) => {
const advancement = Math.random() * 8;
if (currentProgress + advancement < size) {
return currentProgress + advancement;
} else {
clearInterval(interval);
return size;
}
});
}, 50);
}, 3000);
}, []);

const running = progress > 0;

let helperText = running
? `${progress.toFixed(1)}MB of ${size}MB`
: 'Fetching assets...';
if (progress >= size) {
helperText = 'Done';
}

return (
<ProgressBar
value={running ? progress : null}
max={size}
label="Export data"
helperText={helperText}
/>
);
};
8 changes: 8 additions & 0 deletions packages/carbon-react/src/components/ProgressBar/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/**
* 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.
*/

export { ProgressBar } from 'carbon-components-react';
2 changes: 1 addition & 1 deletion packages/cli/src/commands/ci-check.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ async function check(args, env) {
stdio: 'inherit',
};
const tasks = [
`yarn carbon-cli check --ignore '**/@(node_modules|examples|components|react|fixtures)/**' 'packages/**/*.scss'`,
`yarn carbon-cli check --ignore '**/@(node_modules|examples|components|react|fixtures|compat)/**' 'packages/**/*.scss'`,
`cross-env BABEL_ENV=test yarn test --ci --maxWorkers 2 --reporters=default --reporters=jest-junit`,
`cross-env BABEL_ENV=test yarn test:e2e --ci --maxWorkers 2 --reporters=default --reporters=jest-junit`,
`cross-env PERCY_TOKEN=dd3392142006a6483c8f524697f39f052755fa9dc087ff4437cac3d64227abdd yarn run percy exec -- yarn workspace carbon-components-react test:e2e`,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -400,10 +400,6 @@
padding-top: $spacing-05;
}

.#{$prefix}--date-table tbody th.#{$prefix}--table-column-checkbox:hover {
background: $data-table-column-hover;
}

//----------------------------------------------------------------------------
// Radio
//----------------------------------------------------------------------------
Expand Down Expand Up @@ -968,7 +964,8 @@
// -------------------
// with boolean column
// -------------------
.#{$prefix}--data-table .bx--form-item.bx--checkbox-wrapper:last-of-type {
.#{$prefix}--data-table
.#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type {
margin: 0;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,6 @@
width: 100%;
min-height: 2rem;
align-items: center;

.#{$prefix}--loading__svg circle {
stroke-width: 12;
}

.#{$prefix}--loading__stroke {
stroke-dashoffset: $loading--small__gap;
}
}

.#{$prefix}--inline-loading__text {
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/list-box/_list-box.scss
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@ $list-box-menu-width: rem(300px);
max-width: rem(480px);
}

.#{$prefix}--dropdown--inline .bx--list-box__menu {
.#{$prefix}--dropdown--inline .#{$prefix}--list-box__menu {
min-width: rem(288px);
max-width: rem(480px);
}
Expand Down
10 changes: 10 additions & 0 deletions packages/components/src/components/loading/_functions.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
//
// 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.
//

@function loading-progress($circumference, $percentage) {
@return $circumference - $percentage / 100 * $circumference;
}
Loading

0 comments on commit 5563200

Please sign in to comment.