Skip to content
Developerhome

Whats New Sage 200 2025 R1 - Web Amendability

Published   2 June 2025     Less than to read

New Components

  • Time

Removed Components

No components have been removed in this release.

Updated Components

Accordion
  • variant prop has been added
  • iconType prop has been modified
    • Description has changed from “Sets icon type - accepted values: ‘chevron_down’ (default), ‘dropdown’” to “Sets icon type”
    • Type has changed from "chevron_down" | "dropdown" | undefined to "chevron_down" | "chevron_down_thick" | "dropdown" | undefined
  • iconAlign prop has been modified
    • Description has changed from “Sets icon alignment - accepted values: ‘left’, ‘right’ (default)” to “Sets icon alignment”
  • borders prop has been modified
    • Description has changed from “Toggles left and right borders” to “Toggles left and right borders, set to none when variant is subtle”
  • buttonHeading prop has been modified
    • Description has changed from “Renders the accordion heading in the style of a tertiary button” to “(Deprecated) Renders the accordion heading in the style of a tertiary button”
  • scheme prop has been modified
    • Description has changed from “Sets background as white or transparent” to “(Deprecated) Sets background as white or transparent, set to transparent when variant is subtle”
Badge
  • color prop has been added
Box
  • color prop has been added
  • role prop has been added
  • bg prop has been added
  • backgroundColor prop has been added
  • opacity prop has been added
  • aria-hidden prop has been added
  • data-component prop has been added
  • data-element prop has been added
  • data-role prop has been added
  • scrollVariant prop has been modified
    • Description has changed from “scroll styling attribute” to “Scroll styling attribute”
  • boxSizing prop has been modified
    • Description has changed from “set the box-sizing attribute of the Box component” to “Set the box-sizing attribute of the Box component”
  • tabIndex prop has been modified
    • Type has changed from string | number | undefined to number | undefined
  • gap prop has been modified
    • Type has changed from Gap | undefined to any
  • columnGap prop has been modified
    • Type has changed from Gap | undefined to any
  • rowGap prop has been modified
    • Type has changed from Gap | undefined to any
Button
  • data-component prop has been added
  • data-element prop has been added
  • data-role prop has been added
  • aria-labelledby prop has been added
  • aria-describedby prop has been added
  • id prop has been modified
    • Description has changed from “id attribute” to “”
ButtonMinor
  • data-component prop has been added
  • data-element prop has been added
  • data-role prop has been added
  • aria-labelledby prop has been added
  • aria-describedby prop has been added
  • id prop has been modified
    • Description has changed from “id attribute” to “”
Checkbox
  • isOptional prop has been added
  • id prop has been modified
    • Description has changed from “Unique Identifier for the input. Will use a randomly generated GUID if none is provided” to “”
  • onChange prop has been modified
    • Type has changed from ((ev: ChangeEvent<HTMLInputElement>) => void) | undefined to ((e: TransformedChangeEvent) => void) | undefined
  • onBlur prop has been modified
    • Type has changed from ((ev: FocusEvent<HTMLInputElement, Element>) => void) | undefined to ((e: TransformedChangeEvent) => void) | undefined
Confirm
  • title prop has been modified
    • Description has changed from “Title displayed at top of dialog” to “Title displayed at the top of a dialog.”
  • id prop has been modified
    • Description has changed from “Passed to data-dialog-id in the dom” to “Passed to data-dialog-id in the dom.”
  • subtitle prop has been modified
    • Description has changed from “Subtitle displayed at top of dialog” to “Subtitle displayed at the top of a dialog.”
