feat(inputs): modify input color based on container background (#5598)

* feat(inputs): modify background based on container #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 <[email protected]> Co-authored-by: TJ Egan <[email protected]> Co-authored-by: Alessandra Davila <[email protected]>
carbon-design-system · Apr 2, 2020 · 8b6cdd1 · 8b6cdd1
1 parent 33bc00b
commit 8b6cdd1
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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>