@instructure/emotion 10.19.2-snapshot-2 → 10.19.2-snapshot-4

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.19.2-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.19.1...v10.19.2-snapshot-2) (2025-06-11)
+## [10.19.2-snapshot-4](https://github.com/instructure/instructure-ui/compare/v10.19.1...v10.19.2-snapshot-4) (2025-06-12)
 
 **Note:** Version bump only for package @instructure/emotion
 

package/es/InstUISettingsProvider/__old-tests__/InstUISettingProvider.test.js

@@ -0,0 +1,84 @@
+var _dec, _class, _TextDirAwareComponent, _InstUISettingsProvid, _InstUISettingsProvid2, _InstUISettingsProvid3;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react';
+import { expect, mount, spy } from '@instructure/ui-test-utils';
+import canvas from '@instructure/ui-themes';
+import { InstUISettingsProvider } from '../index';
+import { textDirectionContextConsumer } from '@instructure/ui-i18n';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+let TextDirAwareComponent = (_dec = textDirectionContextConsumer(), _dec(_class = (_TextDirAwareComponent = class TextDirAwareComponent extends Component {
+  render() {
+    return _jsx("div", {
+      "data-dir": this.props.dir,
+      children: "hello world"
+    });
+  }
+}, _TextDirAwareComponent.displayName = "TextDirAwareComponent", _TextDirAwareComponent)) || _class);
+describe('InstUISettingsProvider', async () => {
+  it('can handle nested text direction setting changes', async () => {
+    const subject = await mount(_InstUISettingsProvid || (_InstUISettingsProvid = _jsx(InstUISettingsProvider, {
+      theme: canvas,
+      dir: "rtl",
+      children: _jsx(InstUISettingsProvider, {
+        children: _jsx(TextDirAwareComponent, {})
+      })
+    })));
+    let element = subject.getDOMNode().firstElementChild;
+    expect(element.getAttribute('data-dir')).to.equal('rtl');
+    await subject.setProps({
+      dir: 'ltr'
+    });
+    element = subject.getDOMNode().firstElementChild;
+    expect(element.getAttribute('data-dir')).to.equal('ltr');
+  });
+  it('can handle text direction on native HTML elements', async () => {
+    const subject = await mount(_InstUISettingsProvid2 || (_InstUISettingsProvid2 = _jsx(InstUISettingsProvider, {
+      dir: "rtl",
+      children: _jsx("div", {
+        children: "Should be RTL"
+      })
+    })));
+    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');
+  });
+  it('warns when "as" property is used without using the "dir" property', async () => {
+    const consoleWarning = spy(console, 'warn');
+    const warningMessage = "The 'as' property should be used in conjunction with the 'dir' property!";
+    await mount(//@ts-expect-error div is required
+    _InstUISettingsProvid3 || (_InstUISettingsProvid3 = _jsx(InstUISettingsProvider, {
+      as: "div",
+      children: _jsx("div", {
+        children: "text"
+      })
+    })));
+    expect(consoleWarning).to.has.been.calledWith(warningMessage);
+  });
+});

package/es/__old-tests__/getComponentThemeOverride.test.js