Date
  • widths prop has been added
  • inputBorderRadius prop has been added
  • inputName prop has been added
  • ariaLabel prop has been added
  • id prop has been modified
    • Description has changed from “Unique identifier for the input. Label id will be based on it, using following pattern: [id]-label. Will use a randomly generated GUID if none is provided.” to “”
  • onChange prop has been modified
    • Type has changed from (ev: DateChangeEvent) => void to ((e: TransformedChangeEvent) => void) | undefined
    • Prop is no longer mandatory
  • onBlur prop has been modified
    • Type has changed from ((ev: FocusEvent<HTMLInputElement, Element>) => void) | undefined to ((e: TransformedChangeEvent) => void) | undefined
  • isOptional prop has been modified
    • Description has changed from “[Legacy] Flag to configure component as optional in Form” to “Flag to configure component as optional.”
Decimal
  • isOptional prop has been added
  • inputBorderRadius prop has been added
  • wholePartMaxLength prop has been added
  • dataId prop has been modified
    • Description has changed from “” to “Key of a value to fetch from the Redux store.”
  • allowNegative prop has been modified
    • Description has changed from “” to “Allows a negative value”
  • ariaLabel prop has been modified
    • Description has changed from “” to “Prop to specify the aria-labelledby property of the component”
  • widths prop has been modified
    • Description has changed from “” to “Breakpoints that specify how your responsive layout adapts to different device or viewport sizes”
  • onChange prop has been modified
    • Description has changed from “Handler for change event if input is meant to be used as a controlled component” to “”
    • Type has changed from ((ev: CustomEvent) => void) | undefined to ((ev: TransformedOnChangeArg) => void) | undefined
  • onBlur prop has been modified
    • Description has changed from “Handler for blur event” to “”
    • Type has changed from ((ev: CustomEvent) => void) | undefined to ((ev: TransformedOnChangeArg) => void) | undefined
  • precision prop has been modified
    • Type has changed from 0 | 3 | 9 | 1 | 2 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | 13 | 14 | 15 | undefined to number | undefined
Dialog
  • title prop has been modified
    • Description has changed from “Title displayed at top of dialog” to “Title displayed at the top of a dialog.”
  • id prop has been modified
    • Description has changed from “Passed to data-dialog-id in the dom” to “Passed to data-dialog-id in the dom.”
  • subtitle prop has been modified
    • Description has changed from “Subtitle displayed at top of dialog” to “Subtitle displayed at the top of a dialog.”
DialogFullscreen
  • title prop has been modified
    • Description has changed from “Title displayed at top of dialog” to “Title displayed at the top of a dialog.”
  • id prop has been modified
    • Description has changed from “Passed to data-dialog-id in the dom” to “Passed to data-dialog-id in the dom.”
  • subtitle prop has been modified
    • Description has changed from “Subtitle displayed at top of dialog” to “Subtitle displayed at the top of a dialog.”
Grid
  • showDeleteColumnHeader prop has been removed
  • hideDeleteColumnHeader prop has been added
  • rowDragManaged prop has been modified
    • Description has changed from “Set to true to enable Managed Row Dragging. Default: false” to “Set to true to enable Managed Row Dragging.”
    • Default value has changed from null to false
  • quickFilterText prop has been modified
    • Description has changed from “Rows are filtered using this text as a quick filter.” to “Rows are filtered using this text as a Quick Filter.”
  • alwaysShowVerticalScroll prop has been modified
    • Description has changed from “Set to true to always show the vertical scrollbar. Default: false” to “Set to true to always show the vertical scrollbar.”
    • Default value has changed from null to false
