feat(ui-overlays): add a 'regular' size tray option

refs: INSTUI-1700

to better align with design there was a need for a size that
fell between the existing small and medium, so regular has
been introduced

TEST PLAN:

- ensure the 'regular' size option works within the examples
- ensure the original x-small, small, medium and large sizes all
  work as before

Change-Id: I6585234e3980c1657b44401ca97788816de012e6
Reviewed-on: https://gerrit.instructure.com/175755
Tested-by: Jenkins
Reviewed-by: Steve Jensen <sejensen@instructure.com>
QA-Review: Daniel Sasaki <dsasaki@instructure.com>
Product-Review: Kyle Follett <kfollett@instructure.com>

Author: pamhiett

packages/ui-overlays/src/components/Tray/README.md

@@ -52,6 +52,7 @@ class Example extends React.Component {
     const sizeVariants = [
       {value: 'x-small', label: 'Extra Small'},
       {value: 'small', label: 'Small'},
+      {value: 'regular', label: 'Regular'},
       {value: 'medium', label: 'Medium'},
       {value: 'large', label: 'Large'}
     ]

packages/ui-overlays/src/components/Tray/index.js

@@ -81,7 +81,7 @@ class Tray extends Component {
     /*
      * The size (width) of the `<Tray />` when placement is `start` or `end`
      */
-    size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
+    size: PropTypes.oneOf(['x-small', 'small', 'regular', 'medium', 'large']),
 
     /**
     * Placement to determine where the `<Tray />` should display in the viewport

packages/ui-overlays/src/components/Tray/styles.css

@@ -38,6 +38,10 @@
     width: var(--smallWidth);
   }
 
+  &.regular {
+    width: var(--regularWidth);
+  }
+
   &.medium {
     width: var(--mediumWidth);
   }

packages/ui-overlays/src/components/Tray/theme.js

@@ -32,6 +32,7 @@ export default function ({ colors, breakpoints, shadows, stacking, borders }) {
     boxShadow: shadows.depth3,
     xSmallWidth: breakpoints.xSmall,
     smallWidth: '20em', // 368px
+    regularWidth: breakpoints.small,
     mediumWidth: breakpoints.medium,
     largeWidth: breakpoints.large,
     zIndex: stacking.topmost