@@ -0,0 +1,128 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { expect } from '@instructure/ui-test-utils';
+import canvas from '@instructure/ui-themes';
+import { getComponentThemeOverride } from '../getComponentThemeOverride';
+const componentName = 'ExampleComponent';
+const componentId = 'Example.Component';
+describe('@getComponentThemeOverride', async () => {
+  describe('should return empty object', async () => {
+    it('if there is no theme set', async () => {
+      const override = getComponentThemeOverride({}, componentName, componentId, {});
+      expect(override).to.deep.equal({});
+    });
+    it('if there is no override set', async () => {
+      const override = getComponentThemeOverride(canvas, componentName, componentId, {});
+      expect(override).to.deep.equal({});
+    });
+  });
+  describe('should return the correct override', async () => {
+    it('if there is `themeOverride` set on the props', async () => {
+      const componentOverride = {
+        componentColor: 'rgb(150, 0, 0)'
+      };
+      const override = getComponentThemeOverride(canvas, componentName, componentId, {
+        themeOverride: componentOverride
+      });
+      expect(override).to.deep.equal(componentOverride);
+    });
+    it('if the `themeOverride` prop is a function', async () => {
+      const theme = {
+        backgroundGreen: 'rgb(0, 150, 0)',
+        backgroundBlue: 'rgb(0, 0, 150)',
+        backgroundDark: 'rgb(0, 0, 0)'
+      };
+      const override = getComponentThemeOverride(canvas, componentName, componentId, {
+        themeOverride: (componentTheme, currentTheme) => ({
+          backgroundBlue: componentTheme.backgroundGreen,
+          backgroundDark: currentTheme.colors.contrasts.white1010
+        })
+      }, theme);
+      expect(override).to.deep.equal({
+        backgroundBlue: 'rgb(0, 150, 0)',
+        backgroundDark: '#FFFFFF'
+      });
+    });
+    it('if `themeOverride` and `componentOverrides` are both set', async () => {
+      const override = getComponentThemeOverride({
+        ...canvas,
+        componentOverrides: {
+          [componentName]: {
+            componentColor: 'rgb(0, 0, 150)'
+          }
+        }
+      }, componentName, componentId, {
+        themeOverride: {
+          componentColor: 'rgb(0, 150, 0)'
+        }
+      });
+      expect(override).to.deep.equal({
+        componentColor: 'rgb(0, 150, 0)'
+      });
+    });
+    describe('if there is `componentOverrides` set on the theme', async () => {
+      it('with the displayName', async () => {
+        const componentOverride = {
+          componentColor: 'rgb(0, 0, 150)'
+        };
+        const override = getComponentThemeOverride({
+          ...canvas,
+          componentOverrides: {
+            [componentName]: componentOverride
+          }
+        }, componentName, componentId, {});
+        expect(override).to.deep.equal(componentOverride);
+      });
+      it('with the componentId', async () => {
+        const componentOverride = {
+          componentColor: 'rgb(0, 150, 150)'
+        };
+        const override = getComponentThemeOverride({
+          ...canvas,
+          componentOverrides: {
+            [componentId]: componentOverride
+          }
+        }, componentName, componentId, {});
+        expect(override).to.deep.equal(componentOverride);
+      });
+      it('with both the displayName and componentId (displayName takes precedence)', async () => {
+        const override = getComponentThemeOverride({
+          ...canvas,
+          componentOverrides: {
+            [componentName]: {
+              componentColor: 'rgb(150, 150, 150)'
+            },
+            [componentId]: {
+              componentColor: 'rgb(150, 150, 0)'
+            }
+          }
+        }, componentName, componentId, {});
+        expect(override).to.deep.equal({
+          componentColor: 'rgb(150, 150, 150)'
+        });
+      });
+    });
+  });
+});

package/es/__old-tests__/useStyle.test.js

