feat(settings): updates for space notifications table (#432)

* chore(select): update select component styles

* Update select component with latest UI styles
* Add support for tiny on netdata table select

* chore(netdata table): add support for button on bulk actions

* Add support for regular button on table's bulk actions
* Update button styles to support strong font weight

Author: burbuli8ra

src/components/button/index.d.ts

@@ -36,6 +36,7 @@ export interface ButtonWrapperProps extends ButtonProps, MarginProps, PaddingPro
   loadingLabel?: string | JSX.Element
   loadingIcon?: any
   iconColor?: string
+  strong?: boolean
 }
 
 type IconButtonProps = Pick<

src/components/button/styled.js

@@ -116,7 +116,7 @@ export const StyledButton = styled.button.attrs(props => ({
         ? getSizeBy(props.small ? 4 : 5)
         : getSizeBy(props.tiny ? 2 : props.small ? 3 : 4)};
 
-    font-weight: 500;
+    font-weight: ${({ strong }) => strong ? 700 : 500};
     font-size: ${({ small, tiny }) => (tiny ? "10px" : small ? "12px" : "14px")};
     line-height: ${getSizeBy(2)};
     white-space: nowrap;

src/components/select/index.js

@@ -1,8 +1,6 @@
 import ReactSelect from "react-select"
 import styled from "styled-components"
 
-export const selectMenusZIndex = 100
-
 const makeCustomTheme = theme => selectTheme => {
   return {
     ...selectTheme,
@@ -27,47 +25,92 @@ const makeCustomTheme = theme => selectTheme => {
 }
 
 const getOptionColor = (theme, state) => {
-  if (state.isDisabled) return theme.colors.border
+  if (state.isDisabled) return theme.colors.placeholder
   if (state.isSelected) return theme.colors.bright
-  return theme.colors.text
+  return theme.colors.textDescription
 }
 
-const makeCustomStyles = (theme, providedStyles) => ({
-  option: (styles, state) => ({
+const makeCustomStyles = (theme, { size, ...providedStyles } = {}) => ({
+  control: (styles, state) => ({
     ...styles,
-    color: getOptionColor(theme, state),
-    fontWeight: "normal",
+    borderColor: state.isFocused ? theme.colors.inputBorderFocus : theme.colors.inputBorder,
+    boxShadow: "none",
+    minWidth: 160,
+    ...(size === "tiny" ? { minHeight: 28 } : {}),
+    ":hover": {
+      borderColor: theme.colors.inputBorderHover,
+    },
   }),
-  control: styles => ({
+  input: (styles, state) =>({
     ...styles,
-    minWidth: 160,
-    fontWeight: "normal",
+    color: state.isDisabled ? theme.colors.placeholder : theme.colors.textDescription,
+    ...(size === "tiny" ? {
+      lineHeight: "18px",
+      paddingBottom: 0,
+      paddingTop: 0
+    } : {}),
   }),
-  menu: styles => ({
+  menu: styles => ({ ...styles, zIndex: 100 }),
+  menuPortal: styles => ({ ...styles, zIndex: 9999 }),
+  multiValue: (styles) => ({
     ...styles,
-    zIndex: selectMenusZIndex,
+    fontSize: size === "tiny" ? "12px" : "14px",
+    ...(size === "tiny" ? { minHeight: 18 } : {}),
   }),
-  multiValueLabel: (styles, control) => ({
+  multiValueLabel: (styles, state) => ({
     ...styles,
-    paddingRight: control.data.isDisabled ? "8px" : "",
-    borderRadius: "2px 0 0 2px",
     backgroundColor: theme.colors.disabled,
+    borderRadius: "2px 0 0 2px",
+    color: state.isDisabled ? theme.colors.placeholder : theme.colors.textDescription,
+    ...(size === "tiny" ? { padding: "1px" } : {}),
+    paddingRight: state.data.isDisabled ? "8px" : "",
   }),
-  multiValueRemove: (styles, control) =>
-    control.data.isDisabled
+  multiValueRemove: (styles, state) => ({
+    color: state.isDisabled ? theme.colors.placeholder : theme.colors.textDescription,
+    ...(state.data.isDisabled
       ? { ...styles, display: "none" }
       : {
-          ...styles,
-          color: theme.colors.text,
-          borderRadius: "0 2px 2px 0",
-          background: theme.colors.disabled,
-          ":hover": {
-            background: theme.colors.borderSecondary,
-          },
+        ...styles,
+        borderRadius: "0 2px 2px 0",
+        background: theme.colors.disabled,
+        ":hover": {
+          background: theme.colors.borderSecondary,
         },
+      }),
+  }),
+  option: (styles, state) => ({
+    ...styles,
+    color: getOptionColor(theme, state),
+    ...(size === "tiny" ? { fontSize: "12px", minHeight: 28, padding: "4px 8px" } : {}),
+  }),
+  placeholder: styles => ({
+    ...styles,
+    color: theme.colors.placeholder,
+    ...(size === "tiny"
+      ? { fontSize: "12px", lineHeight: "18px" }
+      : {})
+  }),
+  singleValue: (styles, state) => ({
+    ...styles,
+    color: state.isDisabled ? theme.colors.placeholder : theme.colors.textDescription,
+    fontSize: size === "tiny" ? "12px" : "14px"
+  }),
+  ...(size === "tiny"
+    ? {
+      dropdownIndicator: styles => ({ ...styles, padding: "3px" }),
+      clearIndicator: styles => ({ ...styles, padding: "3px" }),
+      indicatorsContainer: styles => ({ ...styles, minHeight: 28 }),
+      valueContainer: styles => ({
+        ...styles,
+        minHeight: 28,
+        padding: "1px 6px",
+      }),
+    }
+    : {}),
   ...providedStyles,
 })
 
+// @TODO check react-select for rendering data attributes
 export const Select = styled(ReactSelect).attrs(props => ({
   ...props,
   theme: makeCustomTheme(props.theme),

src/components/tableV2/components/action.js

@@ -4,7 +4,7 @@ import Tooltip from "src/components/drops/tooltip"
 import Flex from "src/components/templates/flex"
 
 import { ConfirmationDialog } from "src/components/confirmation-dialog"
-import { IconButton } from "src/components/button"
+import { Button, IconButton } from "src/components/button"
 
 const Action = forwardRef(
   (
@@ -31,6 +31,8 @@ const Action = forwardRef(
       iconColor,
       flavour = "borderless",
       CustomUIAction,
+      label,
+      ...rest
     },
     ref
   ) => {
@@ -55,6 +57,8 @@ const Action = forwardRef(
       handleAction?.()
     }
 
+    const Component = label ? Button : IconButton
+
     return (
       <>
         {isConfirmationOpen && CustomUIAction && (
@@ -88,13 +92,13 @@ const Action = forwardRef(
             ref={ref}
             alignItems="center"
             justifyContent="center"
-            _hover={{ background: disabled ? null : "borderSecondary" }}
+            _hover={{ background: (disabled || label) ? null : "borderSecondary" }}
             cursor={disabled ? "auto" : "pointer"}
             key={id}
             round
-            background={background}
+            background={label ? null : background}
           >
-            <IconButton
+            <Component
               iconSize="small"
               data-testid={`netdata-table-action-${id}${testPrefix}`}
               data-ga={dataGa}
@@ -103,6 +107,8 @@ const Action = forwardRef(
               icon={icon}
               flavour={flavour}
               iconColor={iconColor}
+              label={label}
+              {...rest}
             />
           </Flex>
         </Tooltip>

src/components/tableV2/components/dropdownFilter.js

@@ -2,7 +2,7 @@ import React from "react"
 
 import { Select } from "src/components/select"
 
-const DropdownFilter = ({ onChange, value, options, isMulti }) => {
+const DropdownFilter = ({ onChange, value, options, isMulti, styles }) => {
   const selectedValue = value
 
   return (
@@ -13,6 +13,7 @@ const DropdownFilter = ({ onChange, value, options, isMulti }) => {
       onChange={option => {
         onChange(option)
       }}
+      styles={styles}
     />
   )
 }

src/components/tableV2/components/selectFilter.js

@@ -3,7 +3,7 @@ import DropdownFilter from "./dropdownFilter"
 
 const all = { value: "all", label: "All" }
 
-const SelectFilter = ({ isMulti = false, column, options = [] }) => {
+const SelectFilter = ({ column, isMulti = false, options = [], tiny = false }) => {
   const { setFilterValue, getFilterValue } = column
   const filterValue = getFilterValue()
 
@@ -16,6 +16,7 @@ const SelectFilter = ({ isMulti = false, column, options = [] }) => {
       isMulti={isMulti}
       options={optionsWithExtraChoice}
       onChange={value => setFilterValue(value)}
+      styles={tiny && { size: "tiny" }}
     />
   )
 }

src/components/tableV2/core/base-table.js

@@ -147,8 +147,9 @@ Table.HeadCell = forwardRef(
           )}
         </Box>
       </Flex>
-
-      {filter}
+      <Box sx={{ fontWeight: "normal" }}>
+        {filter}
+      </Box>
       <Table.Resizer
         onMouseDown={onMouseDown}
         onTouchStart={onTouchStart}