Action List: Remove highlights on selected items (and hovered items when onClickRowSelect is true) (#894)

* Minor docs changes

* Removed purple color from selected rows

* Removed blue highlight when onClickRowSelect is true

* Added CHANGELOG entry

Author: Elliot

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `MenuItem` renders an empty Box with the same size as the icon(s) of sibling `MenuItem's (if any)
 - `MenuList`, `MenuGroup` contain piece of state the tracks the size of the preserved icon space
 - Labels in `FieldInline` and `ButtonItem` now include the `for` attribute
+- `ActionList` no longer highlights selected rows or hovered rows (when onClickRowSelect is true)
 - Fields have more explicit line-heights to enforce consistent layout.
 - `Fieldset` default spacing switched from `xsmall` to `small` to improve visual relationship with their `Input*`
 
@@ -33,7 +34,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Clears out old `defaultValue` when new `defaultValue` is passed in
   - Clears out any user input after pressing cancel button
   - Updated test suite to prevent future regressions for the above fixes
-- `InlineInputText` add placeholder attribute 
+- `InlineInputText` add placeholder attribute
 
 ### Removed
 

packages/components/src/ActionList/ActionListRow.tsx

@@ -82,19 +82,13 @@ ActionListRowLayout.displayName = 'ActionListRowLayout'
 export const ActionListRow = styled(ActionListRowLayout)`
   display: flex;
 
-  background: ${({ checked, disabled, hasCheckbox, theme }) =>
-    disabled
-      ? theme.colors.palette.charcoal100
-      : checked && hasCheckbox
-      ? theme.colors.palette.purple000
-      : undefined};
+  background: ${({ disabled, theme }) =>
+    disabled && theme.colors.palette.charcoal100};
 
   &:focus,
   &:hover {
     box-shadow: ${({ theme, supportsRaised, onClick }) =>
       supportsRaised && onClick && theme.shadows[2]};
-    background: ${({ theme, supportsRaised, onClick }) =>
-      !supportsRaised && onClick && theme.colors.palette.blue100};
     cursor: ${({ onClick }) => onClick && 'pointer'};
     outline: none;
 

packages/playground/src/index.tsx

@@ -27,14 +27,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { ComponentsProvider } from '@looker/components'
-import { RangeSliderDemo } from './Form/RangeSliderDemo'
-import { FieldsDemo } from './Form/FieldsDemo'
+import { ActionListDemo } from './ActionList/ActionListDemo'
 
 const App: React.FC = () => {
   return (
     <ComponentsProvider>
-      <RangeSliderDemo />
-      <FieldsDemo />
+      <ActionListDemo />
     </ComponentsProvider>
   )
 }

packages/www/src/documentation/components/content/action-list.mdx

@@ -147,17 +147,24 @@ The `<ActionListItemAction>` component represents an actionable item on the rows
 
 In the event that your page and `<ActionList>` render before data is available (i.e. before a Promise resolves), you can use an `<ActionListManager>` component to conditionally render a loading icon until your data is ready.
 
-Passing a falsy value into an `<ActionListManager>`'s `isLoading` prop will render a `<Spinner>` icon. Once the `isLoading` prop receives a boolean 'true', its child will rendered instead.
+Passing "false" into an `<ActionListManager>`'s `isLoading` prop will render a `<Spinner>` icon. Once you pass in "true" into the `isLoading` prop, the `<ActionListManager>` will render its children instead.
 
-You can also use an `<ActionListManager>` element to render a "No Results" message using the `noResults` prop.
+Additionally, you can render a "No Results" message using the `noResults` prop. When `noResults` is "true", the `<ActionListManager>` will display a "No Results" message in place of its children.
+
+To customize the "No Results" message text, use the `noResultsText` prop.
 
 ```jsx
 ;() => {
   const [isLoading, setIsLoading] = useState(true)
   setTimeout(() => setIsLoading(false), 5000)
 
+  // Change noResults to "true" to render the noResultsText
   return (
-    <ActionListManager isLoading={isLoading} noResults={false}>
+    <ActionListManager
+      isLoading={isLoading}
+      noResults={false}
+      noResultsText={'No Cheese Here :('}
+    >
       Swiss
     </ActionListManager>
   )