diff --git a/docs/guides/upgrade-guide.md b/docs/guides/upgrade-guide.md index 5519666d9d..e939be4dd3 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 @@ -176,7 +177,11 @@ type: example ### FormFieldGroup - theme variable `errorBorderColor` is now removed -- theme variable `errorFieldsPaddin` is now removed +- theme variable `errorFieldsPadding` is now removed +- theme variable `borderColor` is now removed +- theme variable `borderStyle` is now removed +- theme variable `borderWidth` is now removed +- `error` or `success` messages are no longer displayed when the component is `readOnly` or `disabled` ### FormFieldLayout diff --git a/packages/ui-form-field/src/FormFieldGroup/index.tsx b/packages/ui-form-field/src/FormFieldGroup/index.tsx index 520a6f959a..04db261efc 100644 --- a/packages/ui-form-field/src/FormFieldGroup/index.tsx +++ b/packages/ui-form-field/src/FormFieldGroup/index.tsx @@ -26,7 +26,7 @@ import { Component, Children, ReactElement, AriaAttributes } from 'react' import { Grid } from '@instructure/ui-grid' import { pickProps, omitProps } from '@instructure/ui-react-utils' -import { withStyleRework as withStyle } from '@instructure/emotion' +import { withStyle } from '@instructure/emotion' import { FormFieldLayout, @@ -34,7 +34,6 @@ import { } from '../FormFieldLayout' import generateStyle from './styles' -import generateComponentTheme from './theme' import { allowedProps } from './props' import type { FormFieldGroupProps } from './props' @@ -44,7 +43,7 @@ import type { FormFieldGroupProps } from './props' category: components --- **/ -@withStyle(generateStyle, generateComponentTheme) +@withStyle(generateStyle) class FormFieldGroup extends Component { static readonly componentId = 'FormFieldGroup' diff --git a/packages/ui-form-field/src/FormFieldGroup/styles.ts b/packages/ui-form-field/src/FormFieldGroup/styles.ts index 4ab927cc5f..f2d9ae2748 100644 --- a/packages/ui-form-field/src/FormFieldGroup/styles.ts +++ b/packages/ui-form-field/src/FormFieldGroup/styles.ts @@ -22,7 +22,6 @@ * SOFTWARE. */ -import type { FormFieldGroupTheme } from '@instructure/shared-types' import type { FormFieldGroupProps, FormFieldGroupStyle } from './props' /** @@ -36,7 +35,8 @@ import type { FormFieldGroupProps, FormFieldGroupStyle } from './props' * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: FormFieldGroupTheme, + // eslint-disable-next-line @typescript-eslint/no-empty-object-type + _componentTheme: {}, props: FormFieldGroupProps ): FormFieldGroupStyle => { const { disabled } = props @@ -44,8 +44,6 @@ const generateStyle = ( return { formFieldGroup: { label: 'formFieldGroup', - border: `${componentTheme.borderWidth} ${componentTheme.borderStyle} ${componentTheme.borderColor}`, - borderRadius: componentTheme.borderRadius, display: 'block', ...(disabled && { diff --git a/packages/ui-form-field/src/FormFieldGroup/theme.ts b/packages/ui-form-field/src/FormFieldGroup/theme.ts deleted file mode 100644 index cbd422ed8b..0000000000 --- a/packages/ui-form-field/src/FormFieldGroup/theme.ts +++ /dev/null @@ -1,51 +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 { FormFieldGroupTheme } 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): FormFieldGroupTheme => { - const { borders, colors, spacing } = theme - - const componentVariables: FormFieldGroupTheme = { - borderWidth: borders?.widthSmall, - borderStyle: borders?.style, - borderColor: 'transparent', - borderRadius: borders?.radiusMedium, - - errorBorderColor: colors?.contrasts?.red4570, - errorFieldsPadding: spacing?.xSmall - } - - return { - ...componentVariables - } -} - -export default generateComponentTheme diff --git a/packages/ui-form-field/src/FormFieldMessages/index.tsx b/packages/ui-form-field/src/FormFieldMessages/index.tsx index d745632b8d..d372f1dc00 100644 --- a/packages/ui-form-field/src/FormFieldMessages/index.tsx +++ b/packages/ui-form-field/src/FormFieldMessages/index.tsx @@ -26,12 +26,11 @@ import { Component } from 'react' import { omitProps } from '@instructure/ui-react-utils' -import { withStyleRework as withStyle } from '@instructure/emotion' +import { withStyle } from '@instructure/emotion' import { FormFieldMessage } from '../FormFieldMessage' import generateStyle from './styles' -import generateComponentTheme from './theme' import { allowedProps } from './props' import type { FormFieldMessagesProps } from './props' @@ -54,7 +53,7 @@ type: example ]} /> ``` **/ -@withStyle(generateStyle, generateComponentTheme) +@withStyle(generateStyle) class FormFieldMessages extends Component { static readonly componentId = 'FormFieldMessages' diff --git a/packages/ui-form-field/src/FormFieldMessages/theme.ts b/packages/ui-form-field/src/FormFieldMessages/theme.ts deleted file mode 100644 index a88031b827..0000000000 --- a/packages/ui-form-field/src/FormFieldMessages/theme.ts +++ /dev/null @@ -1,45 +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 { FormFieldMessagesTheme } 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): FormFieldMessagesTheme => { - const { spacing } = theme - - const componentVariables: FormFieldMessagesTheme = { - topMargin: spacing?.xxSmall - } - - return { - ...componentVariables - } -} - -export default generateComponentTheme