GridColumn
  • iconType prop has been modified
    • Type has changed from "filter" | "error" | "info" | "warning" | "chevron_down" | "dropdown" | "none" | "grid" | "add" | "admin" | "alert" | "alert_on" | "analysis" | "arrow" | "arrow_bottom_right_circle" | ... 222 more ... | undefined to "filter" | "error" | "info" | "warning" | "none" | "chevron_down" | "chevron_down_thick" | "dropdown" | "grid" | "target" | "accessibility_web" | "add" | "admin" | "alert" | "alert_on" | ... 257 more ... | undefined
  • sort prop has been modified
    • Type has changed from "asc" | "desc" | null | undefined to SortDirection | undefined
  • hide prop has been modified
    • Description has changed from “Set to true for this column to be hidden. Default: false” to “Set to true for this column to be hidden.”
    • Default value has changed from null to false
  • sortable prop has been modified
    • Description has changed from “Set to true to allow sorting on this column. Default: false” to “Set to false to disable sorting which is enabled by default.”
    • Default value has changed from null to true
  • suppressMovable prop has been modified
    • Description has changed from “Set to true if you do not want this column to be movable via dragging. Default: false” to “Set to true if you do not want this column to be movable via dragging.”
    • Default value has changed from null to false
  • cellEditorPopupPosition prop has been modified
    • Description has changed from “Set the position for the popup cell editor. Possible values are
      • over Popup will be positioned over the cell
      • under Popup will be positioned below the cell leaving the cell value visible.

      Default: over.” to “Set the position for the popup cell editor. Possible values are

      • over Popup will be positioned over the cell
      • under Popup will be positioned below the cell leaving the cell value visible.”
    • Type has changed from string | undefined to "over" | "under" | undefined
    • Default value has changed from null to 'over'
  • singleClickEdit prop has been modified
    • Description has changed from “Set to true to have cells under this column enter edit mode after single click. Default: false” to “Set to true to have cells under this column enter edit mode after single click.”
    • Default value has changed from null to false
  • floatingFilter prop has been modified
    • Description has changed from “Whether to display a floating filter for this column. Default: false” to “Whether to display a floating filter for this column.”
    • Default value has changed from null to false
  • suppressMenu prop has been modified
    • Description has changed from “Set to true if no menu should be shown for this column header. Default: false” to “@deprecated v31.1 Use suppressHeaderMenuButton instead”
  • autoHeight prop has been modified
    • Description has changed from “Set to true to have the grid calculate the height of a row based on contents of this column. Default: false” to “Set to true to have the grid calculate the height of a row based on contents of this column.”
    • Default value has changed from null to false
  • wrapText prop has been modified
    • Description has changed from “Set to true to have the text wrap inside the cell - typically used with autoHeight. Default: false” to “Set to true to have the text wrap inside the cell - typically used with autoHeight.”
    • Default value has changed from null to false
  • enableCellChangeFlash prop has been modified
    • Description has changed from “Set to true to flash a cell when it’s refreshed. Default: false” to “Set to true to flash a cell when it’s refreshed.”
    • Default value has changed from null to false
  • suppressCellFlash prop has been modified
    • Description has changed from “Set to true to prevent this column from flashing on changes. Only applicable if cell flashing is turned on for the grid. Default: false” to “Set to true to prevent this column from flashing on changes. Only applicable if cell flashing is turned on for the grid. @deprecated 31.2 Use enableCellChangeFlash={false} in the ColDef.”
    • Default value has changed from null to false
  • sortingOrder prop has been modified
    • Type has changed from ("asc" | "desc" | null)[] | undefined to SortDirection[] | undefined
  • unSortIcon prop has been modified
    • Description has changed from “Set to true if you want the unsorted icon to be shown when no sort is applied to this column. Default: false” to “Set to true if you want the unsorted icon to be shown when no sort is applied to this column.”
    • Default value has changed from null to false
  • resizable prop has been modified
    • Description has changed from “Set to true to allow this column should be resized. Default: false” to “Set to false to disable resizing which is enabled by default.”
    • Default value has changed from null to true
  • suppressSizeToFit prop has been modified
    • Description has changed from “Set to true if you want this column’s width to be fixed during ‘size to fit’ operations. Default: false” to “Set to true if you want this column’s width to be fixed during ‘size to fit’ operations.”
    • Default value has changed from null to false
Heading
  • helpId prop has been added
  • noHelp prop has been added
  • helpAriaLabel prop has been modified
    • Description has changed from “Aria label for rendered help component” to “”
  • helpLink prop has been modified
    • Description has changed from “Defines the help link for the heading.” to “”
