@instructure/ui-motion 8.11.2-snapshot.52 → 8.11.2-snapshot.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-motion",
-  "version": "8.11.2-snapshot.52+d51a85e4e",
+  "version": "8.11.2-snapshot.64+fa07135b5",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,19 +24,19 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.11.2-snapshot.52+d51a85e4e",
-    "@instructure/ui-test-locator": "8.11.2-snapshot.52+d51a85e4e",
-    "@instructure/ui-test-utils": "8.11.2-snapshot.52+d51a85e4e",
-    "@instructure/ui-themes": "8.11.2-snapshot.52+d51a85e4e"
+    "@instructure/ui-babel-preset": "8.11.2-snapshot.64+fa07135b5",
+    "@instructure/ui-test-locator": "8.11.2-snapshot.64+fa07135b5",
+    "@instructure/ui-test-utils": "8.11.2-snapshot.64+fa07135b5",
+    "@instructure/ui-themes": "8.11.2-snapshot.64+fa07135b5"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.11.2-snapshot.52+d51a85e4e",
-    "@instructure/shared-types": "8.11.2-snapshot.52+d51a85e4e",
-    "@instructure/ui-dom-utils": "8.11.2-snapshot.52+d51a85e4e",
-    "@instructure/ui-react-utils": "8.11.2-snapshot.52+d51a85e4e",
-    "@instructure/ui-testable": "8.11.2-snapshot.52+d51a85e4e",
-    "@instructure/ui-utils": "8.11.2-snapshot.52+d51a85e4e",
+    "@instructure/emotion": "8.11.2-snapshot.64+fa07135b5",
+    "@instructure/shared-types": "8.11.2-snapshot.64+fa07135b5",
+    "@instructure/ui-dom-utils": "8.11.2-snapshot.64+fa07135b5",
+    "@instructure/ui-react-utils": "8.11.2-snapshot.64+fa07135b5",
+    "@instructure/ui-testable": "8.11.2-snapshot.64+fa07135b5",
+    "@instructure/ui-utils": "8.11.2-snapshot.64+fa07135b5",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "d51a85e4ec89d499dd5466623fc2efc85e3bddcf"
+  "gitHead": "fa07135b5601d3268295e5747f5950721a574d4f"
 }

package/src/Transition/README.md

@@ -98,7 +98,7 @@ render(<Example />)
 
 `slide` transitions the horizontal or vertical position of the element. The slide direction can be
 internationalized for right to left (rtl) languages. The following example uses the
-[ApplyTextDirection](#ApplyTextDirection) util to mirror the slide direction for rtl.
+[TextDirectionContext](#TextDirectionContext) util to mirror the slide direction for rtl.
 
 ```js
 ---
@@ -106,6 +106,9 @@ render: false
 example: true
 ---
 class Example extends React.Component {
+
+  static contextType = TextDirectionContext
+
   constructor (props) {
     super(props)
     this.state = {
@@ -136,57 +139,51 @@ class Example extends React.Component {
       up: 'up',
       down: 'down'
     }
-
     return mirror[direction]
   };
 
   render () {
+    const rtl = this.context === 'rtl'
+    const direction = rtl ? this.mirrorDirection(this.state.direction) : this.state.direction
+    const directionVariants = [
+      {value: 'left', label: 'Start'},
+      {value: 'right', label: 'End'},
+      {value: 'down', label: 'Down'},
+      {value: 'up', label: 'Up'}
+    ]
     return (
-      <ApplyTextDirection>
-        {(dir, rtl) => {
-          const direction = rtl ? this.mirrorDirection(this.state.direction) : this.state.direction
-          const directionVariants = [
-            {value: 'left', label: 'Start'},
-            {value: 'right', label: 'End'},
-            {value: 'down', label: 'Down'},
-            {value: 'up', label: 'Up'}
-          ]
-          return (
-            <div>
-              <div>
-                <RadioInputGroup
-                  onChange={this.handleDirectionChange}
-                  name="slideExample"
-                  description={<ScreenReaderContent>Select a direction</ScreenReaderContent>}
-                  value={direction}
-                  variant="toggle"
-                >
-                  {directionVariants.map(dir => <RadioInput key={dir.value} value={dir.value} label={dir.label} />)}
-                </RadioInputGroup>
-                <Button size="small" margin="medium none small" onClick={this.handleButtonClick}>
-                  Slide {this.state.in ? 'Out' : 'In'}
-                </Button>
-              </div>
-              <div style={{
-                position: 'relative',
-                overflow: 'hidden',
-                height: '15rem',
-                display: 'flex',
-                justifyContent: (this.state.direction === 'right') ? 'flex-end' : 'flex-start'
-              }}>
-                <Transition
-                  transitionOnMount
-                  unmountOnExit
-                  in={this.state.in}
-                  type={`slide-${direction}`}
-                >
-                  <Avatar name="Slide" />
-                </Transition>
-              </div>
-            </div>
-          )
-        }}
-      </ApplyTextDirection>
+      <div>
+        <div>
+          <RadioInputGroup
+            onChange={this.handleDirectionChange}
+            name="slideExample"
+            description={<ScreenReaderContent>Select a direction</ScreenReaderContent>}
+            value={direction}
+            variant="toggle"
+          >
+            {directionVariants.map(dir => <RadioInput key={dir.value} value={dir.value} label={dir.label} />)}
+          </RadioInputGroup>
+          <Button size="small" margin="medium none small" onClick={this.handleButtonClick}>
+            Slide {this.state.in ? 'Out' : 'In'}
+          </Button>
+        </div>
+        <div style={{
+          position: 'relative',
+          overflow: 'hidden',
+          height: '15rem',
+          display: 'flex',
+          justifyContent: (this.state.direction === 'right') ? 'flex-end' : 'flex-start'
+        }}>
+          <Transition
+            transitionOnMount
+            unmountOnExit
+            in={this.state.in}
+            type={`slide-${direction}`}
+          >
+            <Avatar name="Slide" />
+          </Transition>
+        </div>
+      </div>
     )
   }
 }