diff --git a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx index 78a5b1ab907..23b673a7955 100644 --- a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx +++ b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx @@ -37,8 +37,9 @@ export interface MenuToggleProps splitButtonOptions?: SplitButtonOptions; /** Variant styles of the menu toggle */ variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead'; - /** Optional icon or image rendered inside the toggle, before the children content. It is - * recommended to wrap most basic icons in our icon component. + /** Icon or image rendered inside the toggle, before the children content. It is + * recommended to wrap icons in our icon component. For menu toggles that contain only an icon, we + * recommend passing the icon to this prop instead of passing it as children. */ icon?: React.ReactNode; /** Optional badge rendered inside the toggle, after the children content */ @@ -88,7 +89,7 @@ class MenuToggleBase extends React.Component { const content = ( <> {icon && {icon}} - {isTypeahead ? children : {children}} + {isTypeahead ? children : children && {children}} {React.isValidElement(badge) && {badge}} {isTypeahead ? ( ) : ( - toggleControls + !isPlain && toggleControls )} ); @@ -120,7 +121,7 @@ class MenuToggleBase extends React.Component { ); const componentProps = { - children: isPlain ? children : content, + children: content, ...(isDisabled && { disabled: true }), ...otherProps }; diff --git a/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx b/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx index b56971f6ffd..d644c5de75b 100644 --- a/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx +++ b/packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx @@ -34,11 +34,7 @@ describe('menu toggle', () => { }); test('shows isPlain', () => { - const { asFragment } = render( - - - - ); + const { asFragment } = render(} />); expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap b/packages/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap index 2d9fd99e364..ea89eb637d0 100644 --- a/packages/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap +++ b/packages/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap @@ -256,19 +256,23 @@ exports[`menu toggle shows isPlain 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + `; diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md index eb63008a6be..0103119574e 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md @@ -17,7 +17,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; ### Collapsed toggle -A toggle is collapsed until it is selected by a user. +A toggle is collapsed until it is selected by a user. ```ts import React from 'react'; @@ -29,7 +29,7 @@ import { MenuToggle } from '@patternfly/react-core'; ### Expanded toggle -When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property . +When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property . ```ts import React from 'react'; @@ -41,7 +41,7 @@ import { MenuToggle } from '@patternfly/react-core'; ### Disabled toggle -To disable the selection and expansion of a toggle, use the `isDisabled` property. +To disable the selection and expansion of a toggle, use the `isDisabled` property. ```ts import React from 'react'; @@ -65,7 +65,7 @@ import { MenuToggle, Badge } from '@patternfly/react-core'; ### With icons -To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `CogIcon` to the toggle. +To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `CogIcon` to the toggle. For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon). @@ -111,7 +111,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; ### With avatar and text -You can also pass images into the `icon` property. The following example passes in an `` component with an `imgAvatar`. +You can also pass images into the `icon` property. The following example passes in an `` component with an `imgAvatar`. This can be used alongside a text label that provides more context for the image. @@ -150,9 +150,9 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; ### Plain toggle with icon -To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`. This will remove the default bottom border and caret. You may pass in an `icon` to serve as the menu toggle. The following example passes in an `EllipsisVIcon`. +To apply plain styling to a menu toggle with an icon, pass in `variant="plain"` and pass the icon to the `icon` property. This will remove the default bottom border and caret. The following example passes in an `EllipsisVIcon`. -If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name. +If the toggle does not have any visible text content, you must pass in the `aria-label` property to provide an accessible name. ```ts import React from 'react'; @@ -160,17 +160,14 @@ import { MenuToggle } from '@patternfly/react-core'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; - - - {' '} - - - {' '} - - - + } variant="plain" aria-label="plain kebab"/> + {' '} + } variant="plain" isExpanded aria-label="plain expanded kebab"/> + {' '} + } variant="plain" isDisabled aria-label="disabled plain kebab"/> ``` + ### Plain toggle with text label To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle. @@ -201,27 +198,30 @@ The following example shows a split button with a ``. Variant styling can be applied to split button toggles to adjust their appearance for different scenarios. Both "primary" and "secondary" variants can be used with split button toggles. ```ts file='MenuToggleSplitButtonCheckbox.tsx' + ``` ### Split button toggle with text label -To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`. +To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`. ```ts file='MenuToggleSplitButtonCheckboxWithText.tsx' + ``` ### Split button toggle with action -To add an action to a split button, pass `variant='action'` into `splitButtonOptions` and add a `` to the `items` property of `splitButtonOptions`. +To add an action to a split button, pass `variant='action'` into `splitButtonOptions` and add a `` to the `items` property of `splitButtonOptions`. Actions may be used with primary and secondary toggle variants. - + ```ts file='MenuToggleSplitButtonAction.tsx' + ``` ### Full height toggle -A full height toggle fills the height of its parent. To flag a full height toggle, use the `isFullHeight` property. +A full height toggle fills the height of its parent. To flag a full height toggle, use the `isFullHeight` property. In the following example, the toggle fills the size of the "80px" `
` element that it is within. @@ -238,7 +238,7 @@ import { MenuToggle } from '@patternfly/react-core'; ### Full width toggle -A full width toggle fills the width of its parent. To flag a full width toggle, use the `isFullWidth` property. +A full width toggle fills the width of its parent. To flag a full width toggle, use the `isFullWidth` property. In the following example, the toggle fills the width of its parent as the window size changes. @@ -249,7 +249,7 @@ import { MenuToggle } from '@patternfly/react-core'; const fullWidth: React.FunctionComponent = () => { return ( - Full width + Full width ); } @@ -262,4 +262,5 @@ To create a typeahead toggle, pass in `variant="typeahead"` to the ` To create a multiple typeahead toggle, pass a `` component implemented like the [text input group's filter example](/components/text-input-group#filters) as a child of ``. ```ts file='MenuToggleTypeahead.tsx' + ``` diff --git a/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx b/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx index 3ca8a55c883..661cedb21be 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx +++ b/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx @@ -61,9 +61,7 @@ export const DataListBasic: React.FunctionComponent = () => { - - - + } /> diff --git a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx index 8f72becb6a7..cf7e1a85fc4 100644 --- a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx +++ b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx @@ -55,7 +55,6 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon'; import { KeyTypes } from '../../../helpers'; -import display from '@patternfly/react-styles/css/utilities/Display/display'; import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; interface Repository { @@ -186,12 +185,10 @@ export const TablesAndTabs = () => { - - + - + @@ -211,9 +208,8 @@ export const TablesAndTabs = () => { variant="plain" onClick={() => {}} isExpanded={false} - > - - + icon={} + /> )} isOpen={false} > diff --git a/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx index 717c7c42b96..3a4e949433a 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx @@ -135,9 +135,13 @@ export class CardDemo extends Component { onOpenChange={(isOpen) => this.setState({ isOpen })} popperProps={{ position: 'right' }} toggle={(toggleRef) => ( - - - + } + /> )} > {dropdownItems} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx index e7750c61154..888efe428a1 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx @@ -20,7 +20,7 @@ interface DataListState { isOpen: boolean; } -export class DataListDemo extends React.Component { +class DataListDemo extends React.Component { static displayName = 'DataListDemo'; constructor(props: DataListProps) { super(props); @@ -77,9 +77,13 @@ export class DataListDemo extends React.Component onSelect={this.onSelect} onOpenChange={(isOpen) => this.setState({ isOpen })} toggle={(toggleRef) => ( - - - + } + /> )} > @@ -131,3 +135,6 @@ export class DataListDemo extends React.Component ); } } +DataListDemo.displayName = 'DataListDemo'; + +export { DataListDemo }; diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx index aa872835236..91ce7d5e8d0 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx @@ -22,7 +22,7 @@ interface DualListSelectorState { chosenDescending: boolean; } -export class DualListSelectorWithActionsDemo extends React.Component { +class DualListSelectorWithActionsDemo extends React.Component { static displayName = 'DualListSelectorDemo'; onSort: (panel: string) => void; onListChange: ( @@ -145,9 +145,8 @@ export class DualListSelectorWithActionsDemo extends React.Component this.onToggle('available')} - > - - + icon={} + /> )} > {dropdownItems} @@ -174,9 +173,8 @@ export class DualListSelectorWithActionsDemo extends React.Component this.onToggle('chosen')} - > - - + icon={} + /> )} > {dropdownItems} @@ -222,3 +220,6 @@ export class DualListSelectorWithActionsDemo extends React.Component - - + icon={} + /> )} > {kebabDropdownItems} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx index f3a63d3db54..d8c44bfdd77 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx @@ -273,9 +273,13 @@ class ToolbarDemo extends React.Component { isOpen={kebabIsOpen} onOpenChange={(isOpen) => this.setState({ kebabIsOpen: isOpen })} toggle={(toggleRef) => ( - - - + } + /> )} > {dropdownItems} diff --git a/packages/react-table/src/components/Table/ActionsColumn.tsx b/packages/react-table/src/components/Table/ActionsColumn.tsx index 5d8f01f0b94..38bba05f77d 100644 --- a/packages/react-table/src/components/Table/ActionsColumn.tsx +++ b/packages/react-table/src/components/Table/ActionsColumn.tsx @@ -103,9 +103,8 @@ const ActionsColumnBase: React.FunctionComponent = ({ isExpanded={isOpen} isDisabled={isDisabled} variant="plain" - > - - + icon={} + /> ) } {...(rowData && rowData.actionProps)} diff --git a/packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx b/packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx index 5ae2296e33e..8a1b10dff1d 100644 --- a/packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx +++ b/packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx @@ -106,9 +106,8 @@ export const TableActions: React.FunctionComponent = () => { setRepos(repos.map((r) => (r.name !== repo.name ? r : { ...r, isMenuOpen: !r.isMenuOpen }))) } isExpanded={repo.isMenuOpen} - > - - + icon={} + /> )} isOpen={repo.isMenuOpen} onOpenChange={(isOpen) => diff --git a/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx b/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx index ba56bc0a260..952d3f84fc2 100644 --- a/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx +++ b/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx @@ -117,9 +117,8 @@ export const TableSortableCustom: React.FunctionComponent = () => { isExpanded={isSortDropdownOpen} variant="plain" aria-label="Sort columns" - > - - + icon={} + /> )} > diff --git a/packages/react-table/src/demos/examples/TableColumnManagement.tsx b/packages/react-table/src/demos/examples/TableColumnManagement.tsx index 89902d5e5a2..b4a02bb1e61 100644 --- a/packages/react-table/src/demos/examples/TableColumnManagement.tsx +++ b/packages/react-table/src/demos/examples/TableColumnManagement.tsx @@ -404,14 +404,14 @@ export const TableColumnManagement: React.FunctionComponent = () => { - - Name - + }>Name - - + diff --git a/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx b/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx index 7b512974c2d..3b64b413988 100644 --- a/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx +++ b/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx @@ -593,14 +593,10 @@ export const TableColumnManagementWithDraggable: React.FunctionComponent = () => - - Name - + }>Name - - + diff --git a/packages/react-table/src/demos/examples/TableCompact.tsx b/packages/react-table/src/demos/examples/TableCompact.tsx index d31ca17a8e1..fbce517d799 100644 --- a/packages/react-table/src/demos/examples/TableCompact.tsx +++ b/packages/react-table/src/demos/examples/TableCompact.tsx @@ -72,8 +72,13 @@ export const TableCompact: React.FunctionComponent = () => { id="select-example" aria-label="Select Input" toggle={(toggleRef: React.Ref) => ( - setIsSelectOpen(!isSelectOpen)} isExpanded={isSelectOpen}> - Status + } + ref={toggleRef} + onClick={() => setIsSelectOpen(!isSelectOpen)} + isExpanded={isSelectOpen} + > + Status )} isOpen={isSelectOpen} diff --git a/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx b/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx index 7554acad0ab..4dfac73a8e0 100644 --- a/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx +++ b/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx @@ -91,8 +91,13 @@ export const TableCompoundExpansion: React.FunctionComponent = () => { id="select-example" aria-label="Select Input" toggle={(toggleRef: React.Ref) => ( - setIsSelectOpen(!isSelectOpen)} isExpanded={isSelectOpen}> - Status + } + ref={toggleRef} + onClick={() => setIsSelectOpen(!isSelectOpen)} + isExpanded={isSelectOpen} + > + Status )} isOpen={isSelectOpen} diff --git a/packages/react-table/src/demos/examples/TableSortableResponsive.tsx b/packages/react-table/src/demos/examples/TableSortableResponsive.tsx index 794aee7c78b..aa3cbb1d353 100644 --- a/packages/react-table/src/demos/examples/TableSortableResponsive.tsx +++ b/packages/react-table/src/demos/examples/TableSortableResponsive.tsx @@ -154,9 +154,8 @@ export const TableSortableResponsive: React.FunctionComponent = () => { onClick={() => setIsSortDropdownOpen(!isSortDropdownOpen)} isExpanded={isSortDropdownOpen} variant="plain" - > - - + icon={} + /> )} > @@ -203,9 +202,8 @@ export const TableSortableResponsive: React.FunctionComponent = () => { variant="plain" onClick={() => setIsKebabDropdownOpen(!isKebabDropdownOpen)} isExpanded={false} - > - - + icon={} + /> )} isOpen={isKebabDropdownOpen} > diff --git a/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx b/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx index 10fcacf2e8c..c128c847685 100644 --- a/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx +++ b/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx @@ -101,8 +101,13 @@ export const TableStaticBottomPagination: React.FunctionComponent = () => { id="select-example" aria-label="Select Input" toggle={(toggleRef: React.Ref) => ( - setIsSelectOpen(!isSelectOpen)} isExpanded={isSelectOpen}> - Status + } + ref={toggleRef} + onClick={() => setIsSelectOpen(!isSelectOpen)} + isExpanded={isSelectOpen} + > + Status )} isOpen={isSelectOpen} diff --git a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap index f73d563d53b..e34435d4cdb 100644 --- a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap +++ b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap @@ -165,19 +165,23 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -239,19 +243,23 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -313,19 +321,23 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -387,19 +399,23 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -461,19 +477,23 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -535,19 +555,23 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -609,19 +633,23 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -683,19 +711,23 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -757,19 +789,23 @@ exports[`Table Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -5774,19 +5810,23 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -5848,19 +5888,23 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -5922,19 +5966,23 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -5996,19 +6044,23 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6070,19 +6122,23 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6144,19 +6200,23 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6218,19 +6278,23 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6292,19 +6356,23 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6366,19 +6434,23 @@ exports[`Table Simple Actions table 1`] = ` class="pf-v6-c-menu-toggle pf-m-plain" type="button" > - + + @@ -6441,19 +6513,23 @@ exports[`Table Simple Actions table 1`] = ` disabled="" type="button" > - + + diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx index 61657e23541..bb61e6eb8b9 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx +++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx @@ -137,9 +137,8 @@ export const LegacyTableSortableCustom: React.FunctionComponent = () => { isExpanded={isSortDropdownOpen} variant="plain" aria-label="Sort columns" - > - - + icon={} + /> )} >