pixel-react 1.0.0 → 1.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/assets/styles/_colors.scss

@@ -76,6 +76,8 @@ $default-color: #747474;
 
 ///!-----------------------------------------------------------------------------------------------------
 
+
+
 $description-text: #d9d9d9;
 $ff-success: #079455;
 $ff-warning: #f79009;
@@ -140,6 +142,6 @@ $file-details-bg: #ffffff;
   --add-icon-hover-color: #{$add-icon-hover-color}; // TODO: Change the color variable name
   --arrows-button-border-color: #{$arrows-button-border-color}; // TODO: Change the color variable name
   --arrow-button-bg-color: #{$arrow-button-bg-color}; // TODO: Change the color variable name
-  --text-bg-highlight: #{$text-bg-highlight};
+  --text-bg-highlight:#{$text-bg-highlight};
   --slider-table-color: #{$slider-table-color};
 }

package/src/components/Select/components/Dropdown/Dropdown.tsx

@@ -1,10 +1,12 @@
-import { useRef } from 'react';
+import { useContext, useRef } from 'react';
 import { DropDownListProps, dropdownDefaultCSSData } from './dropdownTypes';
 import useClickOutside from '../../../../hooks/useClickOutside';
 import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
 import './Dropdown.scss';
 import Typography from '../../../Typography';
 import ffid from '../../../../utils/ffID/ffid';
+import { ThemeContext } from '../../../ThemeProvider/ThemeProvider';
+import classNames from 'classnames';
 
 const Dropdown = ({
   onSelectBlur,
@@ -14,6 +16,8 @@ const Dropdown = ({
   optionZIndex = 100,
   inputRef,
 }: DropDownListProps) => {
+  const themeContext = useContext(ThemeContext);
+  const currentTheme = themeContext?.currentTheme;
   const optionsWrapperRef = useRef<HTMLDivElement>(null);
   useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef]);
 
@@ -55,7 +59,7 @@ const Dropdown = ({
         ref={optionsWrapperRef}
         // inline css required due to multiple overlay scenarios are present
         style={updateDropdownPosition()}
-        className="ff-select-options-wrapper"
+        className={classNames('ff-select-options-wrapper', currentTheme)}
       >
         {!checkEmpty(options) ? (
           options.map((option) => (
@@ -63,7 +67,7 @@ const Dropdown = ({
               key={ffid()}
               as="div"
               lineHeight="30px"
-              className="ff-select-option"
+              className={classNames('ff-select-option', currentTheme)}
               color="var(--ff-select-text-color)"
               onClick={() => onSelectOptionSelector(option)}
             >

package/src/components/Tooltip/Tooltip.scss

@@ -1,4 +1,3 @@
-@import '../../assets/styles/colors';
 @import '../../assets/styles/fonts';
 
 .ff-tooltip-container {

package/src/index.ts

@@ -15,7 +15,7 @@ import Select from './components/Select/Select';
 import TextArea from './components/TextArea';
 
 import MenuOption from './components/MenuOption';
-import Table from './components/Table';
+import Table from './components/Table/Table';
 
 import AddResourceButton from './components/AddResourceButton';
 import DonutChart from './components/Charts/DonutChart';
@@ -35,7 +35,7 @@ import TableTree from './components/TableTree';
 import Tabs from './components/Tabs';
 import HighlightText from './components/HighlightText';
 import Checkbox from './components/Checkbox';
-import Search from './components/Search'
+import Search from './components/Search/Search'
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';