refactor(ui-view,ui-flex): add examples on how to override sharedTokens, fix docs console errors

Author: matyasf

docs/guides/upgrade-guide.md

@@ -42,20 +42,17 @@ type: example
 ---
 <InstUISettingsProvider
   theme={{
-  themeOverrides: {
-    canvas: {
-      componentOverrides: {
-        SharedTokens: {
-          focusOutline: {
-            infoColor: 'red',
-            offset: '2rem'
-          }
+    newTheme: { // TODO remove this when we remove the old theme
+      sharedTokens: {
+        focusOutline: {
+          infoColor: 'green',
+          width: '0.4rem',
+          offset: '0rem'
         }
       }
     }
-  }
-}}>
-  <TextInput renderLabel="Name" placeholder="Doe, John Doe"/>
+  }}>
+  <TextInput renderLabel="Name" placeholder="Note: Change example when the old theme is renamed!"/>
 </InstUISettingsProvider>
 ```
 

docs/guides/using-theme-overrides.md

@@ -105,7 +105,7 @@ type: example
 </InstUISettingsProvider>
 ```
 
-### Overriding theme for a specific component in a subtree
+### Overriding theme for all components in a subtree
 
 You can override the theme variables of specific components too with the `componentOverrides` key. You can do this for every theme or for just a given theme.
 
@@ -180,7 +180,7 @@ type: code
 </InstUISettingsProvider>
 ```
 
-#### Override function
+#### Override function for all instances
 
 The `InstUISettingsProvider` accepts a `function`. The override function's first parameter is the currently applied theme object. It should return a valid theme or override object.
 
@@ -214,7 +214,7 @@ Themeable components (that implement the [withStyle](withStyle) decorator) accep
 
 The available theme variables are always displayed at the bottom of the component's page (e.g.: [Button component theme variables](/#Button/#ButtonTheme)).
 
-#### Override object
+#### Override object for a single component
 
 ```js
 ---
@@ -256,7 +256,7 @@ type: example
 </div>
 ```
 
-#### Override function
+#### Override function for a single component
 
 The override function's first parameter is the component's own theme object, the second is the main theme object.
 
@@ -348,6 +348,68 @@ const generateStyle = (componentTheme) => {
 }
 ```
 
+### Theme overrides for focus rings, border radii, shadows, spacing
+
+Certain visuals as of now styled via a central object called `SharedTokens`. You can override this too, for example:
+
+```js
+---
+type: example
+---
+<InstUISettingsProvider
+  theme={{
+    newTheme: { // TODO remove this when we remove the old theme
+      sharedTokens: {
+        focusOutline: {
+          infoColor: 'green',
+          width: '0.4rem',
+          offset: '0rem'
+        },
+        boxShadow: {
+          // View shadows:
+          // resting: elevation1,
+          // above: elevation2,
+          // topmost: elevation4
+          elevation1: {
+            "0": {
+              color: 'blue',
+              blur: '1rem',
+              spread: '0.2rem'
+            }
+          }
+        },
+        spacing: {
+          general: {
+            space2xs: '2rem' // component margin/padding/Flex gap spacing
+          }
+        },
+        legacy: {
+          radiusSmall: '2rem', // View border radius
+        },
+        strokeWidth: {
+          sm: '1rem' // View border width
+        }
+      },
+    }
+  }}>
+  <TextInput renderLabel="Fancy focus ring!" placeholder="TODO: Change example when the old theme is renamed!"/>
+  <View
+    as="span"
+    display="inline-block"
+    maxWidth="15rem"
+    margin="general.space2xs"
+    padding="small"
+    background="primary"
+    shadow="resting"
+    borderRadius="small"
+    borderWidth="small"
+  >
+    Here is a View with a blue shadow. and custom borders
+  </View>
+  <Avatar name="Spacing Override" margin="general.space2xs" />
+</InstUISettingsProvider>
+```
+
 ### Branding (user customizable theming)
 
 The `canvas` theme has specific theme variables that are meant as a basis to provide end users a customizability of this theme, e.g. a university can use their own colors throughout the UI. This is used by [Canvas's theme editor](https://community.canvaslms.com/t5/Admin-Guide/How-do-I-create-a-theme-for-an-account-using-the-Theme-Editor/ta-p/242).
@@ -492,7 +554,7 @@ const Example = () => {
 
           <hr style={{width:'100%'}}/>
           <h3><code>SideNavBar</code> branding</h3>
-          <Flex gap="large small">
+          <Flex gap="small">
             <Flex.Item size="45%">
               <TextInput renderLabel="ic-brand-global-nav-bgd" value={icBrandGlobalNavBgd} onChange={(e, v) => setIcBrandGlobalNavBgd(v)}/>
               <TextInput renderLabel="ic-global-nav-link-hover" value={icGlobalNavLinkHover} onChange={(e, v) => setIcGlobalNavLinkHover(v)}/>

packages/ui-flex/src/Flex/index.tsx

@@ -126,7 +126,9 @@ class Flex extends Component<FlexProps> {
 
     const gapValuesArray = gap?.split(' ')
     if (gapValuesArray!.length > 1 && wrap === 'no-wrap')
-      console.warn('The `gap` prop is supplied with an improper `wrap` prop.')
+      console.warn(
+        'The `gap` prop is supplied with an improper `wrap=no-wrap` prop.'
+      )
     if (children && Children.count(children) > 0) {
       return (
         <View

packages/ui-view/src/View/README.md

@@ -435,7 +435,7 @@ type: example
   </View>
   <View focusWithin>
     if the <code>focusWithin</code> prop is <code>true</code>, the View will display the focus ring if any of its descendants receives focus
-    <div tabindex="0" role="button" style={{outline: 'none'}}>Tab here to see the focus outline</div>
+    <div tabIndex="0" role="button" style={{outline: 'none'}}>Tab here to see the focus outline</div>
   </View>
 </Flex>
 ```