Merge branch 'master' into accordion-text-styles

packages/components/docs/sass.md

@@ -6602,7 +6602,6 @@ $icon-03: if(
 - **Type**: `{undefined}`
 - **Used by**:
  - [carbon--theme [mixin]](#carbon--theme-mixin)
- - [button [mixin]](#button-mixin)
  - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
  - [file-uploader [mixin]](#file-uploader-mixin)
  - [toggle [mixin]](#toggle-mixin)
@@ -12894,11 +12893,6 @@ Button styles
 
  .#{$prefix}--btn {
  @include button-base;
-
- &.#{$prefix}--btn--disabled > svg.#{$prefix}--btn__icon,
- &:disabled > svg.#{$prefix}--btn__icon {
- fill: $disabled-03;
- }
  }
 
  // Reset intrisic padding in Firefox (see #731)
@@ -12971,14 +12965,6 @@ Button styles
  background: transparent;
  color: $disabled;
  outline: none;
-
- > .#{$prefix}--btn__icon path {
- fill: $disabled;
- }
- }
-
- &:hover > .#{$prefix}--btn__icon path {
- fill: $inverse-01;
  }
  }
 
@@ -13014,10 +13000,6 @@ Button styles
  &:hover,
  &:active {
  color: $hover-primary-text;
-
- .#{$prefix}--btn__icon path {
- fill: $hover-primary-text;
- }
  }
 
  &:active {
@@ -13034,10 +13016,6 @@ Button styles
  background: transparent;
  border-color: transparent;
  outline: none;
-
- .#{$prefix}--btn__icon path {
- fill: $disabled;
- }
  }
 
  &.#{$prefix}--btn--sm {
@@ -13131,7 +13109,7 @@ Button styles
  $danger,
  $text-04,
  $hover-danger,
- $icon-03,
+ currentColor,
  $active-danger
  );
 
@@ -13187,7 +13165,6 @@ Button styles
  - [ui-02 [variable]](#ui-02-variable)
  - [danger [variable]](#danger-variable)
  - [hover-danger [variable]](#hover-danger-variable)
- - [icon-03 [variable]](#icon-03-variable)
  - [active-danger [variable]](#active-danger-variable)
 
 ### ❌button-base [mixin]

packages/components/src/components/button/_button.scss

@@ -36,11 +36,6 @@
 
  .#{$prefix}--btn {
  @include button-base;
-
- &.#{$prefix}--btn--disabled > svg.#{$prefix}--btn__icon,
- &:disabled > svg.#{$prefix}--btn__icon {
- fill: $disabled-03;
- }
  }
 
  // Reset intrisic padding in Firefox (see #731)
@@ -113,14 +108,6 @@
  background: transparent;
  color: $disabled;
  outline: none;
-
- > .#{$prefix}--btn__icon path {
- fill: $disabled;
- }
- }
-
- &:hover > .#{$prefix}--btn__icon path {
- fill: $inverse-01;
  }
  }
 
@@ -156,10 +143,6 @@
  &:hover,
  &:active {
  color: $hover-primary-text;
-
- .#{$prefix}--btn__icon path {
- fill: $hover-primary-text;
- }
  }
 
  &:active {
@@ -176,10 +159,6 @@
  background: transparent;
  border-color: transparent;
  outline: none;
-
- .#{$prefix}--btn__icon path {
- fill: $disabled;
- }
  }
 
  &.#{$prefix}--btn--sm {
@@ -273,7 +252,7 @@
  $danger,
  $text-04,
  $hover-danger,
- $icon-03,
+ currentColor,
  $active-danger
  );
 

packages/components/src/components/file-uploader/file-uploader.config.js

@@ -29,5 +29,22 @@ module.exports = {
  exampleUploadStates: true,
  },
  },
+ {
+ name: 'legacy',
+ label: 'Legacy file uploader',
+ context: {
+ id: 'legacy-file-uploader',
+ legacy: true,
+ },
+ },
+ {
+ name: 'legacy with example upload states',
+ label: 'Legacy file uploader with example upload states',
+ context: {
+ id: 'legacy-file-uploader-states',
+ legacy: true,
+ exampleUploadStates: true,
+ },
+ },
  ],
 };

packages/components/src/components/file-uploader/file-uploader.hbs

