Skip to content

Commit

Permalink
Merge branch 'main' into modal-submit-fix
Browse files Browse the repository at this point in the history
  • Loading branch information
atikenny authored Jul 29, 2021
2 parents de49618 + 71bc970 commit 184a99f
Show file tree
Hide file tree
Showing 65 changed files with 982 additions and 131 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
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
2 changes: 1 addition & 1 deletion config/eslint-config-carbon/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
"eslint-plugin-cypress": "^2.11.3",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jest": "^24.3.6",
"eslint-plugin-jsdoc": "^35.3.0",
"eslint-plugin-jsdoc": "^36.0.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
Expand Down
135 changes: 135 additions & 0 deletions docs/migration/11.x-color.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
## Color tokens

<InlineNotification>

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

</InlineNotification>

**Status key:**

**New:** a net new color token to the system in v11. It has no v10 counterpart.

**Updated name:** the v10 name has been updated to in v11 to replace the number
ending with a usage adjective. It just a name change the role stays 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
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 @@ -968,7 +968,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
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
3 changes: 2 additions & 1 deletion packages/components/src/components/modal/_modal.scss
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@
.#{$prefix}--dropdown,
.#{$prefix}--dropdown-list,
.#{$prefix}--number input[type='number'],
.#{$prefix}--date-picker__input {
.#{$prefix}--date-picker__input,
.#{$prefix}--multi-select {
background-color: $field-02;
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -421,7 +421,9 @@
}

//No label positioning adjustment
.#{$prefix}--number--nolabel .bx--label + .bx--form__helper-text {
.#{$prefix}--number--nolabel
.#{$prefix}--label
+ .#{$prefix}--form__helper-text {
margin-top: 0;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -293,7 +293,9 @@
white-space: initial;
}

.#{$prefix}--progress--vertical .#{$prefix}--progress-step .bx--tooltip {
.#{$prefix}--progress--vertical
.#{$prefix}--progress-step
.#{$prefix}--tooltip {
margin-top: 0.5rem;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/select/_select.scss
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@
padding-right: $spacing-07;
padding-left: $carbon--spacing-03;
border-bottom: none;
background-color: $ui-background;
background-color: transparent;
color: $text-01;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/ui-shell/_side-nav.scss
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@
width: 0;
}

.#{$prefix}--side-nav.bx--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover,
.#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover,
.#{$prefix}--side-nav--expanded {
width: mini-units(32);
}
Expand Down
26 changes: 26 additions & 0 deletions packages/react/src/components/Modal/Modal-story.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import {
import Modal from '../Modal';
import Button from '../Button';
import Select from '../Select';
import MultiSelect from '../MultiSelect';
import Dropdown from '../Dropdown';
import SelectItem from '../SelectItem';
import TextInput from '../TextInput';
import mdx from './Modal.mdx';
Expand Down Expand Up @@ -161,6 +163,30 @@ export const Default = () => {
<SelectItem value="us-south" text="US South" />
<SelectItem value="us-east" text="US East" />
</Select>
<Dropdown
id="drop"
label="Dropdown"
titleText="Dropdown"
items={[
{ id: 'one', label: 'one', name: 'one' },
{ id: 'two', label: 'two', name: 'two' },
]}
/>
<MultiSelect
id="test"
label="Multiselect"
items={[
{
id: 'downshift-1-item-0',
text: 'Option 1',
},
{
id: 'downshift-1-item-1',
text: 'Option 2',
},
]}
itemToString={(item) => (item ? item.text : '')}
/>
</Modal>
);
};
Expand Down
6 changes: 3 additions & 3 deletions packages/react/src/components/Modal/Modal.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -214,17 +214,17 @@ With `<ComposedModal>`, you can control the buttons with the following code.
kind="secondary"
onClick={() => { (Run some action...) setOpen(false); }}>
Another button
</Buttton>
</Button>
<Button
kind="secondary"
onClick={() => { (Run some action...) setOpen(false); }}>
Secondary button
</Buttton>
</Button>
<Button
kind="primary"
onClick={() => { (Run some action...) setOpen(false); }}>
Priamry button
</Buttton>
</Button>
</ModalFooter>
</ComposedModal>
```
Expand Down
Loading

0 comments on commit 184a99f

Please sign in to comment.