Routine maintenance 2023-08 (#596)

* Run yarn upgrade

* Update non-breaking majors

* Update eslint

* Upgrade size-limit

* Update jest

* Update yarn.lock

* Address prop type errors

* Add alt for decorative image

* Use button instead of link

* Update tab-bar tests

* Update paginator a11y linting

* Use a button!

* Address color picker issues

* Address input label

* Add missing type

* Add migration guide

* Fix input-label tests

* Ignore mocks in prod builds

* Add publish GH action

* Upgrade latest lint-staged

* Take recent upgrades

* Style tooltip trigger more globally

Author: chawes13

.github/workflows/publish.yml

@@ -0,0 +1,23 @@
+name: Publish
+run-name: ${{ github.actor }} published a new release
+on:
+  release:
+    types: [published]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out latest code
+        uses: actions/checkout@v3
+      - name: Set up node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+          scope: '@launchpadlab'
+      - name: Install dependencies
+        run: HUSKY=0 yarn --frozen-lockfile
+      - name: Publish package on NPM
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.storybook/styles/components/_forms.scss

@@ -159,11 +159,15 @@ Checkbox
     display: inline-block;
     width: calc(100% - 32px);
   }
+}
 
-  .tooltip-trigger {
-    float: initial;
-    width: auto;
-  }
+.tooltip-trigger {
+  float: initial;
+  width: auto;
+  padding: 0;
+  border: none;
+  background: none;
+  margin-left: 10px;
 }
 
 input[type='checkbox'] {
@@ -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"
   },
@@ -18,8 +18,8 @@
   "scripts": {
     "start": "yarn && yarn build:development",
     "build": "yarn build:cjs && yarn build:esm && yarn build:styles",
-    "build:cjs": "babel src --out-dir lib",
-    "build:esm": "BABEL_ENV=esm babel src --out-dir esm",
+    "build:cjs": "babel src --out-dir lib --ignore src/**/__mocks__/**/*.js",
+    "build:esm": "BABEL_ENV=esm babel src --out-dir esm --ignore src/**/__mocks__/**/*.js",
     "build:styles": "cp -r src/styles lib/styles && sass src/styles:lib/styles",
     "build:development": "BABEL_ENV=esm babel src --watch --out-dir esm",
     "clean": "rm -rf lib esm",
@@ -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",
-    "lint-staged": "^13.0.3",
-    "prettier": "^2.7.1",
+    "jest-environment-jsdom": "^29.6.2",
+    "lint-staged": "^14.0.1",
+    "prettier": "^3.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "redux": "^4.1.2",
-    "regenerator-runtime": "^0.13.9",
+    "regenerator-runtime": "^0.14.0",
     "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>
         )
       })}