chore(deps): update dependency @openedx/paragon to v23

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@openedx/paragon	^21.0.0 -> ^21.0.0 || ^23.0.0
@openedx/paragon	21.13.1 -> 23.3.1

---

Release Notes

openedx/paragon (@​openedx/paragon)

v23.3.1

Compare Source

Bug Fixes

• Changed type for design token print-page-size (#​3400) (69e4fb1)

v23.3.0

Compare Source

v23.2.0

Compare Source

Features

• add typings for hooks (#​3125) (f3b0554)

v23.1.1

Compare Source

Bug Fixes

• update customFileHeader during tokens build (#​3371) (19cb46a)

v23.1.0

Compare Source

Features

• use data uri for card fallback image (#​3323) (8a828cf)

v23.0.0

Compare Source

Bug Fixes

• add description for tokens (#​2112) (2ca3b68)
• add missed border utilities (e292ff1)
• add missing css util classes for border-radius (#​2355) (73335b9)
• add missing tokens for Button component (#​1924) (9a08684)
• add source for grid gutter width token (#​2636) (4d8d89a)
• added custom title for CSS output files (#​1985) (df2f764)
• added missing SCSS variables in design tokens (#​2364) (86df23e)
• avoid infinite while loop with colorYiq (#​2349) (101fe25)
• correctly resolve file pathing when replacing SCSS variables usage (#​2638) (0957ffe)
• created missing design tokens (#​2811) (36c80fe)
• ensure design tokens have a valid type attribute (#​1992) (aedb5b6)
• ensure sourceMappingUrl is correct (#​2352) (a7ff171)
• fixed design token for icon btn active state (#​2765) (56836f0)
• fixed typography, display and links sections (1b8516c)
• ignore touchstart events for closing modal popups (#​3087) (59b1cb3)
• install dependencies in tokens module after installing Paragon (0b809c0)
• regenerate icons (8662f3f)
• remove $enable-shadows SCSS flag (#​2423) (948e51e)
• remove ~ from import of react-loading-skeleton (#​2912) (eb6b293)
• remove duplicate selector (1b1786d)
• remove header border radius on FullscreenModal (#​3041) (0f188ae)
• remove header border radius on FullscreenModal (#​3041) (7227fc5)
• remove package.json files from tokens module (2598825)
• remove undefined variables from utility classes (#​2615) (e98894f)
• remove unnecessary parentheses from coloryiq warning (#​2350) (2d23b45)
• renamed custom media query (#​2495) (8959d73)
• scales down card logo cap (#​3218) (524f15d)
• skeleton.css fix (5537250)
• trigger alpha release (5ea28ea)
• trigger release (e2e4d18)
• updates the paragon-theme.json output (#​2334) (faf7dac)
• use min-width in custom-media breakpoint definitions (#​2098) (3cccdeb)

Features

• --output-references CLI arg, registers filters, updates CSS vars format (#​3203) (be634dc)
• [BD-46] Paragon theme CSS is built and published independently of consuming applications (#​2102) (4fbe4ac)
• add ability to disable SelectMenu (#​3138) (b13c142)
• add ability to generate CSS utility classes through design tokens (7c14c6e)
• add CLI interface for design tokens (#​1846) (eb1d19c)
• add custom variables to utility classes (#​2022) (f5f4921)
• add defaults to theme-urls.json output on build (#​2468) (f72bd32)
• add new css variable to DataTable (8570521)
• add new tokens and cleanup after rebase (9184d80)
• add new tokens for Form, ColorPicker, and Icon components (8ed7630)
• add Newsstand icon (#​3275) (9806d5f)
• Add support for tokens in toml files (#​3047) (3ba1adc)
• add tokens for SelectMenu component and cleanup after sync with master branch (a9a27d1)
• add tokens for Tab and Nav components (9533544)
• add types for and some related components (#​3242) (e47a5bf)
• Add TypeScript types for (#​3077) (2d71ab5)
• Add TypeScript types for , , , (#​3100) (d9925a7)
• Add TypeScript types for , , , (#​3100) (0e16dbb)
• add typings for (#​3080) (375f2bd)
• add typings for (#​3080) (90246aa)
• added CSS custom media query transformer (#​2068) (577ac74)
• added expanded tokens (f5db0b2)
• added rounded pill token (#​2361) (39fe41d)
• added sd-transforms; refs in source-tokens-only output; fixed refs warnings (7219eaa)
• added Segment track for CLI scripts (#​2617) (9af9a64)
• alpha release of design tokens (#​1770) (d471390)
• completely deprecate FontAwesome (#​2327) (9a94ac5)
• converted utils and breakpoints (927ff3b)
• create themes flag to build tokens (#​2357) (13c53d0)
• created new design tokens for Chip component (42b1ff6)
• created new design tokens for ChipCarousel and Pagination components (00af3cf)
• deleted value in reference design tokens (#​1989) (222d4e5)
• design tokens with style-dictionary (577b297)
• DTCG format (046a8d3)
• generate paragon-theme.json during npm run build with themeUrls (#​2333) (a2ac304)
• make color-yiq function a11y-friendly (02b576e)
• migrates Container to TypeScript; Container without max-width on docs site [FC-0062] (#​3216) (a693ac6)
• move design tokens CLI commands to paragon CLI (#​2609) (75580fd)
• move utils away from root directory (#​3028) (f5a5c05)
• remove deprecated components (7ab5cd3)
• remove SCSS variable usages in components (#​2137) (27af4e3)
• Removed default value for isOverflowVisible in ModalDialog component (efd31c0)
• Replaced bootstrap BaseCard component (#​3318) (33f862b)
• update build-tokens.js to include --source-tokens-only arg (#​2351) (a8069b0)
• update style dictionary to v4 (cae4ee5)

Reverts

• Revert "chore: sync alpha (#​2568)" (#​2586) (f68a0ed), closes #​2568 #​2586

BREAKING CHANGES

• all of the deprecated components were removed from Paragon, these include CheckBoxGroup, Checkbox, Fieldset, Input, InputSelect, InputText, ListBox, Modal, RadioButtonGroup, StatusAlert, Table, TextArea, ValidationFormGroup, Button.Deprecated, Tabs.Deprecated, Dropdown.Deprecated.
• Introduces design tokens.

v22.15.1

Compare Source

Bug Fixes

• add required paginationLabel prop to TablePagination component's use of Pagination component (#​3406) (b0187dd)

v22.15.0

Compare Source

Features

• introduce as prop for Hyperlink (#​3082) (c0aa4c7)

v22.14.0

Compare Source

Bug Fixes

• Gatsby webpack conflicts b/w e.g. 'useToggle.tsx' and 'useToggle.mdx' (bf65d9a)

Features

• bump packages to support React 18 (916fbc0)

v22.13.0

Compare Source

Features

• add typings for hooks (#​3125) (f3b0554)

v22.12.0

Compare Source

Features

• use data uri for card fallback image (#​3323) (8a828cf)

v22.11.2

Compare Source

Bug Fixes

• update docstring to prevent jsx closing tag error (#​3328) (8215809)

v22.11.1

Compare Source

Bug Fixes

• minor type issues in docs/examples/IconButton/utils (#​3313) (9526409)

v22.11.0

Compare Source

Features

• Use modern babel config, removing transforms for ancient browsers (d8cd81d)

v22.10.0

Compare Source

Features

• add Newsstand icon (#​3275) (fc888d5)

v22.9.0

Compare Source

Features

• add types for and some related components (#​3242) (ba29749)

v22.8.1

Compare Source

Bug Fixes

• scales down card logo cap (#​3218) (e7160b2)

v22.8.0

Compare Source

Features

• migrates Container to TypeScript; Container without max-width on docs site [FC-0062] (#​3216) (65bb39b)

v22.7.0

Compare Source

Features

• add ability to disable SelectMenu (#​3138) (c579d88)

v22.6.1

Compare Source

Bug Fixes

• ignore touchstart events for closing modal popups (#​3087) (ae3cdee)

v22.6.0

Compare Source

Features

• add typings for (#​3080) (4abe68b)

v22.5.1

Compare Source

Bug Fixes

• remove header border radius on FullscreenModal (#​3041) (48b8635)

v22.5.0

Compare Source

Features

• Add TypeScript types for (#​3077) (d4fce25)

v22.4.0

Compare Source

Features

• add new twitter X icon (2aa087f)

v22.3.2

Compare Source

Bug Fixes

• Wrong propTypes for SearchFieldAdvanced.icons (#​3026) (0750db7)

v22.3.1

Compare Source

Bug Fixes

• remove duplicate icons (c088b28)

v22.3.0

Compare Source

Features

• add LMS icons (#​3029) (784f604)

v22.2.2

Compare Source

Bug Fixes

• ensure esc key does not close modals that are blocking (#​3033) (a381182)

v22.2.1

Compare Source

Bug Fixes

• display of menu items with checkboxes (#​3019) (1fd134a)

v22.2.0

Compare Source

Features

• working typings for Paragon, better types for component (#​3016) (0983219)

v22.1.1

Compare Source

Bug Fixes

• unrecognized prop warning in form autosuggest (#​3003) (7e4a81f)

v22.1.0

Compare Source

Features

• allow consumers to configure ModalDialog to allow overflow (#​2939) (2801667)

v22.0.0

Compare Source

• feat!: release updates to Chip, SearchField, Pagination, Form.Autosuggest (#​2995) (970b102), closes #​2995

This release contains breaking changes to the following 4 components:

• Chip
• Pagination
• SearchField
• Form.Autosuggest

Breaking Changes

Chip

This updates the Chip component to reflect the design spec as intended.

BREAKING CHANGE: Many of the SCSS variables (i.e., tokens) surrounding Chip were removed. Consumers should verify no longer using any of the removed SCSS variables in custom Paragon brands/themes.

Pagination

This updates the Pagination component to rely on the proper button variants, rather than having all pagination buttons be of the primary variant (even when unselected) with custom styles overriding the default button variant style (e.g., background color).

It also refactors the component to be more maintainable moving forward.

BREAKING CHANGE: Many of the SCSS variables (i.e., tokens) surrounding Pagination were removed. Consumers should verify no longer using any of the removed SCSS variables in custom Paragon brands/themes.

BREAKING CHANGE: icons prop now accepts the icon src instead of an Icon component.

Before

<Pagination
  ...
  icons={{
    leftIcon: <Icon src={ChevronLeft} />,
    rightIcon: <Icon src={ChevronRight} />,
  }}
/>

After

<Pagination
  ...
  icons={{
    leftIcon: ChevronLeft,
    rightIcon: ChevronRight,
  }}
/>

SearchField

This updates the SearchField component to rely on IconButton components for its actions (e.g., reset, submit). It also ensures the external submit button in the dark variant has appropriate hover styles.

BREAKING CHANGE: icons prop now accepts the icon src instead of an Icon component.

Before

<SearchField
  ...
  icons={{
    submit: <Icon src={Search} />,
    clear: <Icon src={Close} />,
  }}
/>

After

<SearchField
  ...
  icons={{
    submit: Search,
    clear: Close,
  }}
/>

Form.Autosuggest

This updates the Autosuggest component to provide the consumer with:

• The value entered in the textbox by the user
• The selected value (as it is displayed in the dropdown)
• The id of the selected option

This also allows the consumer to determine if the component should be in an error state when:

• No text has been entered
• Text has been entered, but not selection has been made
• An external validation check has failed - "customError"

The consumer will provide error messages for the appropriate error states.

BREAKING CHANGE: value prop of Form.Autosuggest is now an object instead of a string

BREAKING CHANGE: Form.Autosuggest now uses onChange instead of onSelected

BREAKING CHANGE: Form.Autosuggest now takes in different error messages for value/selection required, and custom errors

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.

[renovate]

Renovate Ignore Notification

Because you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future 23.x releases. But if you manually upgrade to 23.x then Renovate will re-enable minor and patch updates automatically.

If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR.