Changes on colors (#516)

* Add buttonProps to ButtonGroup

* Change placeholder colors

* Fix select options colors

* v4.3.18

Author: kapantzak

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "4.3.17",
+  "version": "4.3.18",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/components/button/buttonGroup.js

@@ -30,7 +30,7 @@ const Content = ({ children }) => {
   )
 }
 
-const RadioButtons = ({ items, checked, onChange }) => (
+const RadioButtons = ({ items, checked, buttonProps = {}, onChange }) => (
   <>
     {items.map(({ label, value }, index) => {
       const buttonGroupProps = getButtonGroupProps(index, items.length)
@@ -41,16 +41,17 @@ const RadioButtons = ({ items, checked, onChange }) => (
           onClick={() => onChange(value)}
           {...(checked != value ? { flavour: "hollow" } : {})}
           {...buttonGroupProps}
+          {...buttonProps}
         />
       )
     })}
   </>
 )
 
-export const ButtonGroup = ({ items, checked, onChange, children, ...props }) => (
+export const ButtonGroup = ({ items, checked, onChange, children, buttonProps, ...props }) => (
   <Flex alignItems="center" {...props}>
     {items?.length ? (
-      <RadioButtons items={items} checked={checked} onChange={onChange} />
+      <RadioButtons items={items} checked={checked} onChange={onChange} buttonProps={buttonProps} />
     ) : (
       <Content>{children}</Content>
     )}

src/components/select/index.js

@@ -3,7 +3,6 @@ import styled from "styled-components"
 import ReactSelect, { components as defaultComponents } from "react-select"
 import Creatable from "react-select/creatable"
 import { Icon } from "@/components/icon"
-import { TextSmall } from "@/components/typography"
 
 const useDataAttrs = (props, name) => {
   const { "data-ga": dataGA, "data-testid": dataTestId } = props.selectProps
@@ -109,8 +108,12 @@ const makeCustomTheme = theme => selectTheme => {
 
 const getOptionColor = (theme, state) => {
   if (state.isDisabled) return theme.colors.placeholder
-  if (state.isSelected) return theme.colors.text
-  return theme.colors.textDescription
+  return theme.colors.text
+}
+
+const getOptionBackground = (theme, state) => {
+  if (state.isSelected) return theme.colors.menuItemSelected
+  return null
 }
 
 const makeCustomStyles = (theme, { minWidth, size, ...providedStyles } = {}) => ({
@@ -169,6 +172,7 @@ const makeCustomStyles = (theme, { minWidth, size, ...providedStyles } = {}) =>
     display: "flex",
     alignItems: "center",
     color: getOptionColor(theme, state),
+    backgroundColor: getOptionBackground(theme, state),
     ":hover": {
       backgroundColor: theme.colors.secondaryHighlight,
       color: theme.colors.text,

src/theme/dark/colors.js

@@ -18,7 +18,7 @@ const appColors = {
   modalTabsBackground: rawColors.neutral.grey20,
   modalBackground: rawColors.neutral.grey30,
   modalInfoBackground: rawColors.neutral.grey50,
-  menuItemSelected: rawColors.green.green20,
+  menuItemSelected: rawColors.green.green30,
   menuItemHover: rawColors.green.green10,
   //links
   link: rawColors.green.green110,
@@ -77,7 +77,7 @@ const appColors = {
   sectionTitle: rawColors.neutral.grey155,
   sectionDescription: rawColors.neutral.grey150,
   menuItem: rawColors.neutral.grey140,
-  placeholder: rawColors.neutral.grey140,
+  placeholder: rawColors.neutral.grey110,
   key: rawColors.neutral.iron,
   panel: rawColors.neutral.limedSpruce,
   panelBg: rawColors.neutral.grey25,

src/theme/default/colors.js

@@ -77,7 +77,7 @@ const appColors = {
   sectionHeaderBackground: rawColors.neutral.limedSpruce,
   sectionTitle: rawColors.neutral.grey100,
   sectionDescription: rawColors.neutral.grey120,
-  placeholder: rawColors.neutral.grey120,
+  placeholder: rawColors.neutral.grey140,
   key: rawColors.neutral.regentgrey,
   panel: rawColors.neutral.limedSpruce,
   panelBg: rawColors.neutral.grey190,