feat(ui-form-field): rework FormFieldGroup

INSTUI-4871

Author: ToMESSKa

docs/guides/upgrade-guide.md

@@ -104,9 +104,10 @@ type: example
   <TextInput renderLabel="Name" placeholder="Doe, John Doe"/>
 </InstUISettingsProvider>
 ```
+
 ### Breadcrumb
 
-#### New tokens 
+#### New tokens
 
 - gapSm - Gap spacing for small size breadcrumbs
 - gapMd - Gap spacing for medium size breadcrumbs
@@ -145,7 +146,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
 

packages/ui-form-field/src/FormFieldGroup/index.tsx

@@ -26,15 +26,14 @@ 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,
   allowedProps as formFieldLayoutAllowedProps
 } 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<FormFieldGroupProps> {
   static readonly componentId = 'FormFieldGroup'
 

packages/ui-form-field/src/FormFieldGroup/styles.ts

@@ -36,16 +36,14 @@ import type { FormFieldGroupProps, FormFieldGroupStyle } from './props'
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: FormFieldGroupTheme,
+  _componentTheme: FormFieldGroupTheme,
   props: FormFieldGroupProps
 ): FormFieldGroupStyle => {
   const { disabled } = props
 
   return {
     formFieldGroup: {
       label: 'formFieldGroup',
-      border: `${componentTheme.borderWidth} ${componentTheme.borderStyle} ${componentTheme.borderColor}`,
-      borderRadius: componentTheme.borderRadius,
       display: 'block',
 
       ...(disabled && {

packages/ui-form-field/src/FormFieldGroup/theme.ts

@@ -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<FormFieldMessagesProps> {
   static readonly componentId = 'FormFieldMessages'