chore(many): remove hash symbol from internal links

INSTUI-4750

Author: ToMESSKa

docs/contributor-docs/api-guidelines.md

@@ -8,7 +8,7 @@ order: 4
 
 ### Component Properties
 
-- All components should pass through additional props down to the root DOM element using the `passthroughProps` utility. (e.g. `<div {...passthroughProps(this.props)}>`). Note that in addition to allowing only valid DOM node attributes, `passthroughProps` will remove the `className` and `style` props to prevent unexpected style issues. These need to be set explicitly and used with caution. It also removes the `styles` and `makesStyles` properties added by the [withStyle](#withStyle) decorator.
+- All components should pass through additional props down to the root DOM element using the `passthroughProps` utility. (e.g. `<div {...passthroughProps(this.props)}>`). Note that in addition to allowing only valid DOM node attributes, `passthroughProps` will remove the `className` and `style` props to prevent unexpected style issues. These need to be set explicitly and used with caution. It also removes the `styles` and `makesStyles` properties added by the [withStyle](withStyle) decorator.
 - Avoid props that could be computed from other props. (e.g. prefer `<Select filter={handleFilter} />` over `<Select shouldFilter filter={handleFilter} />`. Prefer determining whether filtering should happen based on the presence of the `filter` function prop.)
 - Avoid situations where certain prop combinations are not supported. Prefer splitting the component into separate components with fewer props.
 - Set default prop values for non-required props when possible.
@@ -47,7 +47,7 @@ order: 4
 
 - In the `styles.ts`, use the name of the component in camelCase (e.g. `appNav`) as the key of the root element's style object. Use camelCase for the keys of child elements as well (e.g. `list` and `listItem`).
 - All style object names should be semantic (describe the content, not what it looks like).
-- We make use of the `label` property of [Emotion.js](https://emotion.sh/) so that it gets displayed in the generated class name for easy readability and targetability. We use a naming convention based on [BEM naming convention](#http://getbem.com/naming/):
+- We make use of the `label` property of [Emotion.js](https://emotion.sh/) so that it gets displayed in the generated class name for easy readability and targetability. We use a naming convention based on [BEM naming convention](http://getbem.com/naming/):
   - For the root element, add a label with the name of the component in camelCase \
     (e.g. `appNav: { label: 'appNav' }`).
   - For the child elements, use the double underscore separator to indicate the parent-child relation with the `[rootElementName]__[childName}` format \

docs/contributor-docs/contributing.md

@@ -23,7 +23,7 @@ constructed from the existing ones. For these reasons adding a new component has
 
 ### Building InstUI from the source
 
-Please follow the steps on the [how to build guide page](#building-instui).
+Please follow the steps on the [how to build guide page](building-instui).
 
 ### Running the documentation app
 
@@ -41,7 +41,7 @@ Please follow the steps on the [how to build guide page](#building-instui).
 
 ### Testing
 
-See the [testing documentation](#testing-overview) for details.
+See the [testing documentation](testing-components) for details.
 
 ### Linters and Code Formatting
 
@@ -75,6 +75,6 @@ Run `git commit` to commit your changes and follow our commit message format.
 
 All components should:
 
-1. Be accessible (See the [accessibility requirements](#accessibility) for more information).
+1. Be accessible (See the [accessibility requirements](accessibility) for more information).
 1. Support RTL languages.
 1. Localize all dates, times, numbers and strings (or require localized content passed in via props).

docs/contributor-docs/theming/theming-basics.md

@@ -32,7 +32,7 @@ It accepts a `theme` prop, which should be an Instructure UI theme.
 
 It can be used in two ways. On the top level, you can provide the theme for the whole application or nested anywhere inside it. You can also provide an object with theme or component theme overrides.
 
-**For detailed usage info and examples, see the [InstUISettingsProvider](#InstUISettingsProvider) documentation page.**
+**For detailed usage info and examples, see the [InstUISettingsProvider](InstUISettingsProvider) documentation page.**
 
 ```jsx
 ---
@@ -53,13 +53,13 @@ const RenderApp = () => {
 
 ### Theme overrides
 
-A themeable component’s theme can be configured by wrapping it in an [InstUISettingsProvider](#InstUISettingsProvider) component, and/or set explicitly via its `themeOverride` prop.
+A themeable component’s theme can be configured by wrapping it in an [InstUISettingsProvider](InstUISettingsProvider) component, and/or set explicitly via its `themeOverride` prop.
 
 #### themeOverride prop
 
 The themeable components accept a `themeOverride` prop which lets you override it's component theme object. It accepts an override object or a function, which has the current `componentTheme` as its parameter.
 
-**See more on the [withStyle](#withStyle/#applying-themes) and [Using theme overrides](/#using-theme-overrides) doc pages for more info.**
+**See more on the [withStyle](withStyle/#applying-themes) and [Using theme overrides](/#using-theme-overrides) doc pages for more info.**
 
 ```js
 ---

docs/contributor-docs/theming/theming-class-based.md

@@ -6,7 +6,7 @@ order: 3
 
 ## Making class-based themed components
 
-Make a component themeable with the [withStyle](#withStyle) decorator. It adds a `makeStyles` function and the generated `styles` object to the decorated Component's props.
+Make a component themeable with the [withStyle](withStyle) decorator. It adds a `makeStyles` function and the generated `styles` object to the decorated Component's props.
 
 Import the style generator (`generateStyle`) from `styles.js` and the component theme generator (`generateComponentTheme`) from `theme.js`, and pass them to the decorator.
 
@@ -80,14 +80,14 @@ const generateComponentTheme = (theme) => {
 export default generateComponentTheme
 ```
 
-The arguments to the generator function are the [global theme variables](#canvas). In the above example, we've defined the default theme for the Button component.
+The arguments to the generator function are the [global theme variables](canvas). In the above example, we've defined the default theme for the Button component.
 
 The purpose of the generator function is to take the global variables and apply them as values to the functional component level variables.
 When coming up with names for the component level variables, try to make them describe how they are used in the component (vs describing the variable value).
 
 ### Supporting multiple themes
 
-If we want to make the Button transform the global theme variables differently with another theme, (e.g. [canvas-high-contrast](#canvas-high-contrast)) we can make specific styling for that theme:
+If we want to make the Button transform the global theme variables differently with another theme, (e.g. [canvas-high-contrast](canvas-high-contrast)) we can make specific styling for that theme:
 
 ```js
 ---
@@ -127,7 +127,7 @@ The rest of the variables will pick up from the default Button theme generator (
 
 In the `styles.js` file, the `generateStyle` method receives the theme variable object (`componentTheme`) generated by `theme.js`.
 
-Add your styling for each element in the component, and give them [labels](https://emotion.sh/docs/labels#gatsby-focus-wrapper) for easy readability and targetability. _Naming convention_: similar to [BEM naming convention](#http://getbem.com/naming/), use the name of the component in camelCase for the root element ('button'), and the double underscore suffix for children ('button\_\_icon').
+Add your styling for each element in the component, and give them [labels](https://emotion.sh/docs/labels#gatsby-focus-wrapper) for easy readability and targetability. _Naming convention_: similar to [BEM naming convention](http://getbem.com/naming/), use the name of the component in camelCase for the root element ('button'), and the double underscore suffix for children ('button\_\_icon').
 
 Use [Emotion's Object Styles documentation](https://emotion.sh/docs/object-styles) as a guide to add styles.
 

docs/contributor-docs/theming/theming-functional.md

@@ -7,7 +7,7 @@ order: 2
 ## Making InstUI-like components with theming
 
 InstUI uses [Emotion](https://emotion.sh/docs/introduction) under the hood to theme and style its components.
-If you want to read about the design behind the system and how to build `class-based` components with InstUI, please read [this](#theming-class-based).
+If you want to read about the design behind the system and how to build `class-based` components with InstUI, please read [this](theming-class-based).
 
 This page will show you how to build `functional` react components with InstUI.
 

docs/contributor-docs/upgrade-guide.md

@@ -0,0 +1,123 @@
+---
+title: Upgrade Guide for Version 10.0
+category: Guides
+order: 98
+---
+
+# Upgrade Guide for Version 10
+
+## Introduction
+
+InstUI v10 is a major release with a new theming color system. It has been simplified and rewritten to make our design language easier to understand and more uniform.
+
+With the new system some old designs could be more challenging or very hard to implement. This is intentional, we wanted
+to avoid situations when someone really changes the look and feel of their application.
+In these cases, make sure you talk with your designer and update the UI according to the new designs.
+
+The revised designs should result in better accessibility ([WCAG 2.1](https://www.w3.org/TR/WCAG21/) compliance!), less theming code and more uniform look and feel.
+
+## Step-by-step guide
+
+We recommend upgrading your application for each major version gradually, e.g. if you plan to update from 8.x to 10.x,
+then migrate first to the latest 9.x and then to version 10.
+
+The places where your code can break during the upgrade are related to theme overrides, color props and color utilities.
+Please check the [theming components](theming-components) guide to understand the new color system.
+
+If you override the theme colors, you must use the new colors provided either in the `canvas-high-contrast` or in the `canvas` theme object.
+The previous color system has been removed, the old color names are no longer available.
+
+### `Instructure` theme is removed
+
+Instructure theme (`@instructure/instructure-theme`) is no longer maintained and not compatible with InstUI v10.
+If you were using it, you need to switch to the `canvas` or the `canvas-high-contrast` theme.
+
+### Component level color overrides
+
+If you had component level overrides of colors you need to migrate using the following table:
+
+| Old                | New (v10)                     |
+| ------------------ | ----------------------------- |
+| `colors.brand`     | `colors.contrasts.blue4570`   |
+| `colors.link`      | `colors.contrasts.blue4570`   |
+| `colors.electric`  | `colors.contrasts.blue4570`   |
+| `colors.shamrock`  | `colors.contrasts.green4570`  |
+| `colors.barney`    | `colors.contrasts.blue4570`   |
+| `colors.crimson`   | `colors.contrasts.red4570`    |
+| `colors.fire`      | `colors.contrasts.orange4570` |
+| `colors.licorice`  | `colors.contrasts.grey125125` |
+| `colors.oxford`    | `colors.contrasts.grey100100` |
+| `colors.ash`       | `colors.contrasts.grey4570`   |
+| `colors.slate`     | `colors.contrasts.grey4570`   |
+| `colors.tiara`     | `colors.contrasts.grey1214`   |
+| `colors.porcelain` | `colors.contrasts.grey1111`   |
+| `colors.white`     | `colors.contrasts.white1010`  |
+
+You can use the latest [codemod](ui-codemods) to automate this process.
+
+InstUI v9:
+
+```jsx
+---
+type: code
+---
+<Heading level="h3" color="primary"
+         themeOverride={{primaryColor: canvas.colors.brand}}>
+    I have nice color!
+</Heading>
+```
+
+InstUI v10:
+
+```jsx
+---
+type: code
+---
+<Heading level="h3" margin="small small" color="primary"
+         themeOverride={{primaryColor: canvas.colors.contrasts.blue4570}}>
+    some nice blue text.
+</Heading>
+```
+
+Notice, that the new values use `colors.contrasts`. Please do not use `colors.primitives` for anything.
+
+### Theme level color overrides
+
+InstUI v9 theme level properties `text`, `background`, `border` (for example `backgroundLightest` or `textDarkest`) have been removed.
+To upgrade these props you need to find and override component level theme variables for each component that used the replaced property.
+**This is heavily discouraged, upcoming designs should not necessitate theme overrides.**
+
+For example, if you had `backgroundLightest` overridden on the theme level, you need to find every component whose theme
+utilizes `backgroundLightest` and override them individually in each component. Some of these components are `Alert`, `Avatar`, `Billboard`, `View` and many more.
+
+InstUI v9:
+
+```jsx
+---
+type: code
+---
+
+<InstUISettingsProvider
+  theme={{
+    themeOverrides: {
+      canvas: {
+        colors: { backgroundLightest: 'orange' }
+      }
+    }
+  }}
+>
+```
+
+InstUI v10:
+
+```jsx
+---
+type: code
+---
+
+<Alert themeOverride={{background: 'orange'}}></Alert>
+<Avatar themeOverride={{background: 'orange'}}></Avatar>
+<Billboard themeOverride={{background: 'orange'}}></Billboard>
+<Tabs themeOverride={{defaultBackground: 'orange', scrollFadeColor:'orange'}}></Tabs>
+//...and all other components that use color.backgroundLightest
+```

docs/contributor-docs/v11-upgrade-guide.md

@@ -0,0 +1,56 @@
+---
+title: Upgrade Guide for Version 11
+category: Guides
+order: 99
+isWIP: true
+---
+
+# Upgrade Guide for Version 11 (WIP)
+
+## Removal of deprecated props/components/APIs
+
+### InstUISettingsProvider
+
+[InstUISettingsProvider](/#InstUISettingsProvider)'s `as` prop was removed, it will always render as a `<span>` (note: it will only render anything to the DOM if you provide a value to the `dir` prop.). The provided codemod will remove this prop automatically (see below).
+
+### Table
+
+[Table](/#Table) is now using [TableContext](TableContext) to pass down data to its child components, the following props are no longer passed down to their children (This should only affect you if you wild custom table rows or cells):
+
+| Component | prop        | Substitute / Notes              |
+| --------- | ----------- | ------------------------------- |
+| `Row`     | `isStacked` | is now stored in `TableContext` |
+| `Body`    | `isStacked` | is now stored in `TableContext` |
+| `Body`    | `hover`     | is now stored in `TableContext` |
+| `Body`    | `headers`   | is now stored in `TableContext` |
+
+### Theming engine changes
+
+| Deprecation                                | What to use instead?                                                                                  |
+| ------------------------------------------ | ----------------------------------------------------------------------------------------------------- |
+| `canvas.use()`, `canvasHighContrast.use()` | Wrap all your application roots in `<InstUISettingsProvider>`                                         |
+| `variables` field on theme objects         | Use `canvas.borders` instead of `canvas.variables.borders` (same for all othere fields)               |
+| `@instructure/theme-registry` package      | This added the removed functions above. Wrap all your application roots in `<InstUISettingsProvider>` |
+
+## API Changes
+
+- `ui-dom-utils`/`getComputedStyle` can now return `undefined`: In previous versions sometimes returned an empty object which could lead to runtime exceptions when one tried to call methods of `CSSStyleDeclaration` on it.
+- TO-DO: [TimeSelect](/#TimeSelect) as a controlled component can now return an '' instead of a valid date when its input field is cleared. In previous versions it always reverted to the last selected value when the input field was cleared and lost focus.
+
+## Codemods
+
+To ease the upgrade we provide codemods that will automate most of the changes. Pay close attention to its output, it cannot refactor complex code! The codemod scripts can be run via the following commands:
+
+```sh
+---
+type: code
+---
+npm install @instructure/ui-codemods@11
+npx [email protected] -t node_modules/@instructure/ui-codemods/lib/instUIv11Codemods.ts <path> --usePrettier=false
+```
+
+Options for the codemod:
+
+- `filename`: if specified then emitted warnings are written to this file.
+- `usePrettier`: if `true` the transformed code will be run through Prettier. You can customize this through a [Prettier
+  config file](https://prettier.io/docs/configuration.html)

docs/getting-started/accessibility.md

@@ -11,7 +11,7 @@ We aim to make our software accessible to everyone, including those with vision,
 
 ### Color Contrast
 
-Our [default theme](#canvas) colors meet meets WCAG 2.1 AA rules for color contrast, and our [high contrast theme](#canvas-high-contrast) meets WCAG 2.1 AAA rules for color contrast. This ensures sufficient color contrast between elements so that users with low vision or color blindness can view and use our components.
+Our [default theme](canvas) colors meet meets WCAG 2.1 AA rules for color contrast, and our [high contrast theme](canvas-high-contrast) meets WCAG 2.1 AAA rules for color contrast. This ensures sufficient color contrast between elements so that users with low vision or color blindness can view and use our components.
 
 ### Keyboard Navigation
 

docs/getting-started/theming-components.md

@@ -7,10 +7,10 @@ relevantForAI: true
 
 ## Themes
 
-Instructure UI ships with two built-in themes: [canvas theme](#canvas) (default), [high contrast canvas theme](#canvas-high-contrast).
+Instructure UI ships with two built-in themes: [canvas theme](canvas) (default), [high contrast canvas theme](canvas-high-contrast).
 They are meant to be used together, `canvas` provides 4.5:1 contrast, while `canvas-high-contrast` 7.0:1.
 
-You can change the theme used with the [InstUISettingsProvider](#InstUISettingsProvider) component:
+You can change the theme used with the [InstUISettingsProvider](InstUISettingsProvider) component:
 
 ```jsx
 ---
@@ -29,7 +29,7 @@ render() {
 For more details on how to customize themes or apply different ones to parts of you application see [Using Theme Overrides](/#using-theme-overrides).
 
 If you are interested in how InstUI's theming engine works and/or you want to make your own components that use the themes,
-read our documentation on the theming engine [here](#theming-basics).
+read our documentation on the theming engine [here](theming-basics).
 
 ## Colors