fix(emotion): fix text direction not working on simple html elements

instructure · Mar 29, 2022 · 22c25bc · 22c25bc
1 parent 002505b
commit 22c25bc
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 31 deletions.
diff --git a/packages/emotion/src/InstUISettingsProvider/__tests__/InstUISettingProvider.test.tsx b/packages/emotion/src/InstUISettingsProvider/__tests__/InstUISettingProvider.test.tsx
@@ -47,8 +47,25 @@ describe('InstUISettingsProvider', async () => {
         </InstUISettingsProvider>
       </InstUISettingsProvider>
     )
-    expect(subject.getDOMNode().getAttribute('data-dir')).to.equal('rtl')
+    let element = subject.getDOMNode().firstElementChild?.firstElementChild
+    expect(element!.getAttribute('data-dir')).to.equal('rtl')
     await subject.setProps({ dir: 'ltr' })
-    expect(subject.getDOMNode().getAttribute('data-dir')).to.equal('ltr')
+    element = subject.getDOMNode().firstElementChild?.firstElementChild
+    expect(element!.getAttribute('data-dir')).to.equal('ltr')
+  })
+  it('can handle text direction on native HTML elements', async () => {
+    const subject = await mount(
+      <InstUISettingsProvider dir="rtl">
+        <div>Should be RTL</div>
+      </InstUISettingsProvider>
+    )
+    let element = subject.getDOMNode()
+
+    expect(element.getAttribute('dir')).to.equal('rtl')
+
+    await subject.setProps({ dir: 'ltr' })
+    element = subject.getDOMNode()
+
+    expect(element.getAttribute('dir')).to.equal('ltr')
   })
 })
diff --git a/packages/emotion/src/InstUISettingsProvider/index.tsx b/packages/emotion/src/InstUISettingsProvider/index.tsx
@@ -33,6 +33,7 @@ import { getTheme } from '../EmotionThemeProvider'
 
 import type { ThemeOrOverride } from '../EmotionTypes'
 import type { DeterministicIdProviderValue } from '@instructure/ui-react-utils'
