Routine maintenance 2023-08

.storybook/styles/components/_forms.scss

@@ -163,6 +163,10 @@ Checkbox
   .tooltip-trigger {
     float: initial;
     width: auto;
+    padding: 0;
+    border: none;
+    background: none;
+    margin-left: 10px;
   }
 }
 
@@ -262,10 +266,8 @@ Input Tooltip
   display: inline-block;
   height: 18px;
   font-size: 12px;
-  margin-left: 10px;
   text-align: center;
   line-height: 1.4;
-  vertical-align: text-top;
   width: 18px;
 }
 
@@ -443,6 +445,8 @@ Custom Dropdown Select
     @include font-type($primary-sans-serif, normal, 400);
     @include s-base;
     @include rem(padding, 7px 13px);
+    width: 100%;
+    text-align: left;
 
     &:after {
       // background-image: asset-url('dropdown.svg');

.storybook/styles/components/_tabs.scss

@@ -2,13 +2,19 @@
 Shared
 -----------------------*/
 .tabs {
-  cursor: pointer;
+  [role="tab"] {
+    border: none;
+    cursor: pointer;
+    background: none;
+    @include rem(padding, 10px 20px);
+    height: 100%;
+    display: inline-block;
 
-  li {
     transition: all 0.3s ease-in-out;
 
     &:hover {
-      color: darken($black-base, 100%);
+      color: $white-base;
+      background-color: darken($black-base, 5%);
     }
   }
 }
@@ -19,7 +25,6 @@ Horizontal Tabs
 .horizontal-tabs {
   li {
     display: inline-block;
-    @include rem(padding, 10px 20px);
     border-bottom: 2px solid transparent;
 
     &.active {
@@ -29,11 +34,10 @@ Horizontal Tabs
 }
 
 /*-----------------------
-Veritcal Tabs
+Vertical Tabs
 -----------------------*/
 .vertical-tabs {
   li {
-    @include rem(padding, 10px 20px);
     border-left: 2px solid transparent;
 
     &.active {

README.md

@@ -28,6 +28,7 @@ Documentation and usage info can be found in [docs.md](docs.md).
 - [v6.0.0](migration-guides/v6.0.0.md)
 - [v7.0.0](migration-guides/v7.0.0.md)
 - [v8.0.0](migration-guides/v8.0.0.md)
+- [v9.0.0](migration-guides/v9.0.0.md)
 
 ## Contribution
 

docs.md

@@ -1302,6 +1302,8 @@ Omits the following props:
 *   `tooltip`
 *   `label`
 *   `requiredIndicator`
+*   `errorComponent`
+*   `labelComponent`
 
 ### Parameters
 
@@ -1331,7 +1333,8 @@ function Input (props) {
      input: { name, value, onBlur, onChange },
      type,
      ...rest
-   } = omitLabelProps(props)
+   } = props
+   const inputProps = omitLabelProps(rest)
    return (
      ...
    )

jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  testEnvironment: 'jsdom',
   'setupFiles': [
     './test/setup.js',
   ],

migration-guides/v9.0.0.md

@@ -0,0 +1,20 @@
+# v9.0.0 Migration Guide
+
+This version contains the following breaking changes:
+
+1. The swatch rendered in `ColorPicker` (also used by `ColorInput`) is now a button
+2. The tooltip rendered in the default `InputLabel` is now a button
+3. The elements with [role="tab"] in `TabBar` switched from anchor tags to buttons
+
+Further explanation of each item is detailed below.
+
+---
+
+## 1. The swatch rendered in `ColorPicker` (also used by `ColorInput`) is now a button
+This change _might_ affect styling. Review to see if you have any rules targeting `.swatch` or `.cover`. In the case of the latter, this element is no longer being used (in preference to a third-party outside click library) and the styling rules should be able to be safely removed.
+
+## 2. The tooltip rendered in the default `InputLabel` is now a button
+This change will likely affect styling **if** you are using the `tooltip` prop on any inputs that don't already have a custom `labelComponent` defined. To preserve appropriate focus styling, move the `margin-left` styling from `.tooltip-trigger:after` to `.tooltip-trigger`. You will likely also need to strip the user agent's default button styling on `.tooltip-trigger`.
+
+## 3. The elements with [role="tab"] in `TabBar` switched from anchor tags to buttons
+This change _might_ affect styling. Review styling rules to see if there are any rules specifically targeting `a` elements. If so, replace those rules with a target of `[role="tab"]`. This is more resilient

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-components",
-  "version": "8.1.0",
+  "version": "9.0.0",
   "engines": {
     "node": "^18.12"
   },
@@ -44,7 +44,7 @@
     "classnames": "^2.3.1",
     "cleave.js": "^1.6.0",
     "date-fns": "^2.28.0",
-    "filter-invalid-dom-props": "^2.1.0",
+    "filter-invalid-dom-props": "^3.0.1",
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
     "react-color": "^2.19.3",
@@ -58,9 +58,9 @@
     "@babel/cli": "^7.17.6",
     "@babel/core": "^7.17.9",
     "@launchpadlab/babel-preset": "^2.1.1",
-    "@launchpadlab/eslint-config": "^2.7.0",
+    "@launchpadlab/eslint-config": "^3.0.1",
     "@launchpadlab/prettier-config": "^1.0.0",
-    "@size-limit/preset-small-lib": "^7.0.8",
+    "@size-limit/preset-small-lib": "^8.2.6",
     "@storybook/addon-a11y": "^6.4.22",
     "@storybook/addon-actions": "^6.4.22",
     "@storybook/addon-links": "^6.4.22",
@@ -70,27 +70,28 @@
     "@storybook/builder-webpack5": "^6.5.14",
     "@storybook/manager-webpack5": "^6.5.14",
     "@storybook/react": "^6.4.22",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "babel-loader": "^9.1.0",
     "bourbon": "^7.2.0",
     "bourbon-neat": "^4.0.0",
     "core-js": "^3.21.1",
     "css-loader": "^6.7.2",
-    "documentation": "^13.2.5",
+    "documentation": "^14.0.2",
     "enzyme": "^3.2.0",
-    "eslint": "^7.32.0",
-    "husky": "^7.0.4",
-    "jest": "^25.1.0",
+    "eslint": "^8.46.0",
+    "husky": "^8.0.3",
+    "jest": "^29.6.2",
     "jest-canvas-mock": "^2.1.1",
+    "jest-environment-jsdom": "^29.6.2",
     "lint-staged": "^13.0.3",
-    "prettier": "^2.7.1",
+    "prettier": "^3.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "redux": "^4.1.2",
     "regenerator-runtime": "^0.13.9",
     "sass": "^1.56.1",
     "sass-loader": "^13.2.0",
-    "size-limit": "^7.0.8",
+    "size-limit": "^8.2.6",
     "style-loader": "^3.3.1",
     "webpack": "^5.75.0"
   },
@@ -101,8 +102,5 @@
   "lint-staged": {
     "src/**/*.{js,jsx}": "eslint --fix --max-warnings=0",
     "src/**/*.{js,jsx,json,scss}": "prettier --write"
-  },
-  "resolutions": {
-    "jsprim": "^1.3.6"
   }
 }

src/controls/color-picker.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ChromePicker from 'react-color/lib/Chrome'
+import OutsideClickHandler from 'react-outside-click-handler'
 import { noop, useToggle } from '../utils'
 
 /**
@@ -35,46 +36,60 @@ const propTypes = {
   onOpen: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
   active: PropTypes.bool,
+  containerRef: PropTypes.shape({ current: PropTypes.any }),
 }
 
 const defaultProps = {
   value: '#000000',
   onChange: noop,
   onOpen: noop,
   onClose: noop,
+  containerRef: null,
 }
 
-function ColorPicker({ active, value, onChange, onOpen, onClose, ...rest }) {
+function ColorPicker({
+  active,
+  value,
+  onChange,
+  onOpen,
+  onClose,
+  containerRef,
+  ...rest
+}) {
   const [expanded, toggleExpanded] = useToggle()
   const isExpanded = active === undefined ? expanded : active
 
   return (
     <div className="color-picker">
-      <span
-        className="swatch"
-        style={{ background: value || 'black' }}
-        onClick={() => {
-          toggleExpanded()
-          return onOpen()
+      <OutsideClickHandler
+        onOutsideClick={(e) => {
+          if (containerRef && containerRef.current.contains(e.target)) {
+            return
+          }
+          toggleExpanded(false)
+          return onClose()
         }}
-      />
-      {isExpanded && (
-        <div className="popover">
-          <div
-            className="cover"
-            onClick={() => {
-              toggleExpanded()
-              return onClose()
-            }}
-          />
-          <ChromePicker
-            color={value}
-            onChange={({ hex }) => onChange(hex)}
-            disableAlpha={true}
-            {...rest}
-          />
-        </div>
-      )}
+      >
+        <button
+          type="button"
+          className="swatch"
+          style={{ background: value || 'black' }}
+          onClick={() => {
+            toggleExpanded()
+            return isExpanded ? onClose() : onOpen()
+          }}
+        />
+        {isExpanded && (
+          <div className="popover">
+            <ChromePicker
+              color={value}
+              onChange={({ hex }) => onChange(hex)}
+              disableAlpha={true}
+              {...rest}
+            />
+          </div>
+        )}
+      </OutsideClickHandler>
     </div>
   )
 }

src/controls/paginator/page-link.js

@@ -22,8 +22,9 @@ function PageLink({ className, active, onClick, children, ...rest }) {
   return (
     <li className={classnames(className, { active: active })}>
       <a
+        role="link"
         onClick={onClick}
-        onKeyPress={triggerOnKeys(onClick, ENTER_KEY_CODE)} // keyboard interaction requirement
+        onKeyDown={triggerOnKeys(onClick, ENTER_KEY_CODE)} // keyboard interaction requirement
         aria-current={active ? 'page' : false}
         tabIndex="0" // add back to natural tab order (automatically removed without an href)
         {...rest}

src/controls/tab-bar/tab-bar.js

@@ -1,13 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import {
-  serializeOptions,
-  noop,
-  toLower,
-  triggerOnKeys,
-  KeyCodes,
-} from '../../utils'
+import { serializeOptions, noop, toLower } from '../../utils'
 import manageFocus from './focus'
 
 /**
@@ -87,20 +81,18 @@ function TabBar({
             role="presentation"
             onKeyDown={(e) => manageFocus(e, { vertical })}
           >
-            <a
+            <button
+              type="button"
               id={'tab-' + toLower(optionValue)} // allow sections to reference tab using `aria-labelledby`
               onClick={() => {
                 onChange(optionValue)
               }}
-              onKeyPress={triggerOnKeys(() => {
-                onChange(optionValue)
-              }, [KeyCodes.ENTER, KeyCodes.SPACE])}
               tabIndex={isActive ? '0' : '-1'} // remove inactive tabs from tab order (controlled with arrow keys)
               role="tab"
               aria-selected={isActive}
             >
               {key}
-            </a>
+            </button>
           </li>
         )
       })}

src/forms/helpers/dropdown-select.js

@@ -23,9 +23,13 @@ function DropdownSelect({ children, className, selectedValues }) {
   return (
     <OutsideClickHandler onOutsideClick={() => toggleExpanded(false)}>
       <div className="dropdown-select">
-        <div className="select-input" onClick={() => toggleExpanded()}>
+        <button
+          type="button"
+          className="select-input"
+          onClick={() => toggleExpanded()}
+        >
           <p>{getLabel(selectedValues)}</p>
-        </div>
+        </button>
         <div
           className={classnames(className, 'options', {
             'is-active': expanded,

src/forms/helpers/omit-label-props.js

@@ -10,6 +10,8 @@ import { omit } from '../../utils'
  * - `tooltip`
  * - `label`
  * - `requiredIndicator`
+ * - `errorComponent`
+ * - `labelComponent`
  *
  * @name omitLabelProps
  * @type Function
@@ -38,7 +40,8 @@ import { omit } from '../../utils'
  *      input: { name, value, onBlur, onChange },
  *      type,
  *      ...rest
- *    } = omitLabelProps(props)
+ *    } = props
+ *    const inputProps = omitLabelProps(rest)
  *    return (
  *      ...
  *    )