Icon
  • id prop has been modified
    • Description has changed from “Id passed to the icon.” to “”
  • type prop has been modified
    • Type has changed from "filter" | "error" | "info" | "warning" | "chevron_down" | "dropdown" | "none" | "grid" | "add" | "admin" | "alert" | "alert_on" | "analysis" | "arrow" | "arrow_bottom_right_circle" | ... 221 more ... | "messages" to "filter" | "error" | "info" | "warning" | "none" | "chevron_down" | "chevron_down_thick" | "dropdown" | "grid" | "target" | "accessibility_web" | "add" | "admin" | "alert" | "alert_on" | ... 256 more ... | "messages"
Image
  • left prop has been added
  • right prop has been added
  • bottom prop has been added
  • top prop has been added
  • position prop has been added
  • removeAriaLabelOnIcon prop has been added
  • hasFocus prop has been added
  • to prop has been modified

    • Description has changed from “For links within the Sage 200 Single Page Application. Can be a string or an object. To link to an external page, use the href prop if the component provides it.

      • A string representation of the Link location, created by concatenating the location’s pathname, search, and hash properties.
      • An object that can have any of the following properties:
      • pathname: A string representing the path to link to.
      • search: A string representation of query parameters.
      • hash: A hash to put in the URL, e.g. #a-hash.
      • state: State to persist to the location.

      Pass an array to the routeParams prop to replace values in any string (even if you use the object form).” to “For links within the Sage 200 Single Page Application. Can be a string or an object. To link to an external page, use the href prop if the component provides it.

      • A string representation of the Link location, created by concatenating the location’s pathname, search, and hash properties.
      • An object that can have any of the following properties:
        • pathname: A string representing the path to link to.
        • search: A string representation of query parameters.
        • hash: A hash to put in the URL, e.g. #a-hash.
        • state: State to persist to the location.

      Pass an array to the routeParams prop to replace values in any string (even if you use the object form).”

    • Type has changed from string | { pathname: string; search?: string | undefined; hash?: string | undefined; state?: { [key: string]: any; } | undefined; } | undefined to string | Function | LinkTo | undefined

  • replace prop has been modified
    • Description has changed from “When true, clicking the link or following the redirect will replace the current entry in the history stack instead of adding a new one. (only applicable when using to for links within the Sage 200 Single Page Application)” to “When true, clicking the link or following the redirect will replace the current entry in the history stack instead of adding a new one. (Only applicable when using to for links within the Sage 200 Single Page Application)”
  • routeParams prop has been modified
    • Description has changed from “An array of “get” objects used for string replacements in the to, href or route props.” to “An array of “get” objects used for string replacements in the to, href or route props. Represents the parameters passed to a route.”
    • Type has changed from { get: { [key: string]: any; }; }[] | undefined to RouteParam[] | undefined
List
  • color prop has been added
  • bg prop has been added
  • backgroundColor prop has been added
  • opacity prop has been added
  • aria-hidden prop has been added
  • data-component prop has been added
  • data-element prop has been added
  • data-role prop has been added
  • textAlign prop has been added
  • screenReaderOnly prop has been added
  • isDisabled prop has been added
  • as prop has been modified
    • Type has changed from ElementType<any> | undefined to ElementType<any, keyof IntrinsicElements> | undefined
  • whiteSpace prop has been modified
    • Description has changed from “Override the white-space type” to “Override the white-space”