@@ -0,0 +1,226 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _p;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useState } from 'react';
+import { expect, mount, stub, within } from '@instructure/ui-test-utils';
+import { InstUISettingsProvider, useStyle } from '../index';
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+describe('useStyle', async () => {
+  var _InstUISettingsProvid, _InstUISettingsProvid2, _InstUISettingsProvid3, _InstUISettingsProvid4, _InstUISettingsProvid5;
+  const grey1111 = 'rgb(0, 128, 0)';
+  const green4570 = 'rgb(10, 10, 10)';
+  const blue4570 = 'rgb(255, 255, 0)';
+  const exampleTheme = {
+    key: 'exampleTheme',
+    colors: {
+      contrasts: {
+        grey1111,
+        green4570,
+        blue4570
+      }
+    }
+  };
+  const generateComponentTheme = function (theme) {
+    const colors = theme.colors;
+    return {
+      textColor: colors.contrasts.grey1111,
+      textColorInverse: colors.contrasts.green4570,
+      backgroundColor: colors.contrasts.blue4570
+    };
+  };
+  const generateStyle = function (componentTheme, params) {
+    const inverse = params.inverse,
+      clearBackground = params.clearBackground;
+    return {
+      exampleComponent: {
+        label: 'exampleComponent',
+        color: componentTheme.textColor,
+        background: componentTheme.backgroundColor,
+        insetInlineStart: '8px',
+        ...(inverse && {
+          color: componentTheme.textColorInverse
+        }),
+        ...(clearBackground && {
+          background: 'transparent'
+        })
+      }
+    };
+  };
+  const ThemedComponent = ({
+    inverse = false,
+    themeOverride
+  }) => {
+    const _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      clearBackground = _useState2[0],
+      setClearBackground = _useState2[1];
+    const styles = useStyle({
+      generateStyle,
+      generateComponentTheme,
+      componentId: 'ThemedComponent',
+      params: {
+        inverse,
+        clearBackground,
+        themeOverride
+      }
+    });
+    const handleClick = () => {
+      setClearBackground(true);
+    };
+    return _jsxs("div", {
+      css: styles.exampleComponent,
+      children: [_p || (_p = _jsx("p", {
+        children: "Hello World"
+      })), _jsx("button", {
+        onClick: handleClick,
+        children: "Button"
+      })]
+    });
+  };
+  describe('with theme provided by InstUISettingsProvider', async () => {
+    it('should add css class suffixed with label', async () => {
+      const subject = await mount(_InstUISettingsProvid || (_InstUISettingsProvid = _jsx(InstUISettingsProvider, {
+        theme: exampleTheme,
+        children: _jsx(ThemedComponent, {})
+      })));
+      const emotionClassRegex = new RegExp(/^css-.+-exampleComponent$/);
+      expect(subject.getDOMNode().classList[0]).to.match(emotionClassRegex);
+    });
+    it('should apply correct css props', async () => {
+      const subject = await mount(_InstUISettingsProvid2 || (_InstUISettingsProvid2 = _jsx(InstUISettingsProvider, {
+        theme: exampleTheme,
+        children: _jsx(ThemedComponent, {})
+      })));
+      const component = subject.getDOMNode();
+      const computedStyle = getComputedStyle(component);
+      expect(computedStyle.color).to.equal('rgb(0, 128, 0)');
+      expect(computedStyle.backgroundColor).to.equal('rgb(255, 255, 0)');
+    });
+    describe('should allow configuration through the themeOverride prop', async () => {
+      it('when it is an object', async () => {
+        const subject = await mount(_jsx(InstUISettingsProvider, {
+          theme: exampleTheme,
+          children: _jsx(ThemedComponent, {
+            themeOverride: {
+              textColor: 'rgb(128, 0, 128)'
+            }
+          })
+        }));
+        const component = subject.getDOMNode();
+        const computedStyle = getComputedStyle(component);
+        expect(computedStyle.color).to.equal('rgb(128, 0, 128)');
+        expect(computedStyle.backgroundColor).to.equal('rgb(255, 255, 0)');
+      });
+      it('when it is a function', async () => {
+        const subject = await mount(_jsx(InstUISettingsProvider, {
+          theme: exampleTheme,
+          children: _jsx(ThemedComponent, {
+            themeOverride: componentTheme => ({
+              textColor: componentTheme.backgroundColor
+            })
+          })
+        }));
+        const component = subject.getDOMNode();
+        const computedStyle = getComputedStyle(component);
+        expect(computedStyle.color).to.equal('rgb(255, 255, 0)');
+        expect(computedStyle.backgroundColor).to.equal('rgb(255, 255, 0)');
+      });
+    });
+    it('should ignore empty themeOverride props', async () => {
+      const subject = await mount(_jsx(InstUISettingsProvider, {
+        theme: exampleTheme,
+        children: _jsx(ThemedComponent, {
+          themeOverride: {}
+        })
+      }));
+      const component = subject.getDOMNode();
+      const computedStyle = getComputedStyle(component);
+      expect(computedStyle.color).to.equal('rgb(0, 128, 0)');
+      expect(computedStyle.backgroundColor).to.equal('rgb(255, 255, 0)');
+    });
+  });
+  describe('should update css props', async () => {
+    it('when props are updated', async () => {
+      // `setProps` can be called on the outer component,
+      // so have to add the theme ad themeOverride here, and suppress the error
+      stub(console, 'warn'); // suppress "no theme provided error"
+
+      const subject = await mount(_jsx(ThemedComponent, {
+        inverse: false,
+        themeOverride: {
+          textColor: grey1111,
+          textColorInverse: blue4570,
+          backgroundColor: green4570
+        }
+      }));
+      const component = subject.getDOMNode();
+      expect(getComputedStyle(component).color).to.equal(grey1111);
+      await subject.setProps({
+        inverse: true
+      });
+      expect(getComputedStyle(component).color).to.equal(blue4570);
+    });
+    it('when state is updated', async () => {
+      const subject = await mount(_InstUISettingsProvid3 || (_InstUISettingsProvid3 = _jsx(InstUISettingsProvider, {
+        theme: exampleTheme,
+        children: _jsx(ThemedComponent, {})
+      })));
+      const main = within(subject.getDOMNode());
+      const clearBackgroundButton = await main.find('button');
+      const component = main.getDOMNode();
+      expect(getComputedStyle(component).backgroundColor).to.equal('rgb(255, 255, 0)');
+      await clearBackgroundButton.click();
+      expect(getComputedStyle(component).backgroundColor).to.equal('rgba(0, 0, 0, 0)');
+    });
+  });
+  describe('should apply bi-directional polyfill on styles object', async () => {
+    it('in default "ltr" mode', async () => {
+      const subject = await mount(_InstUISettingsProvid4 || (_InstUISettingsProvid4 = _jsx(InstUISettingsProvider, {
+        theme: exampleTheme,
+        children: _jsx(ThemedComponent, {})
+      })));
+      const component = subject.getDOMNode();
+      const computedStyle = getComputedStyle(component);
+
+      // `inset-inline-start` should be transformed to 'left' in 'ltr' mode
+      expect(computedStyle.left).to.equal('8px');
+      expect(computedStyle.right).to.equal('auto');
+    });
+    it('in "rtl" mode', async () => {
+      const subject = await mount(_InstUISettingsProvid5 || (_InstUISettingsProvid5 = _jsx(InstUISettingsProvider, {
+        theme: exampleTheme,
+        dir: "rtl",
+        children: _jsx(ThemedComponent, {})
+      })));
+      const component = subject.getDOMNode().firstElementChild;
+      const computedStyle = getComputedStyle(component);
+
+      // `inset-inline-start` should be transformed to 'right' in 'rtl' mode
+      expect(computedStyle.left).to.equal('auto');
+      expect(computedStyle.right).to.equal('8px');
+    });
+  });
+});