@instructure/platform-color-picker

Host-agnostic course color picker for the Canvas widget dashboard. Lets a user choose a predefined or custom hex color (and optionally edit a course nickname) and persists it to Canvas via @instructure/platform-canvas-fetch.

This is the move-in replacement for the old RenderSlots/useRenderSlots() ColorPicker slot (see docs/adr/widget-dependency-moves.md and host-agnostic.md).

Usage

import { ColorPicker } from '@instructure/platform-color-picker'

<ColorPicker
  courseId={courseId}
  courseName={courseName}
  currentColor={courseColor}
  onColorChange={color => updateCourseColor(courseId, color)}
  nicknameInfo={{
    nickname: courseName,
    originalName: originalName,
    onNicknameChange: name => updateCourseNickname(courseId, name),
  }}
/>

Requires a PlatformUiProvider ancestor (supplies currentUserId and notify).

Translations

Strings default to bundled English. To localize, wrap with ColorPickerTranslationsProvider and pass host-translated strings + a translate function:

import { ColorPickerTranslationsProvider } from '@instructure/platform-color-picker'

<ColorPickerTranslationsProvider translations={localized} translate={hostTranslate}>
  <ColorPicker ... />
</ColorPickerTranslationsProvider>

Reference English keys: ./src/locales/en.json.

Persistence

• Color: PUT /api/v1/users/:currentUserId/colors/course_:courseId ({ hexcode }, no #)
• Nickname: PUT|DELETE /api/v1/users/self/course_nicknames/:courseId ({ nickname })

CSRF header + same-origin credentials are handled by canvasFetch.