ListItem
  • color prop has been added
  • bg prop has been added
  • backgroundColor prop has been added
  • opacity prop has been added
  • aria-hidden prop has been added
  • data-component prop has been added
  • data-element prop has been added
  • data-role prop has been added
  • textAlign prop has been added
  • screenReaderOnly prop has been added
  • isDisabled prop has been added
  • as prop has been modified
    • Type has changed from ElementType<any> | undefined to ElementType<any, keyof IntrinsicElements> | undefined
  • variant prop has been modified
    • Type has changed from "p" | "small" | "sub" | "h1" | "h2" | "h3" | "h4" | "h5" | "b" | "big" | "em" | "ol" | "strong" | "sup" | "ul" | "h1-large" | "segment-header" | "segment-header-small" | "segment-subheader" | "segment-subheader-alt" | undefined to "p" | "small" | "sub" | "h1" | "h2" | "h3" | "h4" | "h5" | "b" | "big" | "em" | "ol" | "span" | "strong" | "sup" | "ul" | "h1-large" | "segment-header" | "segment-header-small" | "segment-subheader" | "segment-subheader-alt" | undefined
  • wordWrap prop has been modified
    • Description has changed from “Override the word-wrap type” to “Override the word-wrap”
  • whiteSpace prop has been modified
    • Description has changed from “Override the white-space type” to “Override the white-space”
  • routeParams prop has been modified
    • Type has changed from { get: { [key: string]: any; }; }[] | undefined to RouteParam[] | undefined
  • size prop has been added
  • aria-label prop has been added
  • data-element prop has been added
  • data-role prop has been added
  • buttonType prop has been added
  • subtext prop has been added
  • text prop has been added
  • align prop has been added
Message
  • id prop has been modified
    • Description has changed from “set custom id to component root” to “”
MultiActionButton
  • id prop has been added
  • aria-label prop has been added
Number
  • enforceCharacterLimit prop has been removed
  • inputBorderRadius prop has been added
  • allowNegative prop has been added
  • id prop has been modified
    • Description has changed from “Unique identifier for the input. Label id will be based on it, using following pattern: [id]-label. Will use a randomly generated GUID if none is provided.” to “”
  • onChange prop has been modified
    • Type has changed from ((ev: ChangeEvent<HTMLInputElement>) => void) | undefined to ((e: TransformedOnChangeArg) => void) | undefined
  • onBlur prop has been modified
    • Type has changed from ((ev: FocusEvent<HTMLInputElement, Element>) => void) | undefined to ((e: TransformedOnChangeArg) => void) | undefined
  • isOptional prop has been modified
    • Description has changed from “[Legacy] Flag to configure component as optional in Form” to “Flag to configure component as optional.”
Pill
  • isDarkBackground prop has been added
  • colorVariant prop has been modified
    • Type has changed from "warning" | "negative" | "neutral" | "positive" | undefined to "warning" | "negative" | "neutral" | "positive" | "information" | "neutralWhite" | undefined
Pod
  • widths prop has been added
  • readOnly prop has been added
  • title prop has been modified
    • Description has changed from “Title for the pod h4 element always shown” to “Title for the pod”
ProgressTracker
  • labelWidth prop has been added
  • length prop has been modified
    • Description has changed from “Length of the progress bar, any valid css string.” to “Length of the component, any valid css string.”
  • labelsPosition prop has been modified
    • Description has changed from “The position the value label are rendered in. Top/bottom apply to horizontal and left/right to vertical orientation.” to “The position the value label are rendered in. Top/bottom apply to horizontal and left applies to vertical orientation.”
    • Type has changed from "bottom" | "top" | undefined to "left" | "bottom" | "top" | undefined
RadioButton
  • isOptional prop has been added
  • id prop has been modified
    • Description has changed from “Unique Identifier for the input. Will use a randomly generated GUID if none is provided” to “”
RadioButtonGroup
  • readOnly prop has been added
  • disabled prop has been added
  • isOptional prop has been added
  • legendHelp prop has been added
  • onChange prop has been modified
    • Type has changed from ((ev: ChangeEvent<HTMLInputElement>) => void) | undefined to ((e: TransformedChangeEvent) => void) | undefined
  • onBlur prop has been modified
    • Type has changed from ((ev: FocusEvent<HTMLInputElement, Element>) => void) | undefined to ((e: TransformedChangeEvent) => void) | undefined
