feat(react): deprecate light prop everywhere (#12297)

Co-authored-by: TJ Egan <tw15egan@gmail.com>

Author: abbeyhrt

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -563,9 +563,7 @@ Map {
       "hideCopyButton": Object {
         "type": "bool",
       },
-      "light": Object {
-        "type": "bool",
-      },
+      "light": [Function],
       "maxCollapsedNumberOfRows": Object {
         "type": "number",
       },
@@ -977,7 +975,6 @@ Map {
       "disabled": false,
       "itemToElement": null,
       "itemToString": [Function],
-      "light": false,
       "shouldFilterItem": [Function],
       "type": "default",
     },
@@ -1162,9 +1159,7 @@ Map {
         "isRequired": true,
         "type": "array",
       },
-      "light": Object {
-        "type": "bool",
-      },
+      "light": [Function],
       "onChange": Object {
         "isRequired": true,
         "type": "func",
@@ -1323,7 +1318,6 @@ Map {
       "helperText": "",
       "invalid": false,
       "invalidText": "",
-      "light": false,
       "onChange": [Function],
       "onClick": [Function],
       "size": "",
@@ -1371,9 +1365,7 @@ Map {
         "isRequired": true,
         "type": "node",
       },
-      "light": Object {
-        "type": "bool",
-      },
+      "light": [Function],
       "onChange": Object {
         "type": "func",
       },
@@ -2272,9 +2264,7 @@ Map {
       "inline": Object {
         "type": "bool",
       },
-      "light": Object {
-        "type": "bool",
-      },
+      "light": [Function],
       "locale": Object {
         "args": Array [
           Array [
@@ -2537,7 +2527,6 @@ Map {
       "helperText": "",
       "itemToElement": null,
       "itemToString": [Function],
-      "light": false,
       "titleText": "",
       "type": "default",
     },
@@ -2609,9 +2598,7 @@ Map {
         "isRequired": true,
         "type": "node",
       },
-      "light": Object {
-        "type": "bool",
-      },
+      "light": [Function],
       "onChange": Object {
         "type": "func",
       },
@@ -3063,7 +3050,6 @@ Map {
       "filterItems": [Function],
       "initialSelectedItems": Array [],
       "itemToString": [Function],
-      "light": false,
       "locale": "en",
       "open": false,
       "selectionFeedback": "top-after-reopen",
@@ -3238,9 +3224,7 @@ Map {
         "isRequired": true,
         "type": "array",
       },
-      "light": Object {
-        "type": "bool",
-      },
+      "light": [Function],
       "locale": Object {
         "type": "string",
       },
@@ -4291,7 +4275,6 @@ Map {
         "filterItems": [Function],
         "initialSelectedItems": Array [],
         "itemToString": [Function],
-        "light": false,
         "locale": "en",
         "open": false,
         "selectionFeedback": "top-after-reopen",
@@ -4466,9 +4449,7 @@ Map {
           "isRequired": true,
           "type": "array",
         },
-        "light": Object {
-          "type": "bool",
-        },
+        "light": [Function],
         "locale": Object {
           "type": "string",
         },
@@ -4534,7 +4515,6 @@ Map {
       "disabled": false,
       "initialSelectedItems": Array [],
       "itemToString": [Function],
-      "light": false,
       "locale": "en",
       "open": false,
       "selectedItems": null,
@@ -4719,9 +4699,7 @@ Map {
         "isRequired": true,
         "type": "node",
       },
-      "light": Object {
-        "type": "bool",
-      },
+      "light": [Function],
       "locale": Object {
         "type": "string",
       },
@@ -5284,9 +5262,7 @@ Map {
         "isRequired": true,
         "type": "node",
       },
-      "light": Object {
-        "type": "bool",
-      },
+      "light": [Function],
       "onChange": Object {
         "type": "func",
       },
@@ -7462,7 +7438,6 @@ Map {
       "helperText": "",
       "invalid": false,
       "invalidText": "",
-      "light": false,
       "maxCount": undefined,
       "onChange": [Function],
       "onClick": [Function],
@@ -7514,9 +7489,7 @@ Map {
         "isRequired": true,
         "type": "node",
       },
-      "light": Object {
-        "type": "bool",
-      },
+      "light": [Function],
       "maxCount": Object {
         "type": "number",
       },
@@ -7568,7 +7541,6 @@ Map {
         "helperText": "",
         "invalid": false,
         "invalidText": "",
-        "light": false,
         "onChange": [Function],
         "onClick": [Function],
         "size": "",
@@ -7616,9 +7588,7 @@ Map {
           "isRequired": true,
           "type": "node",
         },
-        "light": Object {
-          "type": "bool",
-        },
+        "light": [Function],
         "onChange": Object {
           "type": "func",
         },
@@ -7726,9 +7696,7 @@ Map {
           "isRequired": true,
           "type": "node",
         },
-        "light": Object {
-          "type": "bool",
-        },
+        "light": [Function],
         "onChange": Object {
           "type": "func",
         },
@@ -7852,9 +7820,7 @@ Map {
         "isRequired": true,
         "type": "node",
       },
-      "light": Object {
-        "type": "bool",
-      },
+      "light": [Function],
       "maxCount": Object {
         "type": "number",
       },
@@ -9377,9 +9343,7 @@ Map {
         "isRequired": true,
         "type": "node",
       },
-      "light": Object {
-        "type": "bool",
-      },
+      "light": [Function],
       "maxCount": Object {
         "type": "number",
       },

packages/react/src/components/CodeSnippet/CodeSnippet.js

@@ -15,6 +15,7 @@ import Button from '../Button';
 import CopyButton from '../CopyButton';
 import getUniqueId from '../../tools/uniqueId';
 import copy from 'copy-to-clipboard';
+import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
 
 const rowHeightInPixels = 16;
@@ -328,7 +329,12 @@ CodeSnippet.propTypes = {
    * Specify whether you are using the light variant of the Code Snippet,
    * typically used for inline snippet to display an alternate color
    */
-  light: PropTypes.bool,
+
+  light: deprecate(
+    PropTypes.bool,
+    'The `light` prop for `CodeSnippet` has ' +
+      'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'
+  ),
 
   /**
    * Specify the maximum number of rows to be shown when in collapsed view

packages/react/src/components/CodeSnippet/CodeSnippet.stories.js

@@ -18,6 +18,13 @@ export default {
       page: mdx,
     },
   },
+  argTypes: {
+    light: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 export const Inline = () => (

packages/react/src/components/ComboBox/ComboBox-test.e2e.js

@@ -89,18 +89,6 @@ describe('ComboBox', () => {
             disabled
           />
         </div>
-        <div style={{ marginBottom: '2rem' }}>
-          <ComboBox
-            onChange={() => {}}
-            id="carbon-combobox"
-            items={items}
-            itemToString={(item) => (item ? item.text : '')}
-            placeholder="Filter..."
-            titleText="Light combobox"
-            helperText="Combobox helper text"
-            light
-          />
-        </div>
         <div style={{ marginBottom: '2rem' }}>
           <ComboBox
             onChange={() => {}}

packages/react/src/components/ComboBox/ComboBox.js

@@ -21,6 +21,7 @@ import { match, keys } from '../../internal/keyboard';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import mergeRefs from '../../tools/mergeRefs';
 import { useFeatureFlag } from '../FeatureFlags';
+import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
 
 const defaultItemToString = (item) => {
@@ -485,7 +486,11 @@ ComboBox.propTypes = {
   /**
    * should use "light theme" (white background)?
    */
-  light: PropTypes.bool,
+  light: deprecate(
+    PropTypes.bool,
+    'The `light` prop for `Combobox` has ' +
+      'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'
+  ),
 
   /**
    * `onChange` is a utility for this controlled component to communicate to a
@@ -575,7 +580,6 @@ ComboBox.defaultProps = {
   shouldFilterItem: defaultShouldFilterItem,
   type: 'default',
   ariaLabel: 'Choose an item',
-  light: false,
   direction: 'bottom',
 };
 

packages/react/src/components/ComboBox/ComboBox.stories.js

@@ -46,6 +46,11 @@ export default {
       options: ['sm', 'md', 'lg'],
       control: { type: 'select' },
     },
+    light: {
+      table: {
+        disable: true,
+      },
+    },
   },
   parameters: {
     docs: {
@@ -173,11 +178,6 @@ Playground.argTypes = {
       disable: true,
     },
   },
-  light: {
-    table: {
-      disable: true,
-    },
-  },
   onChange: {
     action: 'clicked',
   },

packages/react/src/components/DatePicker/DatePicker.js

@@ -14,6 +14,7 @@ import DatePickerInput from '../DatePickerInput';
 import carbonFlatpickrAppendToPlugin from './plugins/appendToPlugin';
 import carbonFlatpickrFixEventsPlugin from './plugins/fixEventsPlugin';
 import carbonFlatpickrRangePlugin from './plugins/rangePlugin';
+import deprecate from '../../prop-types/deprecate';
 import { match, keys } from '../../internal/keyboard';
 import { usePrefix } from '../../internal/usePrefix';
 import { useSavedCallback } from '../../internal/useSavedCallback';
@@ -185,7 +186,7 @@ function DatePicker({
   disable,
   enable,
   inline,
-  light = false,
+  light,
   locale = 'en',
   maxDate,
   minDate,
@@ -529,8 +530,11 @@ DatePicker.propTypes = {
   /**
    * `true` to use the light version.
    */
-  light: PropTypes.bool,
-
+  light: deprecate(
+    PropTypes.bool,
+    'The `light` prop for `DatePicker` has ' +
+      'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'
+  ),
   /**
    *  The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n
    */

packages/react/src/components/DatePicker/DatePicker.stories.js

@@ -24,6 +24,13 @@ export default {
       page: mdx,
     },
   },
+  argTypes: {
+    light: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 export const Simple = () => (
@@ -244,11 +251,6 @@ Playground.argTypes = {
       disable: true,
     },
   },
-  light: {
-    table: {
-      disable: true,
-    },
-  },
   locale: {
     table: {
       disable: true,

packages/react/src/components/Dropdown/Dropdown-test.e2e.js

@@ -51,15 +51,6 @@ describe('Dropdown', () => {
           invalid
           invalidText="This is invalid text"
         />
-        <Dropdown style={style} items={items} label={label} light />
-        <Dropdown
-          style={style}
-          items={items}
-          label={label}
-          light
-          invalid
-          invalidText="This is invalid text"
-        />
         <Dropdown style={style} items={items} label={label} type="inline" />
         <DropdownSkeleton style={style} size="sm" />
         <DropdownSkeleton style={style} size="md" />