From 4340a2ecff7ee60ae4c4385025f59abbd2affc80 Mon Sep 17 00:00:00 2001 From: Tamas Kovacs Date: Fri, 8 May 2026 16:39:08 +0200 Subject: [PATCH] feat(many): remove deprecated v2 items BREAKING CHANGE: Removed FormFieldLabel component Removed _content prop from DrawerLayout.Tray and DrawerLayout.Content Removed _link prop from Link Removed _node prop from Menu.Item Removed _root prop from Pagination, TreeBrowser Removed _select prop from SimpleSelect and TimeSelect Removed _ref prop from TruncateText Removed _element prop from View Removed color="ai" from Heading Removed variant="inline-small" and variant="standalone-small" from Link Removed title prop from Tag Removed focusRingBorderRadius prop from View Removed hideActionsUserSeparator prop from TopNavBar.Layout Removed handleFocusOutlineColor, handleFocusOutlineWidth, handleShadowColor from RangeInput INSTUI-5025 --- docs/guides/upgrade-guide.md | 51 ++++++++-- .../DrawerLayout/v2/DrawerContent/index.tsx | 8 -- .../src/DrawerLayout/v2/DrawerTray/index.tsx | 8 -- packages/ui-form-field/README.md | 1 - .../__tests__/FormFieldLabel.test.tsx | 2 +- .../src/FormFieldLabel/v2/index.tsx | 95 ------------------- .../src/FormFieldLabel/v2/props.ts | 49 ---------- .../src/FormFieldLabel/v2/styles.ts | 74 --------------- .../src/FormFieldLabel/v2/theme.ts | 56 ----------- packages/ui-form-field/src/exports/b.ts | 2 - packages/ui-heading/src/Heading/v2/props.ts | 3 +- packages/ui-heading/src/Heading/v2/styles.ts | 12 +-- packages/ui-link/src/Link/v2/README.md | 22 ----- packages/ui-link/src/Link/v2/index.tsx | 46 +-------- packages/ui-link/src/Link/v2/props.ts | 6 +- .../ui-menu/src/Menu/v2/MenuItem/index.tsx | 8 -- .../ui-pagination/src/Pagination/v2/index.tsx | 8 -- .../src/SimpleSelect/v2/index.tsx | 8 -- packages/ui-tag/src/Tag/v2/index.tsx | 3 +- packages/ui-tag/src/Tag/v2/props.ts | 6 -- .../src/TimeSelect/v2/index.tsx | 7 -- .../TopNavBar/v2/TopNavBarLayout/index.tsx | 9 -- .../src/TreeBrowser/v2/index.tsx | 7 -- .../src/TruncateText/v2/index.tsx | 7 -- packages/ui-view/src/View/v2/index.tsx | 7 -- packages/ui-view/src/View/v2/props.ts | 12 --- packages/ui/src/v11_7.ts | 2 - regression-test/src/app/link/page.tsx | 14 +-- 28 files changed, 60 insertions(+), 473 deletions(-) delete mode 100644 packages/ui-form-field/src/FormFieldLabel/v2/index.tsx delete mode 100644 packages/ui-form-field/src/FormFieldLabel/v2/props.ts delete mode 100644 packages/ui-form-field/src/FormFieldLabel/v2/styles.ts delete mode 100644 packages/ui-form-field/src/FormFieldLabel/v2/theme.ts diff --git a/docs/guides/upgrade-guide.md b/docs/guides/upgrade-guide.md index f26b833404..f8d0c06130 100644 --- a/docs/guides/upgrade-guide.md +++ b/docs/guides/upgrade-guide.md @@ -519,6 +519,10 @@ type: embed ``` +### DrawerLayout + +- Previously deprecated `_content` prop has been removed from `DrawerLayout.Tray` and `DrawerLayout.Content`. Use `ref` instead. + ### Drilldown Drilldown itself has no token changes. However, its sub-components share tokens with Options components, so the token changes listed under Options apply here as well: @@ -581,6 +585,8 @@ type: embed ### FormField +- Previously deprecated `FormFieldLabel` has been removed. + #### FormFieldGroup `error` or `success` messages are no longer displayed when the component is `readOnly` or `disabled`. @@ -709,6 +715,8 @@ type: embed The default value of the `color` prop has changed from `'inherit'` to `'primary'`. If you need to preserve the previous behavior, explicitly set `color="inherit"`. +- Previously deprecated `'ai'` value of the `color` prop has been removed. Use the `aiVariant` prop instead. + ```js --- type: embed @@ -742,6 +750,8 @@ type: embed ### Link - `isWithinText` prop has been removed. +- Previously deprecated `_link` prop has been removed. Use `ref` instead. +- `'inline-small'` and `'standalone-small'` values of the `variant` prop have been removed. Use `variant="inline"` or `variant="standalone"` with `size="small"` instead. #### New `size` prop @@ -751,13 +761,6 @@ A new `size` prop has been added to control the font size, line height, and icon - `'medium'` (default) - `'large'` -#### Deprecated variant values - -The following variant values have been **deprecated** and will be removed in a future version (still supported but warn): - -- `'inline-small'` -- `'standalone-small'` - ```js --- type: embed @@ -811,6 +814,8 @@ type: embed #### Menu.Item +- Previously deprecated `_node` prop has been removed. Use `ref` instead. + ```js --- type: embed @@ -1029,6 +1034,10 @@ type: embed ``` +### Pagination + +- Previously deprecated `_root` prop has been removed. Use `ref` instead. + ### Pill #### Deprecated color prop values @@ -1189,7 +1198,10 @@ type: embed { ref: HTMLDivElement | null = null - get _content() { - console.warn( - '_content property is deprecated and will be removed in v9, please use ref instead' - ) - - return this.ref - } - private _resizeListener?: ResizeObserver private _debounced?: Debounced> diff --git a/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/index.tsx b/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/index.tsx index 9abb26aa50..40889c1b7f 100644 --- a/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/index.tsx +++ b/packages/ui-drawer-layout/src/DrawerLayout/v2/DrawerTray/index.tsx @@ -78,14 +78,6 @@ class DrawerTray extends Component< private _DOMNode: PortalNode = null - get _content() { - console.warn( - '_content property is deprecated and will be removed in v9, please use ref instead' - ) - - return this.ref - } - constructor(props: DrawerLayoutTrayProps) { super(props) diff --git a/packages/ui-form-field/README.md b/packages/ui-form-field/README.md index 5c820a74a5..623520f09d 100644 --- a/packages/ui-form-field/README.md +++ b/packages/ui-form-field/README.md @@ -12,7 +12,6 @@ The `ui-form-field` package contains the following: - [FormField](FormField) - [FormFieldGroup](FormFieldGroup) -- [FormFieldLabel](FormFieldLabel) - [FormFieldLayout](FormFieldLayout) - [FormFieldMessage](FormFieldMessage) - [FormFieldMessages](FormFieldMessages) diff --git a/packages/ui-form-field/src/FormFieldLabel/__tests__/FormFieldLabel.test.tsx b/packages/ui-form-field/src/FormFieldLabel/__tests__/FormFieldLabel.test.tsx index 34c7a999a9..d4db35b85d 100644 --- a/packages/ui-form-field/src/FormFieldLabel/__tests__/FormFieldLabel.test.tsx +++ b/packages/ui-form-field/src/FormFieldLabel/__tests__/FormFieldLabel.test.tsx @@ -25,7 +25,7 @@ import { render } from '@testing-library/react' import { vi } from 'vitest' import { runAxeCheck } from '@instructure/ui-axe-check' -import { FormFieldLabel } from '@instructure/ui-form-field/latest' +import { FormFieldLabel } from '@instructure/ui-form-field/v11_6' import '@testing-library/jest-dom' describe('', () => { diff --git a/packages/ui-form-field/src/FormFieldLabel/v2/index.tsx b/packages/ui-form-field/src/FormFieldLabel/v2/index.tsx deleted file mode 100644 index 4fa9fb838b..0000000000 --- a/packages/ui-form-field/src/FormFieldLabel/v2/index.tsx +++ /dev/null @@ -1,95 +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 { Component } from 'react' - -import { omitProps, getElementType } from '@instructure/ui-react-utils' -import { withStyle } from '@instructure/emotion' - -import generateStyle from './styles' -import generateComponentTheme from './theme' - -import { allowedProps } from './props' -import type { FormFieldLabelProps } from './props' - -/** ---- -parent: FormField ---- - -This is a helper component that is used by most of the custom form -components. In most cases it shouldn't be used directly. - -```js ---- -type: example ---- -Hello -``` - - @deprecated since version 10. This is an internal component that will be - removed in the future -**/ -@withStyle(generateStyle, generateComponentTheme) -class FormFieldLabel extends Component { - static readonly componentId = 'FormFieldLabel' - - static allowedProps = allowedProps - static defaultProps = { - as: 'span' - } as const - - ref: Element | null = null - - handleRef = (el: Element | null) => { - this.ref = el - } - - componentDidMount() { - this.props.makeStyles?.() - } - - componentDidUpdate() { - this.props.makeStyles?.() - } - - render() { - const ElementType = getElementType(FormFieldLabel, this.props) - - const { styles, children } = this.props - - return ( - - {children} - - ) - } -} - -export default FormFieldLabel -export { FormFieldLabel } diff --git a/packages/ui-form-field/src/FormFieldLabel/v2/props.ts b/packages/ui-form-field/src/FormFieldLabel/v2/props.ts deleted file mode 100644 index cfb4ac4de7..0000000000 --- a/packages/ui-form-field/src/FormFieldLabel/v2/props.ts +++ /dev/null @@ -1,49 +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 { - AsElementType, - FormFieldLabelTheme, - OtherHTMLAttributes -} from '@instructure/shared-types' -import type { WithStyleProps, ComponentStyle } from '@instructure/emotion' - -type FormFieldLabelOwnProps = { - children: React.ReactNode - as?: AsElementType -} - -type PropKeys = keyof FormFieldLabelOwnProps - -type AllowedPropKeys = Readonly> - -type FormFieldLabelProps = FormFieldLabelOwnProps & - WithStyleProps & - OtherHTMLAttributes - -type FormFieldLabelStyle = ComponentStyle<'formFieldLabel'> -const allowedProps: AllowedPropKeys = ['as', 'children'] - -export type { FormFieldLabelProps, FormFieldLabelStyle } -export { allowedProps } diff --git a/packages/ui-form-field/src/FormFieldLabel/v2/styles.ts b/packages/ui-form-field/src/FormFieldLabel/v2/styles.ts deleted file mode 100644 index 4900c1a92e..0000000000 --- a/packages/ui-form-field/src/FormFieldLabel/v2/styles.ts +++ /dev/null @@ -1,74 +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 { hasVisibleChildren } from '@instructure/ui-a11y-utils' - -import type { FormFieldLabelTheme } from '@instructure/shared-types' -import type { FormFieldLabelProps, FormFieldLabelStyle } from './props' - -/** - * --- - * private: true - * --- - * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. - * @param {Object} props the props of the component, the style is applied to - * @param {Object} state the state of the component, the style is applied to - * @return {Object} The final style object, which will be used in the component - */ -const generateStyle = ( - componentTheme: FormFieldLabelTheme, - props: FormFieldLabelProps -): FormFieldLabelStyle => { - const { children } = props - - const hasContent = hasVisibleChildren(children) - - const labelStyles = { - all: 'initial', - display: 'block', - ...(hasContent && { - color: componentTheme.color, - fontFamily: componentTheme.fontFamily, - fontWeight: componentTheme.fontWeight, - fontSize: componentTheme.fontSize, - lineHeight: componentTheme.lineHeight, - margin: 0, - textAlign: 'inherit' - }) - } - - return { - formFieldLabel: { - label: 'formFieldLabel', - ...labelStyles, - - // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping) - '&:is(label)': labelStyles, - '&:-webkit-any(label)': labelStyles - } - } -} - -export default generateStyle diff --git a/packages/ui-form-field/src/FormFieldLabel/v2/theme.ts b/packages/ui-form-field/src/FormFieldLabel/v2/theme.ts deleted file mode 100644 index e30f82a61d..0000000000 --- a/packages/ui-form-field/src/FormFieldLabel/v2/theme.ts +++ /dev/null @@ -1,56 +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, ThemeSpecificStyle } from '@instructure/ui-themes' -import { FormFieldLabelTheme } 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): FormFieldLabelTheme => { - const { colors, typography, key: themeName } = theme - - const themeSpecificStyle: ThemeSpecificStyle = { - canvas: { - color: theme['ic-brand-font-color-dark'] - } - } - - const componentVariables: FormFieldLabelTheme = { - color: colors?.contrasts?.grey125125, - fontFamily: typography?.fontFamily, - fontWeight: typography?.fontWeightBold, - fontSize: typography?.fontSizeMedium, - lineHeight: typography?.lineHeightFit - } - - return { - ...componentVariables, - ...themeSpecificStyle[themeName] - } -} - -export default generateComponentTheme diff --git a/packages/ui-form-field/src/exports/b.ts b/packages/ui-form-field/src/exports/b.ts index 633d1a4727..ae1178507c 100644 --- a/packages/ui-form-field/src/exports/b.ts +++ b/packages/ui-form-field/src/exports/b.ts @@ -23,7 +23,6 @@ */ export { FormField } from '../FormField/v2' -export { FormFieldLabel } from '../FormFieldLabel/v2' export { FormFieldMessage } from '../FormFieldMessage/v2' export { FormFieldMessages } from '../FormFieldMessages/v2' export { FormFieldLayout } from '../FormFieldLayout/v2' @@ -35,7 +34,6 @@ export type { FormMessageChild } from '../utils/v1/FormPropTypes' export type { FormFieldOwnProps, FormFieldProps } from '../FormField/v2/props' -export type { FormFieldLabelProps } from '../FormFieldLabel/v2/props' export type { FormFieldMessageProps } from '../FormFieldMessage/v2/props' export type { FormFieldMessagesProps } from '../FormFieldMessages/v2/props' export type { FormFieldLayoutProps } from '../FormFieldLayout/v2/props' diff --git a/packages/ui-heading/src/Heading/v2/props.ts b/packages/ui-heading/src/Heading/v2/props.ts index 44ab944f4c..f2013ad1f5 100644 --- a/packages/ui-heading/src/Heading/v2/props.ts +++ b/packages/ui-heading/src/Heading/v2/props.ts @@ -51,7 +51,7 @@ type HeadingOwnProps = { */ border?: 'none' | 'top' | 'bottom' /** - * The font color to render, NOTE: `ai` color is deprecated. Use the `aiVariant` prop instead + * The font color to render */ color?: | 'primary' @@ -61,7 +61,6 @@ type HeadingOwnProps = { | 'inherit' | 'primary-on' | 'secondary-on' - | 'ai' /** * The level of the heading in the DOM: h1 is largest; h6 is smallest. */ diff --git a/packages/ui-heading/src/Heading/v2/styles.ts b/packages/ui-heading/src/Heading/v2/styles.ts index f6bd098d75..c6acf92f8c 100644 --- a/packages/ui-heading/src/Heading/v2/styles.ts +++ b/packages/ui-heading/src/Heading/v2/styles.ts @@ -129,17 +129,7 @@ const generateStyle = ( 'primary-inverse': { color: componentTheme.inverseColor }, 'secondary-inverse': { color: componentTheme.inverseColor }, 'primary-on': { color: componentTheme.baseOnColor }, - 'secondary-on': { color: componentTheme.mutedOnColor }, - ai: { - background: ` - linear-gradient(to bottom, ${componentTheme.aiTextTopGradientColor} 0%, ${componentTheme.aiTextBottomGradientColor} 100%) text`, - border: 'solid transparent', - WebkitTextFillColor: 'transparent', - '@media print': { - background: 'transparent', - WebkitTextFillColor: 'unset' - } - } + 'secondary-on': { color: componentTheme.mutedOnColor } } const borderStyles = { diff --git a/packages/ui-link/src/Link/v2/README.md b/packages/ui-link/src/Link/v2/README.md index 63714e1c1c..f773fd84d8 100644 --- a/packages/ui-link/src/Link/v2/README.md +++ b/packages/ui-link/src/Link/v2/README.md @@ -97,28 +97,6 @@ type: example ``` -#### Deprecated variant values - -**The following variant values are deprecated and will be removed in a future version:** - -- `inline-small` -- `standalone-small` - -These deprecated values are still supported for backward compatibility but will trigger console warnings. Please update your code to use the new `variant` + `size` prop combination. - -```js ---- -type: code ---- -// Deprecated (still works but triggers warning) -Link -Link - -// Recommended -Link -Link -``` - ### Adding margin Use the `margin` prop to add space to the left or right of the Link. Because diff --git a/packages/ui-link/src/Link/v2/index.tsx b/packages/ui-link/src/Link/v2/index.tsx index be0d1bbb1d..ba0e55f712 100644 --- a/packages/ui-link/src/Link/v2/index.tsx +++ b/packages/ui-link/src/Link/v2/index.tsx @@ -65,13 +65,6 @@ class Link extends Component { state = { hasFocus: false } - get _link() { - console.warn( - '_link property is deprecated and will be removed in v9, please use ref instead' - ) - - return this.ref - } ref: Element | null = null componentDidMount() { @@ -86,31 +79,11 @@ class Link extends Component { variant?: LinkProps['variant'] size?: LinkProps['size'] } => { - const { variant: variantProp, size: sizeProp } = this.props + const { variant, size: sizeProp } = this.props - // Handle deprecated variant values by mapping them to new variant + size props - let variant: 'inline' | 'standalone' | undefined = variantProp as any let size = sizeProp - if (variantProp === 'inline-small' || variantProp === 'standalone-small') { - warn( - false, - `[Link] The variant value "${variantProp}" is deprecated. Use variant="${variantProp.replace( - '-small', - '' - )}" with size="small" instead.` - ) - variant = variantProp.replace('-small', '') as 'inline' | 'standalone' - // Only set size from deprecated variant if size prop is not explicitly provided - if (!sizeProp) { - size = 'small' - } - } else if ( - (variantProp === 'inline' || variantProp === 'standalone') && - !sizeProp - ) { - // When using new variant values without explicit size, default to medium - // This maintains the old behavior where 'inline' and 'standalone' were medium-sized + if ((variant === 'inline' || variant === 'standalone') && !sizeProp) { size = 'medium' } @@ -225,12 +198,7 @@ class Link extends Component { } renderIcon() { - const { - display, - renderIcon, - variant: variantProp, - size: sizeProp - } = this.props + const { display, renderIcon, variant, size: sizeProp } = this.props warn( // if display prop is used, warn about icon or TruncateText @@ -238,14 +206,8 @@ class Link extends Component { '[Link] Using the display property with an icon may cause layout issues.' ) - // Determine the actual size being used (considering deprecated variants) let size = sizeProp - if (variantProp === 'inline-small' || variantProp === 'standalone-small') { - size = sizeProp || 'small' - } else if ( - (variantProp === 'inline' || variantProp === 'standalone') && - !sizeProp - ) { + if ((variant === 'inline' || variant === 'standalone') && !sizeProp) { size = 'medium' } diff --git a/packages/ui-link/src/Link/v2/props.ts b/packages/ui-link/src/Link/v2/props.ts index c7598754da..f750e321a3 100644 --- a/packages/ui-link/src/Link/v2/props.ts +++ b/packages/ui-link/src/Link/v2/props.ts @@ -127,12 +127,8 @@ type LinkOwnProps = { * Sets pre-defined values for the component to achieve specific roles for the component * - `inline` * - `standalone` - * - * __Deprecated values:__ - * - `inline-small` - * - `standalone-small` */ - variant?: 'inline' | 'standalone' | 'inline-small' | 'standalone-small' + variant?: 'inline' | 'standalone' /** * Sets the size of the link (font size, line height, and icon gap) diff --git a/packages/ui-menu/src/Menu/v2/MenuItem/index.tsx b/packages/ui-menu/src/Menu/v2/MenuItem/index.tsx index a5f54bdf23..b7cd510447 100644 --- a/packages/ui-menu/src/Menu/v2/MenuItem/index.tsx +++ b/packages/ui-menu/src/Menu/v2/MenuItem/index.tsx @@ -79,14 +79,6 @@ class MenuItem extends Component { this.labelId = props.deterministicId!('MenuItem__label') } - get _node() { - console.warn( - '_node property is deprecated and will be removed in v9, please use ref instead' - ) - - return this.ref - } - labelId: string ref: Element | null = null diff --git a/packages/ui-pagination/src/Pagination/v2/index.tsx b/packages/ui-pagination/src/Pagination/v2/index.tsx index 489787176f..74165eb484 100644 --- a/packages/ui-pagination/src/Pagination/v2/index.tsx +++ b/packages/ui-pagination/src/Pagination/v2/index.tsx @@ -131,14 +131,6 @@ class Pagination extends Component { this._labelId = props.deterministicId!() } - get _root() { - console.warn( - '_root property is deprecated and will be removed in v9, please use ref instead' - ) - - return this.ref - } - get inputMode() { return this.props.variant === 'input' } diff --git a/packages/ui-simple-select/src/SimpleSelect/v2/index.tsx b/packages/ui-simple-select/src/SimpleSelect/v2/index.tsx index d9452719e2..8c846887c8 100644 --- a/packages/ui-simple-select/src/SimpleSelect/v2/index.tsx +++ b/packages/ui-simple-select/src/SimpleSelect/v2/index.tsx @@ -107,14 +107,6 @@ class SimpleSelect extends Component { this._emptyOptionId = props.deterministicId!('Select-EmptyOption') } - get _select() { - console.warn( - '_select property is deprecated and will be removed in v9, please use ref instead' - ) - - return this.ref - } - focus() { this.ref && this.ref.focus() } diff --git a/packages/ui-tag/src/Tag/v2/index.tsx b/packages/ui-tag/src/Tag/v2/index.tsx index fc8dc9ccc8..39e5ef7b5e 100644 --- a/packages/ui-tag/src/Tag/v2/index.tsx +++ b/packages/ui-tag/src/Tag/v2/index.tsx @@ -126,7 +126,6 @@ class Tag extends Component { disabled, readOnly, text, - title, onClick, margin, styles, @@ -160,7 +159,7 @@ class Tag extends Component { {...(onClick && { onClick: this.handleClick })} disabled={disabled || readOnly} display={undefined} - title={title || (typeof text === 'string' ? text : undefined)} + title={typeof text === 'string' ? text : undefined} data-cid="Tag" onMouseEnter={this.handleIconMouseEnter} onMouseLeave={this.handleIconMouseLeave} diff --git a/packages/ui-tag/src/Tag/v2/props.ts b/packages/ui-tag/src/Tag/v2/props.ts index 1593a51a13..b0ccf49e04 100644 --- a/packages/ui-tag/src/Tag/v2/props.ts +++ b/packages/ui-tag/src/Tag/v2/props.ts @@ -35,11 +35,6 @@ import type { OtherHTMLAttributes } from '@instructure/shared-types' type TagOwnProps = { className?: string text: string | React.ReactNode - /** - * @deprecated since version 10 - * Use of the title attribute is highly problematic due to accessibility concerns - */ - title?: string /** * Whether or not to disable the tag */ @@ -79,7 +74,6 @@ type TagStyle = ComponentStyle<'tag' | 'text' | 'icon'> const allowedProps: AllowedPropKeys = [ 'className', 'text', - 'title', 'disabled', 'readOnly', 'dismissible', diff --git a/packages/ui-time-select/src/TimeSelect/v2/index.tsx b/packages/ui-time-select/src/TimeSelect/v2/index.tsx index 9fa0987932..bb9c410a1a 100644 --- a/packages/ui-time-select/src/TimeSelect/v2/index.tsx +++ b/packages/ui-time-select/src/TimeSelect/v2/index.tsx @@ -101,13 +101,6 @@ class TimeSelect extends Component { this.ref && this.ref.blur() } - get _select() { - console.warn( - '_select property is deprecated and will be removed in v9, please use ref instead' - ) - return this.ref - } - get isControlled() { return typeof this.props.value !== 'undefined' } diff --git a/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarLayout/index.tsx b/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarLayout/index.tsx index f33c1d2eaa..7ae75a999f 100644 --- a/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarLayout/index.tsx +++ b/packages/ui-top-nav-bar/src/TopNavBar/v2/TopNavBarLayout/index.tsx @@ -62,15 +62,6 @@ class TopNavBarLayout extends Component { ref: HTMLElement | null = null - componentDidMount() { - // TODO: Remove this in v10! - if ('desktopConfig' in this.props) { - console.error( - 'Warning: `desktopConfig` prop on [TopNavBar.Layout] is deprecated, please remove it from your code. Further info: https://instructure.design/#v9-upgrade-guide/#deprecated-properties' - ) - } - } - handleRef = (el: HTMLElement | null) => { const { elementRef } = this.props diff --git a/packages/ui-tree-browser/src/TreeBrowser/v2/index.tsx b/packages/ui-tree-browser/src/TreeBrowser/v2/index.tsx index 3fd3a3ed82..f1180efe26 100644 --- a/packages/ui-tree-browser/src/TreeBrowser/v2/index.tsx +++ b/packages/ui-tree-browser/src/TreeBrowser/v2/index.tsx @@ -109,13 +109,6 @@ class TreeBrowser extends Component { this.props.makeStyles?.() } - get _root() { - console.warn( - '_root property is deprecated and will be removed in v9, please use ref instead' - ) - return this.ref - } - handleCollectionClick = ( e: SyntheticEvent, collection: CollectionData, diff --git a/packages/ui-truncate-text/src/TruncateText/v2/index.tsx b/packages/ui-truncate-text/src/TruncateText/v2/index.tsx index c1834227cc..0afdd4e3e1 100644 --- a/packages/ui-truncate-text/src/TruncateText/v2/index.tsx +++ b/packages/ui-truncate-text/src/TruncateText/v2/index.tsx @@ -73,13 +73,6 @@ class TruncateText extends Component { this.state = this.initialState } - get _ref() { - console.warn( - '_ref property is deprecated and will be removed in v9, please use ref instead' - ) - return this.ref - } - get initialState() { return { isTruncated: false, diff --git a/packages/ui-view/src/View/v2/index.tsx b/packages/ui-view/src/View/v2/index.tsx index 5ef642360e..b30adfa182 100644 --- a/packages/ui-view/src/View/v2/index.tsx +++ b/packages/ui-view/src/View/v2/index.tsx @@ -106,13 +106,6 @@ class View extends Component { } private spanMarginVerified: boolean - get _element() { - console.warn( - '_element property is deprecated and will be removed in v9, please use ref instead' - ) - - return this.ref - } constructor(props: ViewProps) { super(props) diff --git a/packages/ui-view/src/View/v2/props.ts b/packages/ui-view/src/View/v2/props.ts index 69e25a0b5a..c14df20c36 100644 --- a/packages/ui-view/src/View/v2/props.ts +++ b/packages/ui-view/src/View/v2/props.ts @@ -201,17 +201,6 @@ type ViewOwnProps = { * Valid values are `auto`, `contain`, `none`. */ overscrollBehavior?: 'auto' | 'contain' | 'none' - /** - * DEPRECATED, this prop does nothing. Use the focusOutlineOffset theme - * variable - * - * Sets the radius of the focus border ring. - * - * For offset type, the given value is increased by the difference between the focus ring' offset and the focus ring's width. - * - * For inset type, the given value is decreased by the sum of the focus ring' offset and the focus ring's width. - */ - focusRingBorderRadius?: string /** * Display the focus ring when any of the descendants is focused. * (uses the [:focus-within](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) @@ -270,7 +259,6 @@ const allowedProps: AllowedPropKeys = [ 'width', 'withFocusOutline', 'withVisualDebug', - 'focusRingBorderRadius', 'focusWithin' ] diff --git a/packages/ui/src/v11_7.ts b/packages/ui/src/v11_7.ts index 2983c8dadb..9c9c04d426 100644 --- a/packages/ui/src/v11_7.ts +++ b/packages/ui/src/v11_7.ts @@ -152,7 +152,6 @@ export { Focusable } from '@instructure/ui-focusable' export type { FocusableProps } from '@instructure/ui-focusable' export { FormField, - FormFieldLabel, FormFieldMessage, FormFieldMessages, FormFieldLayout, @@ -161,7 +160,6 @@ export { export type { FormFieldGroupProps, FormFieldMessageProps, - FormFieldLabelProps, FormFieldMessagesProps, FormFieldLayoutProps, FormFieldOwnProps, diff --git a/regression-test/src/app/link/page.tsx b/regression-test/src/app/link/page.tsx index e99794eb3b..e61d109ed3 100644 --- a/regression-test/src/app/link/page.tsx +++ b/regression-test/src/app/link/page.tsx @@ -102,11 +102,12 @@ export default function LinkPage() { In a line of text, where the text is smaller, use the{' '} } href="https://instructure.github.io/instructure-ui/" > - inline-small + inline + size="small" {' '} link variant @@ -125,14 +126,15 @@ export default function LinkPage() {
- If the link is standalone (not in a text), but smaller, use the{' '} - standalone-small{' '} + If the link is standalone (not in a text), but smaller, use{' '} + standalone with size="small"{' '} - standalone-small + standalone + size="small"