Port v9 to master

docs/contributor-docs/contributing.md

@@ -33,7 +33,7 @@ Please follow the steps on the [how to build guide page](#building-instui).
 ### Development
 
 1. Run `npm run build:watch` to build all of the packages for a development environment and watch for changes.
-1. Run `npm run dev` to start the dev server to run/develop examples and documentation. You can then visit [http://localhost:8080](http://localhost:8080) in a browser. When you make changes to the source code you should see the page auto-reload.
+1. Run `npm run dev` to start the dev server to run/develop examples and documentation. You can then visit [http://localhost:9090](http://localhost:9090) in a browser. When you make changes to the source code you should see the page auto-reload.
 1. Run `npm run test:watch -- --scope @instructure/[package name]` to run the tests for 'package name' and watch for changes.
 1. Run `npm run test` to run all the tests for every package.
 
@@ -79,7 +79,7 @@ Please update the documentation and examples with any changes.
    2. Add the dependency in `packages/__docs__/package.json`.
    3. Add the reference in `packages/__docs__/tsconfig.build.json`.
 6. Stop the dev server (if you have it running), and run `npm run dev` to pick up the new package.
-7. Visit [http://localhost:8080](http://localhost:8080) in a browser. You should see your package listed in the docs.
+7. Visit [http://localhost:9090](http://localhost:9090) in a browser. You should see your package listed in the docs.
 
 ### Adding a component
 
@@ -99,7 +99,7 @@ Please update the documentation and examples with any changes.
 8. Run `npm run bootstrap` to generate the `es`, `lib` and `types` directories for your component.
 9. Add your component to `packages/__docs__/components.js`.
 10. Stop the dev server (if you have it running), and run `npm run dev` to pick up the new component.
-11. Visit [http://localhost:8080](http://localhost:8080) in a browser. You should see your component listed in the docs.
+11. Visit [http://localhost:9090](http://localhost:9090) in a browser. You should see your component listed in the docs.
 12. Start making changes to your component, and watch it update in the browser automatically.
 13. Resolve all `FIXME` comments in the generated code (except in the `MyComponentLocator.ts`).
 

docs/contributor-docs/dev-commands.md

@@ -11,7 +11,7 @@ This is a quick developer reference for common Instructure UI repository command
 | Command                                         | Description                                                                                                                                                                                                                                                                                                                                    |
 | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `npm run bootstrap`                             | Clean all node modules and build output, reinstall dependencies, create fresh build including regenerating design tokens and type declaration files.                                                                                                                                                                                           |
-| `npm run dev`                                   | Run a local instance of the documentation app in dev mode. Docs will be served at `http://0.0.0.0:8080`                                                                                                                                                                                                                                        |
+| `npm run dev`                                   | Run a local instance of the documentation app in dev mode. Docs will be served at `http://0.0.0.0:9090`                                                                                                                                                                                                                                        |
 | `npm run start`                                 | Run a local instance of the documentation app in production mode. The urls where the docs are being served will be included in the output of this command.                                                                                                                                                                                     |
 | `npm run build`                                 | Run the build command for all Instructure UI packages. Similar to bootstrap, but without the cleaning steps, installation of dependencies, and without the token and type generation.                                                                                                                                                          |
 | `npm run build:watch`                           | Identical to `npm run build` but will watch for changes. Note: this command is rarely necessary to use. If you are running `npm run dev`, the docs app will already be watching for any changes for components.                                                                                                                                |

packages/__docs__/README.md

@@ -8,4 +8,4 @@ From the root of the `instructure-ui` repo:
 
 1. Run `npm install`
 1. Run `npm run dev`
-1. Open [http://localhost:8080](http://localhost:8080) in your browser
+1. Open [http://localhost:9090](http://localhost:9090) in your browser

packages/__docs__/package.json

@@ -13,7 +13,7 @@
   "scripts": {
     "prestart": "npm run build:scripts:ts && node lib/build-docs.mjs",
     "start": "npm run prestart && ui-scripts bundle && ui-scripts server -p 8001",
-    "start:watch": "npm run prestart && ui-scripts bundle --watch -p 8080",
+    "start:watch": "npm run prestart && ui-scripts bundle --watch -p 9090",
     "bundle": "npm run prestart && ui-scripts bundle",
     "lint": "ui-scripts lint",
     "lint:fix": "ui-scripts lint --fix",

packages/ui-number-input/src/NumberInput/README.md

@@ -2,7 +2,9 @@
 describes: NumberInput
 ---
 
-A controlled number input field. Note that this field **does not work
+A controlled number input field.
+By deafult, it renders a `<intput type="number">` to the DOM. However, if you need any string value, use the `allowStringValue` flag. Only use this if absolutely necessary, since it could be confusing for screenreader users.
+Note that this field **does not work
 uncontrolled** - you must pass event handlers if you want it to respond to
 user input.
 
@@ -300,12 +302,11 @@ type: embed
 ---
 <Guidelines>
   <Figure recommendation="yes" title="Do">
-    <Figure.Item>Use when the input is limited to a number (integer, rational, or irrational expressed with decimal points)</Figure.Item>
+    <Figure.Item>Use when you need increment/decrement functionality</Figure.Item>
     <Figure.Item>Use labels at the top or to the left of the input field</Figure.Item>
   </Figure>
   <Figure recommendation="no" title="Don't">
     <Figure.Item>Place labels or text strings to the right of the input field</Figure.Item>
-    <Figure.Item>Use for alphanumeric input</Figure.Item>
   </Figure>
 </Guidelines>
 ```

packages/ui-number-input/src/NumberInput/index.tsx

@@ -75,7 +75,8 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
     size: 'medium',
     display: 'block',
     textAlign: 'start',
-    inputMode: 'numeric'
+    inputMode: 'numeric',
+    allowStringValue: false
   }
 
   state: NumberInputState = { hasFocus: false }
@@ -236,7 +237,8 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
       showArrows,
       value,
       width,
-      styles
+      styles,
+      allowStringValue
     } = this.props
 
     const { interaction } = this
@@ -274,7 +276,7 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
               css={this.props.styles?.input}
               aria-invalid={this.invalid ? 'true' : undefined}
               id={this.id}
-              type="number"
+              type={allowStringValue ? 'text' : 'number'}
               inputMode={this.props.inputMode}
               placeholder={placeholder}
               ref={this.handleInputRef}

packages/ui-number-input/src/NumberInput/props.ts

@@ -161,6 +161,11 @@ type NumberInputOwnProps = {
    * The text alignment of the input.
    */
   textAlign?: 'start' | 'center'
+
+  /**
+   * sets the input type to string and allows string as value
+   */
+  allowStringValue?: boolean
 }
 
 type NumberInputState = {
@@ -220,7 +225,8 @@ const propTypes: PropValidators<PropKeys> = {
   onIncrement: PropTypes.func,
   onKeyDown: PropTypes.func,
   inputMode: PropTypes.oneOf(['numeric', 'decimal', 'tel']),
-  textAlign: PropTypes.oneOf(['start', 'center'])
+  textAlign: PropTypes.oneOf(['start', 'center']),
+  allowStringValue: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -243,7 +249,8 @@ const allowedProps: AllowedPropKeys = [
   'onIncrement',
   'onKeyDown',
   'inputMode',
-  'textAlign'
+  'textAlign',
+  'allowStringValue'
 ]
 
 export type {

packages/ui-scripts/README.md

@@ -58,7 +58,7 @@ Deprecates ALL of a certain version of instUI npm packages by running `npm depre
 
 To build component examples and start up a dev server with hot reloading:
 
-`npm run ui-scripts examples --watch -p 8080`
+`npm run ui-scripts examples --watch -p 9090`
 
 To build component examples for deploying:
 
@@ -98,7 +98,7 @@ To publish all packages (defaults to current version):
 
 To start up a server to test production builds of examples or docs:
 
-`npm run ui-scripts server -p 8080`
+`npm run ui-scripts server -p 9090`
 
 #### npm tag
 

packages/ui-scripts/lib/build/examples.js

@@ -32,7 +32,7 @@ export default {
       alias: 'p',
       type: 'number',
       describe: 'port to use',
-      default: 8080
+      default: 9090
     })
     yargs.option('watch', {
       boolean: true,

packages/ui-scripts/lib/build/webpack.js

@@ -35,7 +35,7 @@ export default {
   handler: async (argv) => {
     const { NODE_ENV, DEBUG, OMIT_INSTUI_DEPRECATION_WARNINGS } = process.env
 
-    let port = argv.port || '8080'
+    let port = argv.port || '9090'
 
     let command, webpackArgs
 

packages/ui-scripts/lib/commands/server.js

@@ -31,7 +31,7 @@ export default {
       alias: 'p',
       type: 'number',
       describe: 'port to use.',
-      default: 8080
+      default: 9090
     }
   },
   handler: (argv) => {

packages/ui-table/src/Table/Head/index.tsx

@@ -68,7 +68,7 @@ class Head extends Component<TableHeadProps> {
     let sortable = false
     if (firstRow && firstRow.props && firstRow.props.children) {
       Children.forEach(firstRow.props.children, (grandchild) => {
-        if (grandchild.props.onRequestSort) {
+        if (grandchild?.props?.onRequestSort) {
           sortable = true
           return
         }