+import type { AsElementType } from '@instructure/shared-types'
 
 type InstUIProviderProps = {
   children?: React.ReactNode
@@ -54,6 +55,7 @@ type InstUIProviderProps = {
    * A [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) which keeps track of specific InstUI components. (generally this is used for deterministic id generation for [SSR](/#server-side-rendering))
    */
   instanceCounterMap?: DeterministicIdProviderValue
+  as?: AsElementType
 }
 
 /**
@@ -77,6 +79,7 @@ type InstUIProviderProps = {
  *   - `ltr`
  * - instanceCounterMap - A [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
  * which keeps track of specific InstUI components. (generally this is used for deterministic id generation for [SSR](/#server-side-rendering))
+ * - as - InstUISettingsProvider will wrap it's children with a HTML element (default: span), this can be changed with the `as` property
  *
  * ```js
  *
@@ -125,6 +128,7 @@ function InstUISettingsProvider({
   instanceCounterMap
 }: InstUIProviderProps) {
   const finalDir = dir || useContext(TextDirectionContext)
+  const Element = getElementType(InstUISettingsProvider, { as })
 
   if (process.env.NODE_ENV !== 'production' && finalDir === 'auto') {
     console.warn(
@@ -133,13 +137,15 @@ function InstUISettingsProvider({
   }
 
   return (
-    <DeterministicIdContextProvider instanceCounterMap={instanceCounterMap}>
-      <ThemeProvider theme={getTheme(theme)}>
-        <TextDirectionContext.Provider value={finalDir}>
-          {children}
-        </TextDirectionContext.Provider>
-      </ThemeProvider>
-    </DeterministicIdContextProvider>
+    <Element dir={finalDir}>
+      <DeterministicIdContextProvider instanceCounterMap={instanceCounterMap}>
+        <ThemeProvider theme={getTheme(theme)}>
+          <TextDirectionContext.Provider value={finalDir}>
+            {children}
+          </TextDirectionContext.Provider>
+        </ThemeProvider>
+      </DeterministicIdContextProvider>
+    </Element>
   )
 }
 

diff --git a/packages/emotion/src/__tests__/withStyle.test.tsx b/packages/emotion/src/__tests__/withStyle.test.tsx
@@ -145,7 +145,9 @@ describe('@withStyle', async () => {
       )
       const emotionClassRegex = new RegExp(/^css-.+-exampleComponent$/)
 
-      expect(subject.getDOMNode().classList[0]).to.match(emotionClassRegex)
+      expect(subject.getDOMNode().firstElementChild!.classList[0]).to.match(
+        emotionClassRegex
+      )
     })
 
     it('should apply correct css props', async () => {
@@ -154,8 +156,8 @@ describe('@withStyle', async () => {
           <ThemeableComponent />
         </InstUISettingsProvider>
       )
-      const component = subject.getDOMNode()
-      const computedStyle = getComputedStyle(component)
+      const component = subject.getDOMNode().firstElementChild
+      const computedStyle = getComputedStyle(component!)
 
       expect(computedStyle.color).to.equal(textBrand)
       expect(computedStyle.backgroundColor).to.equal(backgroundLight)
@@ -203,8 +205,8 @@ describe('@withStyle', async () => {
           <ThemeableComponent themeOverride={{}} />
         </InstUISettingsProvider>
       )
-      const component = subject.getDOMNode()
-      const computedStyle = getComputedStyle(component)
+      const component = subject.getDOMNode().firstElementChild
+      const computedStyle = getComputedStyle(component!)
 
       expect(computedStyle.color).to.equal(textBrand)
       expect(computedStyle.backgroundColor).to.equal(backgroundLight)
@@ -244,15 +246,15 @@ describe('@withStyle', async () => {
       )
       const main = within(subject.getDOMNode())
       const clearBackgroundButton = await main.find('button')
-      const component = await main.getDOMNode()
+      const component = main.getDOMNode().firstElementChild
 
-      expect(getComputedStyle(component).backgroundColor).to.equal(
+      expect(getComputedStyle(component!).backgroundColor).to.equal(
         backgroundLight
       )
 
       await clearBackgroundButton.click()
 
-      expect(getComputedStyle(component).backgroundColor).to.equal(
+      expect(getComputedStyle(component!).backgroundColor).to.equal(
         'rgba(0, 0, 0, 0)'
       ) // transparent
     })
@@ -265,8 +267,8 @@ describe('@withStyle', async () => {
           <ThemeableComponent />
         </InstUISettingsProvider>
       )
-      const component = subject.getDOMNode()
-      const computedStyle = getComputedStyle(component)
+      const component = subject.getDOMNode().firstElementChild
+      const computedStyle = getComputedStyle(component!)
 
       // `inset-inline-start` should be transformed to 'left' in 'ltr' mode
       expect(computedStyle.left).to.equal('8px')
@@ -275,15 +277,11 @@ describe('@withStyle', async () => {
 
     it('in "rtl" mode', async () => {
       const subject = await mount(
-        <div dir="rtl">
-          <InstUISettingsProvider theme={exampleTheme}>
-            <ThemeableComponent />
-          </InstUISettingsProvider>
-        </div>
+        <InstUISettingsProvider theme={exampleTheme} dir="rtl">
+          <ThemeableComponent />
+        </InstUISettingsProvider>
       )
-      const component = subject
-        .getDOMNode()
-        .querySelector('[class$=-exampleComponent]')
+      const component = subject.getDOMNode().firstElementChild
       const computedStyle = getComputedStyle(component!)
 
       // `inset-inline-start` should be transformed to 'right' in 'rtl' mode
@@ -301,8 +299,8 @@ describe('@withStyle', async () => {
           <ThemeableComponent styles={{ exampleComponent: { color: 'red' } }} />
         </InstUISettingsProvider>
       )
-      const component = subject.getDOMNode()
-      const computedStyle = getComputedStyle(component)
+      const component = subject.getDOMNode().firstElementChild
+      const computedStyle = getComputedStyle(component!)
 
       expect(computedStyle.color).to.equal(textBrand)
     })
@@ -322,8 +320,8 @@ describe('@withStyle', async () => {
           />
         </InstUISettingsProvider>
       )
-      const component = subject.getDOMNode()
-      const computedStyle = getComputedStyle(component)
+      const component = subject.getDOMNode().firstElementChild
+      const computedStyle = getComputedStyle(component!)
 
       expect(computedStyle.color).to.equal(textBrand)
       expect(consoleLog).not.to.have.been.called()