feat(ui-color-picker): rework ColorPicker

docs/guides/upgrade-guide.md

@@ -266,6 +266,23 @@ type: embed
 
 ```
 
+### ColorPicker
+
+```js
+---
+type: embed
+---
+<V12ChangelogTable
+  removed={[
+    {name:"warningIconColor",note:""},
+    {name:"errorIconColor",note:""},
+    {name:"successIconColor",note:""},
+    {name:"spacing",note:"now uses sharedTokens.spacing"}
+  ]}
+/>
+
+```
+
 ### Flex
 
 Gap styling now uses `sharedTokens.legacySpacing`.

packages/__docs__/src/App/index.tsx

@@ -569,9 +569,10 @@ class App extends Component<AppProps, AppState> {
 
   renderThemeSelect() {
     const allThemeKeys = Object.keys(this.state.docsData!.themes)
-    const showRebrandThemes =
-      this.state.showMinorVersionSelector &&
-      this.state.selectedMinorVersion !== 'v11_6'
+    // const showRebrandThemes =
+    //   this.state.showMinorVersionSelector &&
+    //   this.state.selectedMinorVersion !== 'v11_6'
+    const showRebrandThemes = true // TODO temp workaround
     const themeKeys = showRebrandThemes
       ? allThemeKeys
       : allThemeKeys.filter((key) => !key.startsWith('rebrand'))

packages/ui-color-picker/package.json

@@ -82,18 +82,18 @@
       "default": "./es/exports/a.js"
     },
     "./v11_7": {
-      "src": "./src/exports/a.ts",
-      "types": "./types/exports/a.d.ts",
-      "import": "./es/exports/a.js",
-      "require": "./lib/exports/a.js",
-      "default": "./es/exports/a.js"
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
     },
     "./latest": {
-      "src": "./src/exports/a.ts",
-      "types": "./types/exports/a.d.ts",
-      "import": "./es/exports/a.js",
-      "require": "./lib/exports/a.js",
-      "default": "./es/exports/a.js"
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
     }
   }
 }

packages/ui-color-picker/src/ColorContrast/v1/index.tsx

@@ -32,9 +32,9 @@ import {
 } from '@instructure/ui-color-utils'
 import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
-import { Text } from '@instructure/ui-text/latest'
-import { Heading } from '@instructure/ui-heading/latest'
-import { Pill } from '@instructure/ui-pill/latest'
+import { Text } from '@instructure/ui-text/v11_6'
+import { Heading } from '@instructure/ui-heading/v11_6'
+import { Pill } from '@instructure/ui-pill/v11_6'
 
 import ColorIndicator from '../../ColorIndicator/v1'
 
@@ -117,7 +117,7 @@ class ColorContrast extends Component<ColorContrastProps, ColorContrastState> {
           {description}
         </div>
         <div css={styles?.statusIndicatorWrapper}>
-          <Pill color={pass ? 'success' : 'error'}>
+          <Pill color={pass ? 'success' : 'danger'}>
             {pass ? successLabel : failureLabel}
           </Pill>
         </div>

packages/ui-color-picker/src/ColorContrast/v2/ColorContrast.test.tsx

@@ -0,0 +1,263 @@
+/*
+ * 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 { render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+import '@testing-library/jest-dom'
+import { runAxeCheck } from '@instructure/ui-axe-check'
+import { contrast } from '@instructure/ui-color-utils'
+
+import { ColorContrast } from './'
+
+const testColors = {
+  firstColor: '#FF0000',
+  secondColor: '#FFFF00'
+}
+
+const testLabels = {
+  label: 'Color Contrast Ratio',
+  successLabel: 'PASS',
+  failureLabel: 'FAIL',
+  normalTextLabel: 'Normal text',
+  largeTextLabel: 'Large text',
+  graphicsTextLabel: 'Graphics text',
+  firstColorLabel: 'Background',
+  secondColorLabel: 'Foreground'
+}
+
+type ContrastStatus = 'FAIL' | 'PASS'
+
+describe('<ColorContrast />', () => {
+  describe('elementRef prop', () => {
+    it('should provide ref', async () => {
+      const elementRef = vi.fn()
+      const { container } = render(
+        <ColorContrast
+          {...testColors}
+          {...testLabels}
+          elementRef={elementRef}
+        />
+      )
+
+      expect(elementRef).toHaveBeenCalledWith(container.firstChild)
+    })
+  })
+
+  describe('labels are displayed:', () => {
+    Object.entries(testLabels).forEach(([label, text]) => {
+      it(label, async () => {
+        const { container } = render(
+          <ColorContrast {...testColors} {...testLabels} />
+        )
+
+        expect(container).toHaveTextContent(text)
+      })
+    })
+  })
+
+  describe('labelLevel prop', () => {
+    it('should render label as div when labelLevel is not provided', async () => {
+      render(<ColorContrast {...testColors} {...testLabels} />)
+
+      const heading = screen.queryByRole('heading', {
+        name: testLabels.label
+      })
+      expect(heading).not.toBeInTheDocument()
+
+      const labelText = screen.getByText(testLabels.label)
+      expect(labelText).toBeInTheDocument()
+      expect(labelText.tagName.toLowerCase()).toBe('div')
+    })
+
+    it('should render label as Heading when labelLevel is provided', async () => {
+      render(<ColorContrast {...testColors} {...testLabels} labelLevel="h2" />)
+
+      const heading = screen.getByRole('heading', {
+        name: testLabels.label,
+        level: 2
+      })
+      expect(heading).toBeInTheDocument()
+    })
+
+    it('should render correct heading level', async () => {
+      const { rerender } = render(
+        <ColorContrast {...testColors} {...testLabels} labelLevel="h3" />
+      )
+
+      let heading = screen.getByRole('heading', {
+        name: testLabels.label,
+        level: 3
+      })
+      expect(heading).toBeInTheDocument()
+
+      rerender(
+        <ColorContrast {...testColors} {...testLabels} labelLevel="h1" />
+      )
+
+      heading = screen.getByRole('heading', {
+        name: testLabels.label,
+        level: 1
+      })
+      expect(heading).toBeInTheDocument()
+    })
+  })
+
+  describe('should calculate contrast correctly', () => {
+    it('on opaque colors', async () => {
+      const color1 = '#fff'
+      const color2 = '#088'
+
+      const { container } = render(
+        <ColorContrast
+          {...testLabels}
+          firstColor={color1}
+          secondColor={color2}
+        />
+      )
+      const contrastResult = contrast(color1, color2, 2)
+
+      expect(container).toHaveTextContent(contrastResult + ':1')
+    })
+
+    it('on transparent colors', async () => {
+      const color1 = '#fff'
+      const color2 = '#00888880'
+
+      const { container } = render(
+        <ColorContrast
+          {...testLabels}
+          firstColor={color1}
+          secondColor={color2}
+        />
+      )
+
+      // this is the result of a complicated "blended color" calculation
+      // in the component, not simple `contrast()` check
+      expect(container).toHaveTextContent('2:1')
+    })
+  })
+
+  describe('withoutColorPreview prop', () => {
+    it('should be false by default, should display preview', async () => {
+      const { container } = render(
+        <ColorContrast {...testColors} {...testLabels} />
+      )
+
+      const preview = container.querySelector(
+        "[class$='-colorContrast__colorPreview']"
+      )
+      expect(preview).toBeInTheDocument()
+    })
+
+    it('should hide preview', async () => {
+      const { container } = render(
+        <ColorContrast {...testColors} {...testLabels} withoutColorPreview />
+      )
+
+      const preview = container.querySelector(
+        "[class$='-colorContrast__colorPreview']"
+      )
+      expect(preview).not.toBeInTheDocument()
+    })
+  })
+
+  describe('contrast check', () => {
+    const checkContrastPills = (
+      title: string,
+      firstColor: string,
+      secondColor: string,
+      expectedResult: {
+        normal: ContrastStatus
+        large: ContrastStatus
+        graphics: ContrastStatus
+      }
+    ) => {
+      describe(title, () => {
+        it(`normal text should ${expectedResult.normal.toLowerCase()}`, async () => {
+          const { container } = render(
+            <ColorContrast
+              {...testLabels}
+              firstColor={firstColor}
+              secondColor={secondColor}
+            />
+          )
+
+          expect(container).toHaveTextContent(expectedResult.normal)
+        })
+
+        it(`large text should ${expectedResult.large.toLowerCase()}`, async () => {
+          const { container } = render(
+            <ColorContrast
+              {...testLabels}
+              firstColor={firstColor}
+              secondColor={secondColor}
+            />
+          )
+
+          expect(container).toHaveTextContent(expectedResult.large)
+        })
+
+        it(`graphics should ${expectedResult.graphics.toLowerCase()}`, async () => {
+          const { container } = render(
+            <ColorContrast
+              {...testLabels}
+              firstColor={firstColor}
+              secondColor={secondColor}
+            />
+          )
+          expect(container).toHaveTextContent(expectedResult.graphics)
+        })
+      })
+    }
+
+    checkContrastPills('on x < 3 contrast', '#fff', '#aaa', {
+      normal: 'FAIL',
+      large: 'FAIL',
+      graphics: 'FAIL'
+    })
+
+    checkContrastPills('on small 3 < x < 4.5 contrast', '#fff', '#0c89bf', {
+      normal: 'FAIL',
+      large: 'PASS',
+      graphics: 'PASS'
+    })
+
+    checkContrastPills('on small x > 4.5 contrast', '#fff', '#333', {
+      normal: 'PASS',
+      large: 'PASS',
+      graphics: 'PASS'
+    })
+  })
+
+  describe('should be accessible', () => {
+    it('a11y', async () => {
+      const { container } = render(
+        <ColorContrast {...testColors} {...testLabels} />
+      )
+      const axeCheck = await runAxeCheck(container)
+
+      expect(axeCheck).toBe(true)
+    })
+  })
+})