Merge branch 'main' into progress-tracker-motion

carbon-design-system · Oct 19, 2021 · 604b088 · 604b088
2 parents 8232648 + 7273119
commit 604b088
Show file tree

Hide file tree

Showing 23 changed files with 1,362 additions and 44 deletions.
diff --git a/packages/carbon-react/src/components/Tabs/Tabs.stories.js b/packages/carbon-react/src/components/Tabs/Tabs.stories.js
@@ -7,10 +7,18 @@
 
 import React from 'react';
 import { Button, Tab, Tabs, TabsSkeleton } from '../Tabs';
+import { unstable_FeatureFlags as FeatureFlags } from 'carbon-components-react';
 import { Layer } from '../Layer';
 
 export default {
   title: 'Components/Tabs',
+  decorators: [
+    (Story) => (
+      <FeatureFlags flags={{ 'enable-v11-release': true }}>
+        <Story />
+      </FeatureFlags>
+    ),
+  ],
   parameters: {
     component: Tabs,
     subcomponents: {

diff --git a/packages/components/src/components/file-uploader/_file-uploader.scss b/packages/components/src/components/file-uploader/_file-uploader.scss
@@ -57,7 +57,10 @@
     display: inline-block;
     width: 100%;
     max-width: rem(320px);
-    margin-bottom: $carbon--spacing-03;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-bottom: $carbon--spacing-03;
+    }
+
     color: $link-01;
     cursor: pointer;
     outline: 2px solid transparent;

diff --git a/packages/components/src/components/form/_form.scss b/packages/components/src/components/form/_form.scss
@@ -18,11 +18,15 @@
   .#{$prefix}--fieldset {
     @include reset;
 
-    margin-bottom: $carbon--spacing-07;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-bottom: $carbon--spacing-07;
+    }
   }
 
-  .#{$prefix}--fieldset--no-margin {
-    margin-bottom: 0;
+  @if not feature-flag-enabled('enable-v11-release') {
+    .#{$prefix}--fieldset--no-margin {
+      margin-bottom: 0;
+    }
   }
 
   .#{$prefix}--form-item {
@@ -42,7 +46,10 @@
     @include type-style('label-01');
 
     display: inline-block;
-    margin-bottom: $carbon--spacing-03;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-bottom: $carbon--spacing-03;
+    }
+
     color: $text-02;
     font-weight: $input-label-weight;
     line-height: 1rem;
@@ -125,8 +132,10 @@
     display: block;
   }
 
-  .#{$prefix}--form--fluid .#{$prefix}--fieldset {
-    margin: 0;
+  @if not feature-flag-enabled('enable-v11-release') {
+    .#{$prefix}--form--fluid .#{$prefix}--fieldset {
+      margin: 0;
+    }
   }
 
   .#{$prefix}--form--fluid input[data-invalid] {

diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss
@@ -33,8 +33,11 @@
     height: auto;
     min-height: rem(48px);
     flex-wrap: wrap;
-    margin-top: $carbon--spacing-05;
-    margin-bottom: $carbon--spacing-05;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-top: $carbon--spacing-05;
+      margin-bottom: $carbon--spacing-05;
+    }
+
     color: $inverse-01;
 
     @include carbon--breakpoint(md) {

diff --git a/packages/components/src/components/notification/_toast-notification.scss b/packages/components/src/components/notification/_toast-notification.scss
@@ -29,14 +29,19 @@
     width: rem(288px);
     height: auto;
     padding-left: $carbon--spacing-05;
-    margin-top: $carbon--spacing-03;
-    margin-right: $carbon--spacing-05;
-    margin-bottom: $carbon--spacing-03;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-top: $carbon--spacing-03;
+      margin-right: $carbon--spacing-05;
+      margin-bottom: $carbon--spacing-03;
+    }
+
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
     color: $inverse-01;
 