@@ -5,6 +5,7 @@
  LICENSE file in the root directory of this source tree.
 -->
 
+{{#unless legacy}}
 <div class="{{prefix}}--form-item">
  <strong class="{{prefix}}--file--label">Account
  photo</strong>
@@ -57,3 +58,53 @@
  </div>
  </div>
 </div>
+{{else}}
+<div class="{{prefix}}--form-item">
+ <strong class="{{prefix}}--file--label">Account
+ photo</strong>
+ <p class="{{prefix}}--label-description">Only .jpg and .png files. 500kb max file size.</p>
+ <div class="{{prefix}}--file" data-file data-file-demo-state-manager>
+ <label for="legacy-file-uploader" class="{{prefix}}--file-btn {{prefix}}--btn {{prefix}}--btn--primary"
+ role="button" tabindex="0">Add file</label>
+ <input type="file" class="{{prefix}}--file-input" id="legacy-file-uploader" data-file-uploader
+ data-target="[data-file-container]" multiple />
+ <div data-file-container data-file-drop-container class="{{prefix}}--file-container">
+ {{#if exampleUploadStates}}
+ <div class="{{prefix}}--file__selected-file">
+ <p class="{{prefix}}--file-filename">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero vero
+ sapiente illum reprehenderit molestiae perferendis voluptatem temporibus laudantium ducimus magni voluptatum
+ veniam, odit nesciunt corporis numquam maxime sunt excepturi sint!</p>
+ <span data-for="{{id}}" class="{{prefix}}--file__state-container">
+ {{ carbon-icon 'CheckmarkFilled16' class=(add prefix '--file-complete') }}
+ </span>
+ </div>
+ <div class="{{prefix}}--file__selected-file {{prefix}}--file__selected-file--invalid" data-invalid>
+ <p class="{{prefix}}--file-filename">color.jpeg</p>
+ <span data-for="{{id}}" class="{{prefix}}--file__state-container">
+ {{ carbon-icon 'WarningFilled16' class=(add prefix '--file--invalid')}}
+ {{ carbon-icon 'Close16' class=(add prefix '--file-close') aria-label="Remove uploaded file" tabindex="0" }}
+ </span>
+ <div class="{{prefix}}--form-requirement">
+ <div class="{{prefix}}--form-requirement__title">File size exceeds limit.</div>
+ <p class="{{prefix}}--form-requirement__supplement">500 kb max file size. Select a new file and try
+ again.</p>
+ </div>
+ </div>
+ <div class="{{prefix}}--file__selected-file">
+ <p class="{{prefix}}--file-filename">color.jpeg</p>
+ <span data-for="{{id}}" class="{{prefix}}--file__state-container">
+ <div class="{{prefix}}--inline-loading__animation">
+ <div data-inline-loading-spinner="" class="{{prefix}}--loading {{prefix}}--loading--small">
+ <svg class="{{prefix}}--loading__svg" viewBox="-75 -75 150 150">
+ <circle class="{{prefix}}--loading__background" cx="0" cy="0" r="26.8125"></circle>
+ <circle class="{{prefix}}--loading__stroke" cx="0" cy="0" r="26.8125"></circle>
+ </svg>
+ </div>
+ </div>
+ </span>
+ </div>
+ {{/if}}
+ </div>
+ </div>
+</div>
+{{/unless}}

packages/react/src/components/MultiSelect/MultiSelect-story.js

@@ -61,10 +61,6 @@ const props = () => ({
  id: text('MultiSelect ID (id)', 'carbon-multiselect-example'),
  titleText: text('Title (titleText)', 'Multiselect title'),
  helperText: text('Helper text (helperText)', 'This is not helper text'),
- filterable: boolean(
- 'Filterable (`<MultiSelect.Filterable>` instead of `<MultiSelect>`)',
- false
- ),
  disabled: boolean('Disabled (disabled)', false),
  light: boolean('Light variant (light)', false),
  useTitleInItem: boolean('Show tooltip on hover', false),
@@ -99,20 +95,16 @@ storiesOf('MultiSelect', module)
  'default',
  withReadme(readme, () => {
  const {
- filterable,
  listBoxMenuIconTranslationIds,
  selectionFeedback,
  ...multiSelectProps
  } = props();
- const ComponentToUse = !filterable ? MultiSelect : MultiSelect.Filterable;
- const placeholder = !filterable ? undefined : defaultPlaceholder;
  return (
  <div style={{ width: 300 }}>
- <ComponentToUse
+ <MultiSelect
  {...multiSelectProps}
  items={items}
  itemToString={item => (item ? item.text : '')}
- placeholder={placeholder}
  translateWithId={id => listBoxMenuIconTranslationIds[id]}
  selectionFeedback={selectionFeedback}
  />
@@ -131,22 +123,18 @@ storiesOf('MultiSelect', module)
  'with initial selected items',
  withReadme(readme, () => {
  const {
- filterable,
  listBoxMenuIconTranslationIds,
  selectionFeedback,
  ...multiSelectProps
  } = props();
- const ComponentToUse = !filterable ? MultiSelect : MultiSelect.Filterable;
- const placeholder = !filterable ? undefined : defaultPlaceholder;
 
  return (
  <div style={{ width: 300 }}>
- <ComponentToUse
+ <MultiSelect
  {...multiSelectProps}
  items={items}
  itemToString={item => (item ? item.text : '')}
  initialSelectedItems={[items[0], items[1]]}
- placeholder={placeholder}
  translateWithId={id => listBoxMenuIconTranslationIds[id]}
  selectionFeedback={selectionFeedback}
  />
@@ -160,4 +148,34 @@ storiesOf('MultiSelect', module)
  `,
  },
  }
+ )
+ .add(
+ 'filterable',
+ withReadme(readme, () => {
+ const {
+ listBoxMenuIconTranslationIds,
+ selectionFeedback,
+ ...multiSelectProps
+ } = props();
+
+ return (
+ <div style={{ width: 300 }}>
+ <MultiSelect.Filterable
+ {...multiSelectProps}
+ items={items}
+ itemToString={item => (item ? item.text : '')}
+ placeholder={defaultPlaceholder}
+ translateWithId={id => listBoxMenuIconTranslationIds[id]}
+ selectionFeedback={selectionFeedback}
+ />
+ </div>
+ );
+ }),
+ {
+ info: {
+ text: `
+ When a list contains more than 25 items, use \`MultiSelect.Filterable\` to help find options from the list.
+ `,
+ },
+ }
  );

packages/react/src/components/Tooltip/Tooltip-story.js

@@ -92,8 +92,8 @@ storiesOf('Tooltip', module)
  'default (bottom)',
  () => (
  <div style={{ marginTop: '2rem' }}>
- <Tooltip {...props.withIcon()}>
- <p>
+ <Tooltip {...props.withIcon()} tooltipBodyId="tooltip-body">
+ <p id="tooltip-body">
  This is some tooltip text. This box shows the maximum amount of text
  that should appear inside. If more room is needed please use a modal
  instead.

packages/react/src/components/Tooltip/Tooltip.js

@@ -97,6 +97,11 @@ class Tooltip extends Component {
  */
  tooltipId: PropTypes.string,
 
+ /**
+ * The ID of the tooltip body content.
+ */
+ tooltipBodyId: PropTypes.string,
+
  /**
  * Optional starting value for uncontrolled state
  */
@@ -369,6 +374,7 @@ class Tooltip extends Component {
  `__carbon-tooltip_${Math.random()
  .toString(36)
  .substr(2)}`),
+ tooltipBodyId,
  children,
  className,
  triggerClassName,
@@ -412,6 +418,7 @@ class Tooltip extends Component {
  onMouseOut: this.handleMouse,
  onFocus: this.handleMouse,
  onBlur: this.handleMouse,
+ 'aria-controls': !open ? undefined : tooltipId,
  'aria-haspopup': 'true',
  'aria-expanded': open,
  'aria-describedby': open ? tooltipId : null,
@@ -469,7 +476,14 @@ class Tooltip extends Component {
  onContextMenu={this.handleMouse}
  role="tooltip">
  <span className={`${prefix}--tooltip__caret`} />
- {children}
+ <div
+ className={`${prefix}--tooltip__content`}
+ tabindex="-1"
+ role="dialog"
+ aria-describedby={tooltipBodyId}
+ aria-labelledby={triggerId}>
+ {children}
+ </div>
  </div>
  </FloatingMenu>
  )}