From a102a40fb119b7e810871b03ad1de6a2812bf634 Mon Sep 17 00:00:00 2001 From: Tamas Kovacs Date: Wed, 17 Dec 2025 16:33:48 +0100 Subject: [PATCH] feat(ui-source-code-editor): rework SourceCodeEditor INSTUI-4879 --- docs/guides/upgrade-guide.md | 7 ++- .../src/SourceCodeEditor/index.tsx | 5 +- .../src/SourceCodeEditor/styles.ts | 9 +-- .../src/SourceCodeEditor/theme.ts | 55 ------------------- 4 files changed, 13 insertions(+), 63 deletions(-) delete mode 100644 packages/ui-source-code-editor/src/SourceCodeEditor/theme.ts diff --git a/docs/guides/upgrade-guide.md b/docs/guides/upgrade-guide.md index 5519666d9d..86ee803e15 100644 --- a/docs/guides/upgrade-guide.md +++ b/docs/guides/upgrade-guide.md @@ -135,9 +135,10 @@ type: example ``` + ### Breadcrumb -#### New tokens +#### New tokens - gapSm - Gap spacing for small size breadcrumbs - gapMd - Gap spacing for medium size breadcrumbs @@ -255,6 +256,10 @@ type: example - theme variable `invalidAsteriskColor` is now removed - `error` or `success` messages are no longer displayed when the component is '`readOnly` or `disabled` +### SourceCodeEdtor + +- theme variable `focusBorderColor` is now removed and now uses `sharedTokens.focusOutline.infoColor` + ### TextInput - theme variable `requiredInvalidColor` is now removed diff --git a/packages/ui-source-code-editor/src/SourceCodeEditor/index.tsx b/packages/ui-source-code-editor/src/SourceCodeEditor/index.tsx index 7460fb0452..0ccb5fb9b6 100644 --- a/packages/ui-source-code-editor/src/SourceCodeEditor/index.tsx +++ b/packages/ui-source-code-editor/src/SourceCodeEditor/index.tsx @@ -87,12 +87,11 @@ import type { RequestAnimationFrameType } from '@instructure/ui-dom-utils' import { ScreenReaderContent } from '@instructure/ui-a11y-content' import { textDirectionContextConsumer } from '@instructure/ui-i18n' -import { withStyleRework as withStyle } from '@instructure/emotion' +import { withStyle } from '@instructure/emotion' import customSearch from './SearchPanel' import generateStyle from './styles' -import generateComponentTheme from './theme' import { rtlHorizontalArrowKeymap } from './customKeybinding' @@ -105,7 +104,7 @@ category: components --- **/ @withDeterministicId() -@withStyle(generateStyle, generateComponentTheme) +@withStyle(generateStyle) @textDirectionContextConsumer() class SourceCodeEditor extends Component { static readonly componentId = 'SourceCodeEditor' diff --git a/packages/ui-source-code-editor/src/SourceCodeEditor/styles.ts b/packages/ui-source-code-editor/src/SourceCodeEditor/styles.ts index 564ba59317..2b1fbbccea 100644 --- a/packages/ui-source-code-editor/src/SourceCodeEditor/styles.ts +++ b/packages/ui-source-code-editor/src/SourceCodeEditor/styles.ts @@ -24,7 +24,7 @@ import { tags } from '@lezer/highlight' -import type { SourceCodeEditorTheme } from '@instructure/shared-types' +import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes' import type { SourceCodeEditorProps, SourceCodeEditorStyle } from './props' /** @@ -37,8 +37,9 @@ import type { SourceCodeEditorProps, SourceCodeEditorStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: SourceCodeEditorTheme, - props: SourceCodeEditorProps + componentTheme: NewComponentTypes['SourceCodeEditor'], + props: SourceCodeEditorProps, + sharedTokens: SharedTokens ): SourceCodeEditorStyle => { const { attachment, height, width } = props @@ -121,7 +122,7 @@ const generateStyle = ( // are, for some reason, drawn behind the element content, which // will cause things like the active line background to cover // the outline (#297). - outline: `${componentTheme?.borderWidth} solid ${componentTheme?.focusBorderColor}` + outline: `${componentTheme?.borderWidth} solid ${sharedTokens.focusOutline.infoColor}` }, '.cm-content': { diff --git a/packages/ui-source-code-editor/src/SourceCodeEditor/theme.ts b/packages/ui-source-code-editor/src/SourceCodeEditor/theme.ts deleted file mode 100644 index b528a04f27..0000000000 --- a/packages/ui-source-code-editor/src/SourceCodeEditor/theme.ts +++ /dev/null @@ -1,55 +0,0 @@ -/* - * 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 type { Theme } from '@instructure/ui-themes' -import type { SourceCodeEditorTheme } from '@instructure/shared-types' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): SourceCodeEditorTheme => { - const { colors, borders, typography, spacing } = theme - - const componentVariables: SourceCodeEditorTheme = { - fontFamily: typography?.fontFamilyMonospace, - fontSize: typography?.fontSizeSmall, - background: colors?.contrasts?.white1010, - color: colors?.contrasts?.grey125125, - gutterBackground: colors?.contrasts?.grey1111, - borderWidth: borders?.widthSmall, - borderColor: colors?.contrasts?.grey3045, - borderRadius: borders?.radiusMedium, - focusBorderColor: colors?.contrasts?.blue4570, - horizontalPadding: spacing?.xSmall, - verticalPadding: spacing?.xxSmall - } - - return { - ...componentVariables - } -} - -export default generateComponentTheme