diff --git a/docs/guides/upgrade-guide.md b/docs/guides/upgrade-guide.md index 72be464bd4..5428e2f4a1 100644 --- a/docs/guides/upgrade-guide.md +++ b/docs/guides/upgrade-guide.md @@ -136,6 +136,13 @@ type: example ``` +### Alert + +- theme variable `boxShadow` is now removed and uses `sharedTokens.boxShadow.elevation4` instead +- theme variable `contentPadding` has been removed and split into: + - `contentPaddingVertical` (for top/bottom padding) + - `contentPaddingHorizontal` (for left/right padding) + ### Breadcrumb #### New tokens diff --git a/packages/ui-alerts/package.json b/packages/ui-alerts/package.json index 6dcce1027b..6f482e9735 100644 --- a/packages/ui-alerts/package.json +++ b/packages/ui-alerts/package.json @@ -39,7 +39,7 @@ "@instructure/shared-types": "workspace:*", "@instructure/ui-a11y-content": "workspace:*", "@instructure/ui-buttons": "workspace:*", - "@instructure/ui-icons": "workspace:*", + "@instructure/ui-icons-lucide": "workspace:*", "@instructure/ui-motion": "workspace:*", "@instructure/ui-react-utils": "workspace:*", "@instructure/ui-themes": "workspace:*", diff --git a/packages/ui-alerts/src/Alert/__tests__/Alert.test.tsx b/packages/ui-alerts/src/Alert/__tests__/Alert.test.tsx index 95129fab3e..5a9b4852cc 100644 --- a/packages/ui-alerts/src/Alert/__tests__/Alert.test.tsx +++ b/packages/ui-alerts/src/Alert/__tests__/Alert.test.tsx @@ -29,7 +29,7 @@ import '@testing-library/jest-dom' import userEvent from '@testing-library/user-event' import { Alert } from '../index' import type { AlertProps } from '../props' -import { IconGroupLine } from '@instructure/ui-icons' +import { GroupInstUIIcon } from '@instructure/ui-icons-lucide' describe('', () => { let srdiv: HTMLDivElement | null @@ -97,10 +97,10 @@ describe('', () => { NonNullable, string > = { - error: 'IconNo', - info: 'IconInfoBorderless', - success: 'IconCheckMark', - warning: 'IconWarningBorderless' + error: 'CircleX', + info: 'Info', + success: 'CircleCheck', + warning: 'TriangleAlert' } ;( @@ -115,7 +115,7 @@ describe('', () => { Success: Sample alert text. ) - const icon = container.querySelector('svg[class$="-svgIcon"]') + const icon = container.querySelector('svg[class^="lucide"]') expect(icon).toHaveAttribute('name', iconComponent) }) @@ -167,10 +167,12 @@ describe('', () => { }) it('should render an icon when provided as the `renderIcon` prop', () => { - const { container } = render(} />) - const icon = container.querySelector('svg[class$="-svgIcon"]') + const { container } = render( + } /> + ) + const icon = container.querySelector('svg[class^="lucide"]') - expect(icon).toHaveAttribute('name', 'IconGroup') + expect(icon).toHaveAttribute('name', 'Group') expect(icon).toBeInTheDocument() }) diff --git a/packages/ui-alerts/src/Alert/index.tsx b/packages/ui-alerts/src/Alert/index.tsx index 23a101354c..05f0432a3a 100644 --- a/packages/ui-alerts/src/Alert/index.tsx +++ b/packages/ui-alerts/src/Alert/index.tsx @@ -36,17 +36,16 @@ import { View } from '@instructure/ui-view' import type { ViewOwnProps } from '@instructure/ui-view' import { ScreenReaderContent } from '@instructure/ui-a11y-content' import { - IconCheckMarkSolid, - IconInfoBorderlessSolid, - IconWarningBorderlessSolid, - IconNoSolid -} from '@instructure/ui-icons' + InfoInstUIIcon, + XCircleInstUIIcon, + CircleCheckInstUIIcon, + TriangleAlertInstUIIcon +} from '@instructure/ui-icons-lucide' import { Transition } from '@instructure/ui-motion' import { logError as error } from '@instructure/console' -import { withStyleRework as withStyle } from '@instructure/emotion' +import { withStyle } from '@instructure/emotion' import generateStyle from './styles' -import generateComponentTheme from './theme' import { allowedProps } from './props' import type { AlertProps, AlertState } from './props' @@ -57,7 +56,7 @@ category: components --- **/ @withDeterministicId() -@withStyle(generateStyle, generateComponentTheme) +@withStyle(generateStyle) class Alert extends Component { static readonly componentId = 'Alert' @@ -88,10 +87,10 @@ class Alert extends Component { srid: string variantUI = { - error: IconNoSolid, - info: IconInfoBorderlessSolid, - success: IconCheckMarkSolid, - warning: IconWarningBorderlessSolid + error: XCircleInstUIIcon, + info: InfoInstUIIcon, + success: CircleCheckInstUIIcon, + warning: TriangleAlertInstUIIcon } ref: Element | null = null diff --git a/packages/ui-alerts/src/Alert/styles.ts b/packages/ui-alerts/src/Alert/styles.ts index 38a264fdb5..0aedd24159 100644 --- a/packages/ui-alerts/src/Alert/styles.ts +++ b/packages/ui-alerts/src/Alert/styles.ts @@ -22,7 +22,8 @@ * SOFTWARE. */ -import type { AlertTheme } from '@instructure/shared-types' +import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes' +import { boxShadowObjectsToCSSString } from '@instructure/ui-themes' import type { AlertProps, AlertStyle } from './props' /** @@ -36,8 +37,9 @@ import type { AlertProps, AlertStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: AlertTheme, - props: AlertProps + componentTheme: NewComponentTypes['Alert'], + props: AlertProps, + sharedTokens: SharedTokens ): AlertStyle => { const { variant, hasShadow } = props @@ -84,7 +86,11 @@ const generateStyle = ( borderStyle: componentTheme.borderStyle, borderRadius: componentTheme.borderRadius, ...variantStyles[variant!].alert, - ...(hasShadow && { boxShadow: componentTheme.boxShadow }) + ...(hasShadow && { + boxShadow: boxShadowObjectsToCSSString( + sharedTokens.boxShadow.elevation4 + ) + }) }, icon: { color: componentTheme.iconColor, @@ -116,7 +122,7 @@ const generateStyle = ( fontFamily: componentTheme.contentFontFamily, fontWeight: componentTheme.contentFontWeight, lineHeight: componentTheme.contentLineHeight, - padding: componentTheme.contentPadding + padding: `${componentTheme.contentPaddingVertical} ${componentTheme.contentPaddingHorizontal}` }, variantScreenReaderLabel: { position: 'absolute', diff --git a/packages/ui-alerts/src/Alert/theme.ts b/packages/ui-alerts/src/Alert/theme.ts deleted file mode 100644 index 09618b6e54..0000000000 --- a/packages/ui-alerts/src/Alert/theme.ts +++ /dev/null @@ -1,90 +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 { AlertTheme } from '@instructure/shared-types' -import type { Theme, ThemeSpecificStyle } from '@instructure/ui-themes' - -/** - * 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): AlertTheme => { - const { - colors, - spacing, - borders, - typography, - shadows, - key: themeName - } = theme - - const themeSpecificStyle: ThemeSpecificStyle = { - canvas: { - color: theme['ic-brand-font-color-dark'] - } - } - - const componentVariables: AlertTheme = { - background: colors?.contrasts?.white1010, - color: colors?.contrasts?.grey125125, - marginTop: spacing?.small, - - borderRadius: borders?.radiusMedium, - borderWidth: borders?.widthMedium, - borderStyle: borders?.style, - - contentPadding: `${spacing?.small} ${spacing?.medium}`, - contentFontSize: typography?.fontSizeMedium, - contentFontFamily: typography?.fontFamily, - contentFontWeight: typography?.fontWeightNormal, - contentLineHeight: typography?.lineHeightCondensed, - - closeButtonMarginTop: spacing?.xSmall, - closeButtonMarginRight: spacing?.xxSmall, - - iconColor: colors?.contrasts?.white1010, - - successBorderColor: colors?.contrasts?.green4570, - successIconBackground: colors?.contrasts?.green4570, - - infoBorderColor: colors?.contrasts?.blue4570, - infoIconBackground: colors?.contrasts?.blue4570, - - warningBorderColor: colors?.contrasts?.orange4570, - warningIconBackground: colors?.contrasts?.orange4570, - - dangerBorderColor: colors?.contrasts?.red4570, - dangerIconBackground: colors?.contrasts?.red4570, - - boxShadow: shadows?.depth2 - } - - return { - ...componentVariables, - ...themeSpecificStyle[themeName] - } -} - -export default generateComponentTheme diff --git a/packages/ui-alerts/tsconfig.build.json b/packages/ui-alerts/tsconfig.build.json index a2126305df..3404589bda 100644 --- a/packages/ui-alerts/tsconfig.build.json +++ b/packages/ui-alerts/tsconfig.build.json @@ -15,7 +15,7 @@ { "path": "../ui-a11y-content/tsconfig.build.json" }, { "path": "../ui-axe-check/tsconfig.build.json" }, { "path": "../ui-buttons/tsconfig.build.json" }, - { "path": "../ui-icons/tsconfig.build.json" }, + { "path": "../ui-icons-lucide/tsconfig.build.json" }, { "path": "../ui-motion/tsconfig.build.json" }, { "path": "../ui-react-utils/tsconfig.build.json" }, { "path": "../ui-scripts/tsconfig.build.json" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 67b223edc2..7e19829de4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -962,9 +962,9 @@ importers: '@instructure/ui-buttons': specifier: workspace:* version: link:../ui-buttons - '@instructure/ui-icons': + '@instructure/ui-icons-lucide': specifier: workspace:* - version: link:../ui-icons + version: link:../ui-icons-lucide '@instructure/ui-motion': specifier: workspace:* version: link:../ui-motion