-    &:first-child {
-      margin-top: $carbon--spacing-05;
+    @if not feature-flag-enabled('enable-v11-release') {
+      &:first-child {
+        margin-top: $carbon--spacing-05;
+      }
     }
 
     @include carbon--breakpoint(max) {

diff --git a/packages/components/src/components/structured-list/_structured-list.scss b/packages/components/src/components/structured-list/_structured-list.scss
@@ -32,7 +32,10 @@
 
     display: table;
     width: 100%;
-    margin-bottom: 5rem;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-bottom: 5rem;
+    }
+
     background-color: transparent;
     border-collapse: collapse;
     border-spacing: 0;

diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
@@ -13,7 +13,7 @@ const customProperties = require('postcss-custom-properties');
 const rtlcss = require('rtlcss');
 
 const {
-  CARBON_ENABLE_V11_RELEASE,
+  CARBON_ENABLE_V11_RELEASE = 'false',
   CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES = 'false',
   CARBON_REACT_STORYBOOK_USE_RTL,
   CARBON_REACT_STORYBOOK_USE_SASS_LOADER,
@@ -69,6 +69,7 @@ module.exports = {
             $feature-flags: (
               ui-shell: true,
               enable-css-custom-properties: ${CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES},
+              enable-v11-release: ${CARBON_ENABLE_V11_RELEASE},
             );
             ${content}
           `;
@@ -88,6 +89,7 @@ module.exports = {
           $feature-flags: (
             ui-shell: true,
             enable-css-custom-properties: ${CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES},
+            enable-v11-release: ${CARBON_ENABLE_V11_RELEASE},
           );
         `,
         implementation: require('sass'),

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5905,7 +5905,6 @@ Map {
       "label": "provide a label",
       "onClick": [Function],
       "onKeyDown": [Function],
-      "role": "presentation",
       "selected": false,
     },
     "propTypes": Object {
@@ -5946,10 +5945,7 @@ Map {
       "renderContent": Object {
         "type": "func",
       },
-      "role": Object {
-        "isRequired": true,
-        "type": "string",
-      },
+      "role": [Function],
       "selected": Object {
         "isRequired": true,
         "type": "bool",

diff --git a/packages/react/src/components/FormGroup/FormGroup.js b/packages/react/src/components/FormGroup/FormGroup.js
@@ -19,14 +19,15 @@ const FormGroup = ({
   className,
   message,
   messageText,
-  hasMargin,
+  hasMargin, // TODO - remove in v11
   ...other
 }) => {
   const prefix = usePrefix();
   const enabled = useFeatureFlag('enable-v11-release');
   const classNamesLegend = classnames(`${prefix}--label`, [
     enabled ? null : className,
   ]);
+  // TODO - remove `fieldset--no-margin` in v11
   const classNamesFieldset = classnames(`${prefix}--fieldset`, className, {
     [`${prefix}--fieldset--no-margin`]: !hasMargin,
   });

diff --git a/packages/react/src/components/Tab/Tab-test.js b/packages/react/src/components/Tab/Tab-test.js
@@ -45,7 +45,7 @@ describe('Tab', () => {
     });
 
     it('renders <li> with [role="presentation"]', () => {
-      expect(wrapper.props().role).toEqual('presentation');
+      expect(wrapper.find('li').prop('role')).toEqual('presentation');
     });
 
     it('renders <button> with tabindex set to 0', () => {

diff --git a/packages/react/src/components/Tab/Tab.js b/packages/react/src/components/Tab/Tab.js
@@ -82,7 +82,7 @@ export default class Tab extends React.Component {
     /**
      * Provide an accessibility role for your Tab
      */
-    role: PropTypes.string.isRequired,
+    role: deprecate(PropTypes.string),
 
     /**
      * Whether your Tab is selected.
@@ -97,7 +97,6 @@ export default class Tab extends React.Component {
   };
 
   static defaultProps = {
-    role: 'presentation',
     label: 'provide a label',
     selected: false,
     onClick: () => {},
@@ -122,6 +121,7 @@ export default class Tab extends React.Component {
       renderAnchor,
       renderButton,
       renderContent, // eslint-disable-line no-unused-vars
+      role, // eslint-disable-line no-unused-vars
       ...other
     } = this.props;
 

diff --git a/packages/react/src/components/Tab/index.js b/packages/react/src/components/Tab/index.js
@@ -5,4 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export default from './Tab';
+import * as FeatureFlags from '@carbon/feature-flags';
+import { default as TabNext } from './next/Tab';
+import { default as TabClassic } from './Tab';
+
+const Tab = FeatureFlags.enabled('enable-v11-release') ? TabNext : TabClassic;
+
+export default Tab;