Redirect
  • routeParams prop has been modified
    • Type has changed from { get: { [key: string]: any; }; }[] | undefined to RouteParam[] | undefined
SplitButton
  • id prop has been added
  • aria-label prop has been added
Tabs
  • borders prop has been modified
    • Type has changed from "on" | "off" | "no left side" | "no right side" | "no sides" | undefined to "off" | "on" | "no left side" | "no right side" | "no sides" | undefined
  • size prop has been modified
    • Type has changed from "large" | "default" | undefined to "default" | "large" | undefined
Textarea
  • enforceCharacterLimit prop has been removed
  • borderRadius prop has been added
  • isOptional prop has been added
  • inputBorderRadius prop has been added
  • ariaLabel prop has been added
  • forceUpperCase prop has been added
  • hideBorders prop has been added
  • forceNumeric prop has been added
  • displayUppercase prop has been added
  • id prop has been modified
    • Description has changed from “id of the input” to “”
  • onChange prop has been modified
    • Type has changed from ((ev: ChangeEvent<HTMLInputElement>) => void) | undefined to ((e: TransformedOnChangeArg) => void) | undefined
  • onBlur prop has been modified
    • Type has changed from ((ev: FocusEvent<HTMLInputElement, Element>) => void) | undefined to ((e: TransformedOnChangeArg) => void) | undefined
Textbox
  • maxLength prop has been removed
  • inputBorderRadius prop has been added
  • ariaLabel prop has been added
  • displayUppercase prop has been added
  • forceNumeric prop has been modified
    • Description has changed from “If true, only numeric characters will be accepted” to “Remove any non-numeric characters”
  • forceUpperCase prop has been modified
    • Description has changed from “If true, characters will be converted to uppercase” to “Convert the value to uppercase”
    • Default value has changed from false to null
  • id prop has been modified
    • Description has changed from “Unique identifier for the input. Label id will be based on it, using following pattern: [id]-label. Will use a randomly generated GUID if none is provided.” to “”
  • onChange prop has been modified
    • Type has changed from ((ev: ChangeEvent<HTMLInputElement>) => void) | undefined to ((e: TransformedOnChangeArg) => void) | undefined
  • onBlur prop has been modified
    • Type has changed from ((ev: FocusEvent<HTMLInputElement, Element>) => void) | undefined to ((e: TransformedOnChangeArg) => void) | undefined
  • isOptional prop has been modified
    • Description has changed from “[Legacy] Flag to configure component as optional in Form” to “Flag to configure component as optional.”
Toast
  • align prop has been added
  • alignY prop has been added
  • id prop has been modified
    • Description has changed from “Custom id” to “”
Typography
  • color prop has been added
  • bg prop has been added
  • backgroundColor prop has been added
  • opacity prop has been added
  • aria-hidden prop has been added
  • data-component prop has been added
  • data-element prop has been added
  • data-role prop has been added
  • textAlign prop has been added
  • screenReaderOnly prop has been added
  • isDisabled prop has been added
  • as prop has been modified
    • Type has changed from ElementType<any> | undefined to ElementType<any, keyof IntrinsicElements> | undefined
  • variant prop has been modified
    • Type has changed from "p" | "small" | "sub" | "h1" | "h2" | "h3" | "h4" | "h5" | "b" | "big" | "em" | "ol" | "strong" | "sup" | "ul" | "h1-large" | "segment-header" | "segment-header-small" | "segment-subheader" | "segment-subheader-alt" | undefined to "p" | "small" | "sub" | "h1" | "h2" | "h3" | "h4" | "h5" | "b" | "big" | "em" | "ol" | "span" | "strong" | "sup" | "ul" | "h1-large" | "segment-header" | "segment-header-small" | "segment-subheader" | "segment-subheader-alt" | undefined
  • wordWrap prop has been modified
    • Description has changed from “Override the word-wrap type” to “Override the word-wrap”
  • whiteSpace prop has been modified
    • Description has changed from “Override the white-space type” to “Override the white-space”