From 8b6cdd115f1e9d30b503376343d0b24f1fed883d Mon Sep 17 00:00:00 2001
From: Taylor Jones <tay1orjones@users.noreply.github.com>
Date: Thu, 2 Apr 2020 13:02:46 -0500
Subject: [PATCH] feat(inputs): modify input color based on container
 background (#5598)

* feat(inputs): modify background based on container

carbon-design-system/carbon#4826

* fix(inputs): un-nest styles for inputs in tile/tabs containers

* fix(tabs): target inputs via general sibling combinator selector

* fix(tabs): add input to container story

Co-authored-by: Josh Black <josh@josh.black>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: Alessandra Davila <aledavila@ibm.com>
---
 .../components/src/components/tabs/_tabs.scss | 26 +++++++++++++++++++
 .../components/src/components/tile/_tile.scss | 11 ++++++++
 .../react/src/components/Tabs/Tabs-story.js   |  2 ++
 3 files changed, 39 insertions(+)

diff --git a/packages/components/src/components/tabs/_tabs.scss b/packages/components/src/components/tabs/_tabs.scss
index 00599f8db582..e9a5093856de 100644
--- a/packages/components/src/components/tabs/_tabs.scss
+++ b/packages/components/src/components/tabs/_tabs.scss
@@ -407,6 +407,32 @@
     padding: $carbon--spacing-05;
   }
 
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--text-input,
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--text-area,
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--search-input,
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--select-input,
+  .#{$prefix}--tabs--container ~ .#{$prefix}--tab-content .#{$prefix}--dropdown,
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--dropdown-list,
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--number
+    input[type='number'],
+  .#{$prefix}--tabs--container
+    ~ .#{$prefix}--tab-content
+    .#{$prefix}--date-picker__input {
+    background-color: $field-02;
+  }
+
   //-----------------------------
   // Skeleton state
   //-----------------------------
diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss
index eaf06da8e644..81f74d6453de 100644
--- a/packages/components/src/components/tile/_tile.scss
+++ b/packages/components/src/components/tile/_tile.scss
@@ -33,6 +33,17 @@
     }
   }
 
+  .#{$prefix}--tile .#{$prefix}--text-input,
+  .#{$prefix}--tile .#{$prefix}--text-area,
+  .#{$prefix}--tile .#{$prefix}--search-input,
+  .#{$prefix}--tile .#{$prefix}--select-input,
+  .#{$prefix}--tile .#{$prefix}--dropdown,
+  .#{$prefix}--tile .#{$prefix}--dropdown-list,
+  .#{$prefix}--tile .#{$prefix}--number input[type='number'],
+  .#{$prefix}--tile .#{$prefix}--date-picker__input {
+    background-color: $field-02;
+  }
+
   .#{$prefix}--tile--light {
     background-color: $ui-02;
   }
diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js
index 5aa3cbbb3917..04a7d15a7190 100644
--- a/packages/react/src/components/Tabs/Tabs-story.js
+++ b/packages/react/src/components/Tabs/Tabs-story.js
@@ -21,6 +21,7 @@ import './Tabs-story.scss';
 import CodeSnippet from '../CodeSnippet';
 import Tabs from '../Tabs';
 import Tab from '../Tab';
+import TextInput from '../TextInput';
 import TabsSkeleton from '../Tabs/Tabs.Skeleton';
 
 const selectionModes = {
@@ -199,6 +200,7 @@ storiesOf('Tabs', module)
           label={<CustomLabel text="Custom Label" />}>
           <div className="some-content">
             <p>Content for fourth tab goes here.</p>
+            <TextInput id="sample-input" labelText="text input label" />
           </div>
         </Tab>
       </Tabs>