diff --git a/packages/base/src/hooks/usePassThroughHtmlProps.ts b/packages/base/src/hooks/usePassThroughHtmlProps.ts new file mode 100644 index 00000000000..841b768e5ed --- /dev/null +++ b/packages/base/src/hooks/usePassThroughHtmlProps.ts @@ -0,0 +1,20 @@ +import { useMemo } from 'react'; + +const PROP_WHITELIST = /^(aria-|data-|id$)/; + +export const usePassThroughHtmlProps = (props) => { + const passThroughPropNames = Object.keys(props).filter((name) => PROP_WHITELIST.test(name)); + + return useMemo( + () => { + return passThroughPropNames.reduce( + (acc, val) => ({ + ...acc, + [val]: props[val] + }), + {} + ); + }, + passThroughPropNames.map((name) => props[name]) + ); +}; diff --git a/packages/base/src/index.ts b/packages/base/src/index.ts index 57170e1b647..2ae5a45bd55 100644 --- a/packages/base/src/index.ts +++ b/packages/base/src/index.ts @@ -12,6 +12,7 @@ import * as sap_fiori_3 from './lib/sap_fiori_3'; import * as spacing from './lib/spacing'; import { StyleClassHelper } from './lib/StyleClassHelper'; import { useConsolidatedRef } from './lib/useConsolidatedRef'; +import { usePassThroughHtmlProps } from './lib/usePassThroughHtmlProps'; import { deprecationNotice, getScrollBarWidth } from './lib/Utils'; export { @@ -28,5 +29,6 @@ export { HSLColor, sap_fiori_3, createGenerateClassName, - useConsolidatedRef + useConsolidatedRef, + usePassThroughHtmlProps }; diff --git a/packages/base/src/lib/usePassThroughHtmlProps.ts b/packages/base/src/lib/usePassThroughHtmlProps.ts new file mode 100644 index 00000000000..a116706f319 --- /dev/null +++ b/packages/base/src/lib/usePassThroughHtmlProps.ts @@ -0,0 +1,3 @@ +import { usePassThroughHtmlProps } from '../hooks/usePassThroughHtmlProps'; + +export { usePassThroughHtmlProps }; diff --git a/packages/main/src/components/ActionSheet/ActionSheet.test.tsx b/packages/main/src/components/ActionSheet/ActionSheet.test.tsx index dff99a62f93..bcbbd3cf039 100644 --- a/packages/main/src/components/ActionSheet/ActionSheet.test.tsx +++ b/packages/main/src/components/ActionSheet/ActionSheet.test.tsx @@ -1,8 +1,8 @@ -import { mountThemedComponent } from '@shared/tests/utils'; -import React, { createRef, RefObject } from 'react'; -import { Ui5PopoverDomRef } from '../../interfaces/Ui5PopoverDomRef'; +import { createPassThroughPropsTest, mountThemedComponent } from '@shared/tests/utils'; import { ActionSheet } from '@ui5/webcomponents-react/lib/ActionSheet'; import { Button } from '@ui5/webcomponents-react/lib/Button'; +import React, { createRef, RefObject } from 'react'; +import { Ui5PopoverDomRef } from '../../interfaces/Ui5PopoverDomRef'; describe('ActionSheet', () => { test('Render without Crashing', () => { @@ -28,4 +28,6 @@ describe('ActionSheet', () => { mountThemedComponent(); expect((ref.current as any).tagName).toEqual('UI5-POPOVER'); }); + + createPassThroughPropsTest(ActionSheet); }); diff --git a/packages/main/src/components/ActionSheet/index.tsx b/packages/main/src/components/ActionSheet/index.tsx index 34756fa0658..9126a45bfe1 100644 --- a/packages/main/src/components/ActionSheet/index.tsx +++ b/packages/main/src/components/ActionSheet/index.tsx @@ -1,5 +1,6 @@ import { Device } from '@ui5/webcomponents-react-base/lib/Device'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef'; import React, { Children, cloneElement, forwardRef, ReactElement, ReactNode, RefObject, FC } from 'react'; import { CommonProps } from '../../interfaces/CommonProps'; @@ -55,8 +56,17 @@ const ActionSheet: FC = forwardRef( } }; + const passThroughProps = usePassThroughHtmlProps(props); + return ( - +
    {Children.map(children, renderActionSheetButton)}
 ); diff --git a/packages/main/src/components/AnalyticalCard/AnalyticalCard.test.tsx b/packages/main/src/components/AnalyticalCard/AnalyticalCard.test.tsx index 40d12a81cf9..2e328530699 100644 --- a/packages/main/src/components/AnalyticalCard/AnalyticalCard.test.tsx +++ b/packages/main/src/components/AnalyticalCard/AnalyticalCard.test.tsx @@ -1,4 +1,4 @@ -import { mountThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, mountThemedComponent } from '@shared/tests/utils'; import React from 'react'; import { AnalyticalCard } from '@ui5/webcomponents-react/lib/AnalyticalCard'; import { AnalyticalCardHeader } from '@ui5/webcomponents-react/lib/AnalyticalCardHeader'; @@ -32,4 +32,6 @@ describe('Analytical Card', () => { ); expect(wrapper.render()).toMatchSnapshot(); }); + + createPassThroughPropsTest(AnalyticalCard); }); diff --git a/packages/main/src/components/AnalyticalCard/index.tsx b/packages/main/src/components/AnalyticalCard/index.tsx index 44ae2110871..9349d2311b7 100644 --- a/packages/main/src/components/AnalyticalCard/index.tsx +++ b/packages/main/src/components/AnalyticalCard/index.tsx @@ -1,3 +1,4 @@ +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; import React, { CSSProperties, FC, forwardRef, ReactNode, ReactNodeArray, Ref, useMemo } from 'react'; import { createUseStyles } from 'react-jss'; @@ -35,8 +36,17 @@ export const AnalyticalCard: FC = forwardRef( ...style }; }, [style, width]); + + const passThroughProps = usePassThroughHtmlProps(props); + return ( -
+
{header}
{children}
diff --git a/packages/main/src/components/AnalyticalCardHeader/index.tsx b/packages/main/src/components/AnalyticalCardHeader/index.tsx index 1d4dc487ef2..4dec6d65f54 100644 --- a/packages/main/src/components/AnalyticalCardHeader/index.tsx +++ b/packages/main/src/components/AnalyticalCardHeader/index.tsx @@ -1,18 +1,19 @@ import { Event } from '@ui5/webcomponents-react-base/lib/Event'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; -import React, { FC, forwardRef, Ref, useCallback, useMemo } from 'react'; -import { CommonProps } from '../../interfaces/CommonProps'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { DeviationIndicator } from '@ui5/webcomponents-react/lib/DeviationIndicator'; -import { ObjectStatus } from '@ui5/webcomponents-react/lib/ObjectStatus'; -import { ValueState } from '@ui5/webcomponents-react/lib/ValueState'; import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox'; import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems'; import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection'; import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent'; import { FlexBoxWrap } from '@ui5/webcomponents-react/lib/FlexBoxWrap'; -import styles from './AnalyticalCardHeader.jss'; -import { JSSTheme } from '../../interfaces/JSSTheme'; +import { ObjectStatus } from '@ui5/webcomponents-react/lib/ObjectStatus'; +import { ValueState } from '@ui5/webcomponents-react/lib/ValueState'; +import React, { FC, forwardRef, Ref, useCallback, useMemo } from 'react'; import { createUseStyles } from 'react-jss'; +import { CommonProps } from '../../interfaces/CommonProps'; +import { JSSTheme } from '../../interfaces/JSSTheme'; +import styles from './AnalyticalCardHeader.jss'; export interface AnalyticalCardHeaderPropTypes extends CommonProps { title?: string; @@ -119,8 +120,18 @@ export const AnalyticalCardHeader: FC = forwardRe headerClasses.put(className); } const shouldRenderContent = [value, unit, deviation, target].some((v) => v !== null); + + const passThroughProps = usePassThroughHtmlProps(props); + return ( -
+
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx index 940d683d9b2..55bee2822f0 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx @@ -1,4 +1,4 @@ -import { mountThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, mountThemedComponent } from '@shared/tests/utils'; import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable'; import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode'; import React from 'react'; @@ -259,4 +259,6 @@ describe('AnalyticalTable', () => { expect(wrapper.render()).toMatchSnapshot(); }); + + createPassThroughPropsTest(AnalyticalTable); }); diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx index 8db69a3c861..7abcf5aa278 100644 --- a/packages/main/src/components/AnalyticalTable/index.tsx +++ b/packages/main/src/components/AnalyticalTable/index.tsx @@ -1,6 +1,7 @@ import { Device } from '@ui5/webcomponents-react-base/lib/Device'; import { Event } from '@ui5/webcomponents-react-base/lib/Event'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity'; import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode'; import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign'; @@ -309,8 +310,10 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< tableState.columnResizing ); + const passThroughProps = usePassThroughHtmlProps(props); + return ( -
+
{title && {title}} {typeof renderExtension === 'function' &&
{renderExtension()}
}
diff --git a/packages/main/src/components/Avatar/Avatar.test.tsx b/packages/main/src/components/Avatar/Avatar.test.tsx index 3fa8645aabb..585e2e19b9d 100644 --- a/packages/main/src/components/Avatar/Avatar.test.tsx +++ b/packages/main/src/components/Avatar/Avatar.test.tsx @@ -1,4 +1,4 @@ -import { mountThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, mountThemedComponent } from '@shared/tests/utils'; import React from 'react'; import sinon from 'sinon'; import { Avatar } from '@ui5/webcomponents-react/lib/Avatar'; @@ -72,4 +72,6 @@ describe('Avatar', () => { wrapper.find(Avatar).simulate('keyDown', { key: 'ArrowLeft' }); expect(callback.called).toBe(false); }); + + createPassThroughPropsTest(Avatar); }); diff --git a/packages/main/src/components/Avatar/index.tsx b/packages/main/src/components/Avatar/index.tsx index 7764e21581b..41fbf9c0911 100644 --- a/packages/main/src/components/Avatar/index.tsx +++ b/packages/main/src/components/Avatar/index.tsx @@ -1,4 +1,5 @@ import { Event } from '@ui5/webcomponents-react-base/lib/Event'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { AvatarShape } from '@ui5/webcomponents-react/lib/AvatarShape'; import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize'; import React, { CSSProperties, FC, forwardRef, Ref, useCallback } from 'react'; @@ -86,6 +87,8 @@ const Avatar: FC = forwardRef((props: AvatarPropTypes, ref: Ref [onClick] ); + const passThroughProps = usePassThroughHtmlProps(props); + return ( = forwardRef((props: AvatarPropTypes, ref: Ref onKeyDown={handleKeyDown} title={tooltip} slot={slot} + {...passThroughProps} > {initials ? initials : children} diff --git a/packages/main/src/components/Bar/Bar.test.tsx b/packages/main/src/components/Bar/Bar.test.tsx index f37b41aab20..478c253a943 100644 --- a/packages/main/src/components/Bar/Bar.test.tsx +++ b/packages/main/src/components/Bar/Bar.test.tsx @@ -1,4 +1,4 @@ -import { mountThemedComponent, renderThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, mountThemedComponent, renderThemedComponent } from '@shared/tests/utils'; import React from 'react'; import { Bar } from '@ui5/webcomponents-react/lib/Bar'; @@ -48,4 +48,6 @@ describe('Bar', () => { const node = wrapper.getDOMNode(); expect(window.getComputedStyle(node).paddingLeft).toEqual('0.5rem'); }); + + createPassThroughPropsTest(Bar); }); diff --git a/packages/main/src/components/Bar/index.tsx b/packages/main/src/components/Bar/index.tsx index 573f095d20a..5aababd3114 100644 --- a/packages/main/src/components/Bar/index.tsx +++ b/packages/main/src/components/Bar/index.tsx @@ -1,4 +1,5 @@ import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity'; import React, { FC, forwardRef, Ref } from 'react'; import { createUseStyles, useTheme } from 'react-jss'; @@ -29,8 +30,18 @@ const Bar: FC = forwardRef((props: BarPropTypes, ref: Ref +
{renderContentLeft()}
diff --git a/packages/main/src/components/Breadcrumbs/Breadcrumbs.test.tsx b/packages/main/src/components/Breadcrumbs/Breadcrumbs.test.tsx index 7d64820922e..8dd397ed59e 100644 --- a/packages/main/src/components/Breadcrumbs/Breadcrumbs.test.tsx +++ b/packages/main/src/components/Breadcrumbs/Breadcrumbs.test.tsx @@ -1,4 +1,4 @@ -import { mountThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, mountThemedComponent } from '@shared/tests/utils'; import { Breadcrumbs } from '@ui5/webcomponents-react/lib/Breadcrumbs'; import { BreadcrumbsSeparatorStyle } from '@ui5/webcomponents-react/lib/BreadcrumbsSeparatorStyle'; import { Link } from '@ui5/webcomponents-react/lib/Link'; @@ -28,4 +28,6 @@ describe('Breadcrumbs', () => { ); expect(wrapper.render()).toMatchSnapshot(); }); + + createPassThroughPropsTest(Breadcrumbs); }); diff --git a/packages/main/src/components/Breadcrumbs/index.tsx b/packages/main/src/components/Breadcrumbs/index.tsx index 46bc726ab1d..b5c58de1077 100644 --- a/packages/main/src/components/Breadcrumbs/index.tsx +++ b/packages/main/src/components/Breadcrumbs/index.tsx @@ -1,3 +1,4 @@ +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { BreadcrumbsSeparatorStyle } from '@ui5/webcomponents-react/lib/BreadcrumbsSeparatorStyle'; import { Label } from '@ui5/webcomponents-react/lib/Label'; import React, { Children, FC, forwardRef, Fragment, ReactNode, ReactNodeArray, Ref } from 'react'; @@ -33,8 +34,10 @@ const Breadcrumbs: FC = forwardRef((props: BreadcrumbsProp const { children, separatorStyle, currentLocationText, tooltip, style, className, slot } = props; const childrenArray = Children.toArray(children).filter(Boolean); + const passThroughProps = usePassThroughHtmlProps(props); + return ( -
+
{childrenArray.map((item, index) => { if (index === childrenArray.length - 1) { return item; diff --git a/packages/main/src/components/Carousel/Carousel.test.tsx b/packages/main/src/components/Carousel/Carousel.test.tsx index 8a1177a8809..25d9669364e 100644 --- a/packages/main/src/components/Carousel/Carousel.test.tsx +++ b/packages/main/src/components/Carousel/Carousel.test.tsx @@ -1,4 +1,4 @@ -import { getEventFromCallback, mountThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, getEventFromCallback, mountThemedComponent } from '@shared/tests/utils'; import React, { cloneElement } from 'react'; import * as sinon from 'sinon'; import { Carousel } from '@ui5/webcomponents-react/lib/Carousel'; @@ -166,4 +166,6 @@ describe('Carousel', () => { .simulate('keydown', { key: 'ArrowLeft' }); expect(getEventFromCallback(callback).getParameter('selectedIndex')).toEqual(0); }); + + createPassThroughPropsTest(Carousel); }); diff --git a/packages/main/src/components/Carousel/index.tsx b/packages/main/src/components/Carousel/index.tsx index 30b6458f835..3879cef4f20 100644 --- a/packages/main/src/components/Carousel/index.tsx +++ b/packages/main/src/components/Carousel/index.tsx @@ -1,5 +1,8 @@ import { Event } from '@ui5/webcomponents-react-base/lib/Event'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; +import { CarouselArrowsPlacement } from '@ui5/webcomponents-react/lib/CarouselArrowsPlacement'; +import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType'; import React, { Children, CSSProperties, @@ -15,8 +18,6 @@ import React, { import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; -import { CarouselArrowsPlacement } from '@ui5/webcomponents-react/lib/CarouselArrowsPlacement'; -import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType'; import styles from './Carousel.jss'; import { CarouselPagination, CarouselPaginationPropTypes } from './CarouselPagination'; @@ -155,6 +156,9 @@ const Carousel: FC = forwardRef((props: CarouselPropTypes, re ); const translateXPrefix = document.dir === 'rtl' ? '' : '-'; + + const passThroughProps = usePassThroughHtmlProps(props); + return (
= forwardRef((props: CarouselPropTypes, re role="list" tabIndex={0} onKeyDown={onKeyDown} + {...passThroughProps} > {childElementCount > 1 && pageIndicatorPlacement === PlacementType.Top && ( ; const renderSearch = () => ; @@ -120,4 +126,6 @@ describe('FilterBar', () => { expect(wrapper.render()).toMatchSnapshot(); }); + + createPassThroughPropsTest(FilterBar); }); diff --git a/packages/main/src/components/FilterBar/index.tsx b/packages/main/src/components/FilterBar/index.tsx index f6db9e7a287..248264cedb8 100644 --- a/packages/main/src/components/FilterBar/index.tsx +++ b/packages/main/src/components/FilterBar/index.tsx @@ -1,12 +1,13 @@ -import React, { FC, forwardRef, ReactNode, ReactNodeArray, RefObject, useCallback, useState } from 'react'; -import { ClassProps } from '../../interfaces/ClassProps'; -import { CommonProps } from '../../interfaces/CommonProps'; +import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { Button } from '@ui5/webcomponents-react/lib/Button'; import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign'; -import styles from './FilterBar.jss'; +import React, { FC, forwardRef, ReactNode, ReactNodeArray, RefObject, useCallback, useState } from 'react'; import { createUseStyles } from 'react-jss'; +import { ClassProps } from '../../interfaces/ClassProps'; +import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; -import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; +import styles from './FilterBar.jss'; export interface FilterBarPropTypes extends CommonProps { renderVariants?: () => JSX.Element; @@ -35,8 +36,10 @@ const FilterBar: FC = forwardRef((props: FilterBarPropTypes, filterAreaClasses.put(classes.filterAreaClosed); } + const passThroughProps = usePassThroughHtmlProps(props); + return ( -
+
{renderVariants && renderVariants()} {renderSearch &&
{renderSearch()}
} diff --git a/packages/main/src/components/FilterItem/index.tsx b/packages/main/src/components/FilterItem/index.tsx index e97dd6d0f41..85860b00ef7 100644 --- a/packages/main/src/components/FilterItem/index.tsx +++ b/packages/main/src/components/FilterItem/index.tsx @@ -1,18 +1,19 @@ import { Event } from '@ui5/webcomponents-react-base/lib/Event'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; -import React, { FC, forwardRef, ReactNode, RefObject, useMemo } from 'react'; -import { CommonProps } from '../../interfaces/CommonProps'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { BusyIndicator } from '@ui5/webcomponents-react/lib/BusyIndicator'; +import { BusyIndicatorSize } from '@ui5/webcomponents-react/lib/BusyIndicatorSize'; import { FilterType } from '@ui5/webcomponents-react/lib/FilterType'; import { Input } from '@ui5/webcomponents-react/lib/Input'; import { Label } from '@ui5/webcomponents-react/lib/Label'; -import { createUseStyles } from 'react-jss'; -import { Select } from '@ui5/webcomponents-react/lib/Select'; import { MultiComboBox } from '@ui5/webcomponents-react/lib/MultiComboBox'; -import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem'; import { Option } from '@ui5/webcomponents-react/lib/Option'; +import { Select } from '@ui5/webcomponents-react/lib/Select'; +import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem'; +import React, { FC, forwardRef, ReactNode, RefObject, useMemo } from 'react'; +import { createUseStyles } from 'react-jss'; +import { CommonProps } from '../../interfaces/CommonProps'; import styles from './FilterItem.jss'; -import { BusyIndicatorSize } from '@ui5/webcomponents-react/lib/BusyIndicatorSize'; export interface FilterItemPropTypes extends CommonProps { placeholder?: string; @@ -126,8 +127,10 @@ const FilterItem: FC = forwardRef((props: FilterItemPropTyp const filterItemClasses = StyleClassHelper.of(classes.filterItem); + const passThroughProps = usePassThroughHtmlProps(props); + return ( -
+
{filterComponent} diff --git a/packages/main/src/components/FlexBox/FlexBox.test.tsx b/packages/main/src/components/FlexBox/FlexBox.test.tsx index d6a6fc76c3e..7c0602357d5 100644 --- a/packages/main/src/components/FlexBox/FlexBox.test.tsx +++ b/packages/main/src/components/FlexBox/FlexBox.test.tsx @@ -1,7 +1,7 @@ -import { mountThemedComponent } from '@shared/tests/utils'; -import * as React from 'react'; +import { createPassThroughPropsTest, mountThemedComponent } from '@shared/tests/utils'; import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox'; import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent'; +import * as React from 'react'; describe('FlexBox', () => { test('JustifyContent: End', () => { @@ -43,4 +43,6 @@ describe('FlexBox', () => { ); expect(wrapper.render()).toMatchSnapshot(); }); + + createPassThroughPropsTest(FlexBox); }); diff --git a/packages/main/src/components/FlexBox/index.tsx b/packages/main/src/components/FlexBox/index.tsx index 6e08e543a96..1574f8240fb 100644 --- a/packages/main/src/components/FlexBox/index.tsx +++ b/packages/main/src/components/FlexBox/index.tsx @@ -1,11 +1,12 @@ import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; -import React, { CSSProperties, FC, forwardRef, ReactNode, ReactNodeArray, Ref, useMemo } from 'react'; -import { createUseStyles } from 'react-jss'; -import { CommonProps } from '../../interfaces/CommonProps'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems'; import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection'; import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent'; import { FlexBoxWrap } from '@ui5/webcomponents-react/lib/FlexBoxWrap'; +import React, { CSSProperties, FC, forwardRef, ReactNode, ReactNodeArray, Ref, useMemo } from 'react'; +import { createUseStyles } from 'react-jss'; +import { CommonProps } from '../../interfaces/CommonProps'; import { styles } from './Flexbox.jss'; const useStyles = createUseStyles(styles, { name: 'FlexBox' }); @@ -71,8 +72,17 @@ const FlexBox: FC = forwardRef((props: FlexBoxPropTypes, ref: return innerStyles; }, [height, width, style]); + const passThroughProps = usePassThroughHtmlProps(props); + return ( -
+
{children}
); diff --git a/packages/main/src/components/Form/Form.test.tsx b/packages/main/src/components/Form/Form.test.tsx index 4e12db2553b..727a0ee92aa 100644 --- a/packages/main/src/components/Form/Form.test.tsx +++ b/packages/main/src/components/Form/Form.test.tsx @@ -1,4 +1,4 @@ -import { mountThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, mountThemedComponent } from '@shared/tests/utils'; import * as React from 'react'; import { Form } from '@ui5/webcomponents-react/lib/Form'; import { FormGroup } from '@ui5/webcomponents-react/lib/FormGroup'; @@ -87,4 +87,6 @@ describe('Create a Form', () => { const wrapper = mountThemedComponent(ungroupedChildren); expect(wrapper.render()).toMatchSnapshot(); }); + + createPassThroughPropsTest(Form); }); diff --git a/packages/main/src/components/Form/index.tsx b/packages/main/src/components/Form/index.tsx index a4e04bc8fac..eb7f884cccc 100644 --- a/packages/main/src/components/Form/index.tsx +++ b/packages/main/src/components/Form/index.tsx @@ -1,14 +1,15 @@ +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; +import { useViewportRange } from '@ui5/webcomponents-react-base/lib/useViewportRange'; import { Grid } from '@ui5/webcomponents-react/lib/Grid'; -import React, { FC, forwardRef, ReactElement, ReactNode, ReactNodeArray, Ref, useMemo } from 'react'; -import { CommonProps } from '../../interfaces/CommonProps'; import { Title } from '@ui5/webcomponents-react/lib/Title'; import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel'; -import { styles } from './Form.jss'; +import React, { FC, forwardRef, ReactElement, ReactNode, ReactNodeArray, Ref, useMemo } from 'react'; import { createUseStyles } from 'react-jss'; -import { useViewportRange } from '@ui5/webcomponents-react-base/lib/useViewportRange'; -import { FormGroup } from './FormGroup'; +import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; import { CurrentRange } from './CurrentViewportRangeContext'; +import { styles } from './Form.jss'; +import { FormGroup } from './FormGroup'; export interface FormPropTypes extends CommonProps { /** @@ -62,6 +63,8 @@ const Form: FC = forwardRef((props: FormPropTypes, ref: Ref {updatedTitle && ( @@ -72,7 +75,7 @@ const Form: FC = forwardRef((props: FormPropTypes, ref: Ref )} - + ); }); diff --git a/packages/main/src/components/Grid/Grid.test.tsx b/packages/main/src/components/Grid/Grid.test.tsx index 7665ea08fb9..84e70cb3169 100644 --- a/packages/main/src/components/Grid/Grid.test.tsx +++ b/packages/main/src/components/Grid/Grid.test.tsx @@ -1,4 +1,4 @@ -import { mountThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, mountThemedComponent } from '@shared/tests/utils'; import React from 'react'; import { Grid } from '@ui5/webcomponents-react/lib/Grid'; import { GridPosition } from '@ui5/webcomponents-react/lib/GridPosition'; @@ -95,4 +95,6 @@ describe('Grid', () => { ); expect(wrapper.render()).toMatchSnapshot(); }); + + createPassThroughPropsTest(Grid); }); diff --git a/packages/main/src/components/Grid/index.tsx b/packages/main/src/components/Grid/index.tsx index 839a10f5847..fd18aa231e5 100644 --- a/packages/main/src/components/Grid/index.tsx +++ b/packages/main/src/components/Grid/index.tsx @@ -1,4 +1,6 @@ import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; +import { useViewportRange } from '@ui5/webcomponents-react-base/lib/useViewportRange'; import React, { Children, CSSProperties, @@ -13,7 +15,6 @@ import React, { import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { styles } from './Grid.jss'; -import { useViewportRange } from '@ui5/webcomponents-react-base/lib/useViewportRange'; export enum GridPosition { Left = 'Left', @@ -163,8 +164,17 @@ const Grid: FC = forwardRef((props: GridPropTypes, ref: Ref{child}
; }; + const passThroughProps = usePassThroughHtmlProps(props); + return ( -
+
{Children.map(children, renderGridElements)}
); diff --git a/packages/main/src/components/Loader/Loader.test.tsx b/packages/main/src/components/Loader/Loader.test.tsx index 11767c54843..69d0deb0c84 100644 --- a/packages/main/src/components/Loader/Loader.test.tsx +++ b/packages/main/src/components/Loader/Loader.test.tsx @@ -1,4 +1,4 @@ -import { renderThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, renderThemedComponent } from '@shared/tests/utils'; import React from 'react'; import { LoaderType } from '@ui5/webcomponents-react/lib/LoaderType'; import { Loader } from '@ui5/webcomponents-react/lib/Loader'; @@ -33,4 +33,6 @@ describe('Loader', () => { const wrapper = renderThemedComponent(); expect(wrapper).toMatchSnapshot(); }); + + createPassThroughPropsTest(Loader); }); diff --git a/packages/main/src/components/Loader/index.tsx b/packages/main/src/components/Loader/index.tsx index dec2c3252a3..42204dd1240 100644 --- a/packages/main/src/components/Loader/index.tsx +++ b/packages/main/src/components/Loader/index.tsx @@ -1,4 +1,5 @@ import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { LoaderType } from '@ui5/webcomponents-react/lib/LoaderType'; import React, { CSSProperties, FC, forwardRef, RefObject, useEffect, useMemo, useState } from 'react'; import { createUseStyles } from 'react-jss'; @@ -48,6 +49,8 @@ const Loader: FC = forwardRef((props: LoaderProps, ref: RefObject = forwardRef((props: LoaderProps, ref: RefObject ); }); diff --git a/packages/main/src/components/MessageBox/MessageBox.test.tsx b/packages/main/src/components/MessageBox/MessageBox.test.tsx index 6b4659005dc..26e0ec799cb 100644 --- a/packages/main/src/components/MessageBox/MessageBox.test.tsx +++ b/packages/main/src/components/MessageBox/MessageBox.test.tsx @@ -1,4 +1,4 @@ -import { getEventFromCallback, mountThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, getEventFromCallback, mountThemedComponent } from '@shared/tests/utils'; import React from 'react'; import { spy } from 'sinon'; import { MessageBox } from '@ui5/webcomponents-react/lib/MessageBox'; @@ -170,4 +170,6 @@ describe('MessageBox', () => { ); expect(wrapper.render()).toMatchSnapshot(); }); + + createPassThroughPropsTest(MessageBox); }); diff --git a/packages/main/src/components/MessageBox/index.tsx b/packages/main/src/components/MessageBox/index.tsx index 5647da49eba..e73e3e4a0a2 100644 --- a/packages/main/src/components/MessageBox/index.tsx +++ b/packages/main/src/components/MessageBox/index.tsx @@ -5,6 +5,7 @@ import '@ui5/webcomponents-icons/dist/icons/message-success'; import '@ui5/webcomponents-icons/dist/icons/message-warning'; import '@ui5/webcomponents-icons/dist/icons/question-mark'; import { Event } from '@ui5/webcomponents-react-base/lib/Event'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { Button } from '@ui5/webcomponents-react/lib/Button'; import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign'; import { Dialog } from '@ui5/webcomponents-react/lib/Dialog'; @@ -100,6 +101,8 @@ const MessageBox: FC = forwardRef((props: MessageBoxPropTyp [onClose] ); + const passThroughProps = usePassThroughHtmlProps(props); + return ( = forwardRef((props: MessageBoxPropTyp ))} } + {...passThroughProps} > {children} diff --git a/packages/main/src/components/Notification/Notification.test.tsx b/packages/main/src/components/Notification/Notification.test.tsx index 39d47bc766a..1f3c5b277f8 100644 --- a/packages/main/src/components/Notification/Notification.test.tsx +++ b/packages/main/src/components/Notification/Notification.test.tsx @@ -1,4 +1,4 @@ -import { renderThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, renderThemedComponent } from '@shared/tests/utils'; import React from 'react'; import { Notification } from '@ui5/webcomponents-react/lib/Notification'; import { Button } from '@ui5/webcomponents-react/lib/Button'; @@ -71,4 +71,6 @@ describe('Notification', () => { ); expect(wrapper).toMatchSnapshot(); }); + + createPassThroughPropsTest(Notification); }); diff --git a/packages/main/src/components/Notification/index.tsx b/packages/main/src/components/Notification/index.tsx index a44c158f1a1..05b22a6e605 100644 --- a/packages/main/src/components/Notification/index.tsx +++ b/packages/main/src/components/Notification/index.tsx @@ -1,22 +1,23 @@ +import '@ui5/webcomponents-icons/dist/icons/decline'; import '@ui5/webcomponents-icons/dist/icons/message-error'; -import '@ui5/webcomponents-icons/dist/icons/message-warning'; import '@ui5/webcomponents-icons/dist/icons/message-success'; -import '@ui5/webcomponents-icons/dist/icons/decline'; -import React, { FC, forwardRef, ReactNode, RefObject, useCallback, useEffect, useMemo, useState } from 'react'; -import { createUseStyles } from 'react-jss'; -import { CommonProps } from '../../interfaces/CommonProps'; -import { JSSTheme } from '../../interfaces/JSSTheme'; -import styles from './Notification.jss'; +import '@ui5/webcomponents-icons/dist/icons/message-warning'; +import { Event } from '@ui5/webcomponents-react-base/lib/Event'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { Avatar } from '@ui5/webcomponents-react/lib/Avatar'; -import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize'; import { AvatarShape } from '@ui5/webcomponents-react/lib/AvatarShape'; -import { Icon } from '@ui5/webcomponents-react/lib/Icon'; -import { Priority } from '@ui5/webcomponents-react/lib/Priority'; +import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize'; import { Button } from '@ui5/webcomponents-react/lib/Button'; import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign'; -import { Text } from '@ui5/webcomponents-react/lib/Text'; +import { Icon } from '@ui5/webcomponents-react/lib/Icon'; import { Label } from '@ui5/webcomponents-react/lib/Label'; -import { Event } from '@ui5/webcomponents-react-base/lib/Event'; +import { Priority } from '@ui5/webcomponents-react/lib/Priority'; +import { Text } from '@ui5/webcomponents-react/lib/Text'; +import React, { FC, forwardRef, ReactNode, RefObject, useCallback, useEffect, useMemo, useState } from 'react'; +import { createUseStyles } from 'react-jss'; +import { CommonProps } from '../../interfaces/CommonProps'; +import { JSSTheme } from '../../interfaces/JSSTheme'; +import styles from './Notification.jss'; export interface NotificationProptypes extends CommonProps { footer?: ReactNode | ReactNode[]; @@ -233,6 +234,8 @@ const Notification: FC = forwardRef( return { borderRadius: borderRadius() }; }, [isChild, isLastChild, children, showChildren]); + const passThroughProps = usePassThroughHtmlProps(props); + if (!visibleState) return null; return ( <> @@ -242,6 +245,7 @@ const Notification: FC = forwardRef( onClick={handleNotificationClick} title={tooltip} ref={ref} + {...passThroughProps} >
diff --git a/packages/main/src/components/NotificationGroup/NotificationGroup.test.tsx b/packages/main/src/components/NotificationGroup/NotificationGroup.test.tsx index 6b5ace37824..9e87676bf29 100644 --- a/packages/main/src/components/NotificationGroup/NotificationGroup.test.tsx +++ b/packages/main/src/components/NotificationGroup/NotificationGroup.test.tsx @@ -1,4 +1,4 @@ -import { renderThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, renderThemedComponent } from '@shared/tests/utils'; import React from 'react'; import { Notification } from '@ui5/webcomponents-react/lib/Notification'; import { NotificationGroup } from '@ui5/webcomponents-react/lib/NotificationGroup'; @@ -132,4 +132,6 @@ describe('NotificationGroup', () => { ); expect(wrapper).toMatchSnapshot(); }); + + createPassThroughPropsTest(NotificationGroup); }); diff --git a/packages/main/src/components/NotificationGroup/index.tsx b/packages/main/src/components/NotificationGroup/index.tsx index f1a31154e94..c2c0746fe8b 100644 --- a/packages/main/src/components/NotificationGroup/index.tsx +++ b/packages/main/src/components/NotificationGroup/index.tsx @@ -1,6 +1,4 @@ import React, { FC, forwardRef, RefObject } from 'react'; - -// @ts-ignore import { NotificationProptypes } from '@ui5/webcomponents-react/components/Notification'; import { Notification } from '@ui5/webcomponents-react/lib/Notification'; diff --git a/packages/main/src/components/ObjectPage/ObjectPage.jss.ts b/packages/main/src/components/ObjectPage/ObjectPage.jss.ts index b6972168a55..ccf6e66c3f9 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.jss.ts +++ b/packages/main/src/components/ObjectPage/ObjectPage.jss.ts @@ -1,6 +1,5 @@ import { JSSTheme } from '../../interfaces/JSSTheme'; import { ZIndex } from '../../enums/ZIndex'; -import { CSSProperties } from 'react'; const styles = ({ parameters }: JSSTheme) => ({ objectPage: { diff --git a/packages/main/src/components/ObjectPage/ObjectPage.test.tsx b/packages/main/src/components/ObjectPage/ObjectPage.test.tsx index 435372b3691..7cff87f1ff6 100644 --- a/packages/main/src/components/ObjectPage/ObjectPage.test.tsx +++ b/packages/main/src/components/ObjectPage/ObjectPage.test.tsx @@ -1,4 +1,9 @@ -import { getEventFromCallback, mountThemedComponent, renderThemedComponent } from '@shared/tests/utils'; +import { + createPassThroughPropsTest, + getEventFromCallback, + mountThemedComponent, + renderThemedComponent +} from '@shared/tests/utils'; import React from 'react'; import * as sinon from 'sinon'; import { Button } from '@ui5/webcomponents-react/lib/Button'; @@ -202,4 +207,6 @@ describe('ObjectPage', () => { ); expect(wrapper.render()).toMatchSnapshot(); }); + + createPassThroughPropsTest(ObjectPage); }); diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx index f3ea93b72a0..b628673e597 100644 --- a/packages/main/src/components/ObjectPage/index.tsx +++ b/packages/main/src/components/ObjectPage/index.tsx @@ -1,9 +1,20 @@ -import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef'; -import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; +import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow.js'; +import '@ui5/webcomponents-icons/dist/icons/navigation-up-arrow.js'; +import { IScroller } from '@ui5/webcomponents-react-base/interfaces/IScroller'; import { Event } from '@ui5/webcomponents-react-base/lib/Event'; +import { Scroller } from '@ui5/webcomponents-react-base/lib/Scroller'; +import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; +import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; +import { getScrollBarWidth } from '@ui5/webcomponents-react-base/lib/Utils'; +import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize'; +import { Button } from '@ui5/webcomponents-react/lib/Button'; +import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity'; +import { ObjectPageMode } from '@ui5/webcomponents-react/lib/ObjectPageMode'; import debounce from 'lodash.debounce'; import React, { Children, + CSSProperties, FC, forwardRef, ReactElement, @@ -15,25 +26,15 @@ import React, { useLayoutEffect, useMemo, useRef, - useState, - CSSProperties + useState } from 'react'; import { createUseStyles, useTheme } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; -import { ObjectPageMode } from '@ui5/webcomponents-react/lib/ObjectPageMode'; +import { ObjectPageSubSectionPropTypes } from '../ObjectPageSubSection'; +import { CollapsedAvatar } from './CollapsedAvatar'; import styles from './ObjectPage.jss'; import { ObjectPageAnchorButton } from './ObjectPageAnchorButton'; -import { Button } from '@ui5/webcomponents-react/lib/Button'; -import { CollapsedAvatar } from './CollapsedAvatar'; -import { Scroller } from '@ui5/webcomponents-react-base/lib/Scroller'; -import { IScroller } from '@ui5/webcomponents-react-base/interfaces/IScroller'; -import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize'; -import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity'; -import '@ui5/webcomponents-icons/dist/icons/navigation-up-arrow.js'; -import { getScrollBarWidth } from '@ui5/webcomponents-react-base/lib/Utils'; -import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow.js'; -import { ObjectPageSubSectionPropTypes } from '../ObjectPageSubSection'; export interface ObjectPagePropTypes extends CommonProps { title?: string; @@ -645,6 +646,8 @@ const ObjectPage: FC = forwardRef((props: ObjectPagePropTyp ]; }, [scrollbarWidth]); + const passThroughProps = usePassThroughHtmlProps(props); + return (
= forwardRef((props: ObjectPagePropTyp style={style} ref={objectPage} title={tooltip} + {...passThroughProps} >
diff --git a/packages/main/src/components/ObjectPageSection/ObjectPageSection.test.tsx b/packages/main/src/components/ObjectPageSection/ObjectPageSection.test.tsx index ff510862e8d..673fbb6da39 100644 --- a/packages/main/src/components/ObjectPageSection/ObjectPageSection.test.tsx +++ b/packages/main/src/components/ObjectPageSection/ObjectPageSection.test.tsx @@ -1,4 +1,4 @@ -import { renderThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, renderThemedComponent } from '@shared/tests/utils'; import { shallow } from 'enzyme'; import React from 'react'; import { ObjectPageSection } from '@ui5/webcomponents-react/lib/ObjectPageSection'; @@ -27,4 +27,6 @@ describe('ObjectPageSection', () => { const renderer = () => shallow(); expect(renderer).toThrow(); }); + + createPassThroughPropsTest(ObjectPageSection); }); diff --git a/packages/main/src/components/ObjectPageSection/index.tsx b/packages/main/src/components/ObjectPageSection/index.tsx index cfcf6c7dc4f..83c18c52864 100644 --- a/packages/main/src/components/ObjectPageSection/index.tsx +++ b/packages/main/src/components/ObjectPageSection/index.tsx @@ -1,12 +1,13 @@ -import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; -import React, { forwardRef, ReactNode, ReactNodeArray, RefObject, FC } from 'react'; +import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; +import { useScrollElement } from '@ui5/webcomponents-react-base/lib/useScrollElement'; +import React, { FC, forwardRef, ReactNode, ReactNodeArray, RefObject } from 'react'; import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; import { EmptyIdPropException } from '../ObjectPage/EmptyIdPropException'; import styles from './ObjectPageSection.jss'; -import { useScrollElement } from '@ui5/webcomponents-react-base/lib/useScrollElement'; export interface ObjectPageSectionPropTypes extends CommonProps { title?: string; @@ -38,8 +39,18 @@ const ObjectPageSection: FC = forwardRef( titleClasses.put(classes.uppercase); } + const passThroughProps = usePassThroughHtmlProps(props); + return ( -
+
{title}
diff --git a/packages/main/src/components/ObjectPageSubSection/ObjectPageSubSection.test.tsx b/packages/main/src/components/ObjectPageSubSection/ObjectPageSubSection.test.tsx index ecc5493cbe7..b482860d22a 100644 --- a/packages/main/src/components/ObjectPageSubSection/ObjectPageSubSection.test.tsx +++ b/packages/main/src/components/ObjectPageSubSection/ObjectPageSubSection.test.tsx @@ -1,4 +1,4 @@ -import { renderThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, renderThemedComponent } from '@shared/tests/utils'; import { shallow } from 'enzyme'; import React from 'react'; import { ObjectPageSubSection } from '@ui5/webcomponents-react/lib/ObjectPageSubSection'; @@ -15,4 +15,6 @@ describe('ObjectPageSubSection', () => { const renderer = () => shallow(); expect(renderer).toThrow(); }); + + createPassThroughPropsTest(ObjectPageSubSection); }); diff --git a/packages/main/src/components/ObjectPageSubSection/index.tsx b/packages/main/src/components/ObjectPageSubSection/index.tsx index c853a7941cb..21bc5600140 100644 --- a/packages/main/src/components/ObjectPageSubSection/index.tsx +++ b/packages/main/src/components/ObjectPageSubSection/index.tsx @@ -1,11 +1,12 @@ -import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; -import React, { forwardRef, ReactNode, ReactNodeArray, RefObject, FC } from 'react'; +import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; +import { useScrollElement } from '@ui5/webcomponents-react-base/lib/useScrollElement'; +import React, { FC, forwardRef, ReactNode, ReactNodeArray, RefObject } from 'react'; import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; import { EmptyIdPropException } from '../ObjectPage/EmptyIdPropException'; -import { useScrollElement } from '@ui5/webcomponents-react-base/lib/useScrollElement'; export interface ObjectPageSubSectionPropTypes extends CommonProps { title?: string; @@ -54,14 +55,17 @@ const ObjectPageSubSection: FC = forwardRef( subSectionClassName.put(className); } + const passThroughProps = usePassThroughHtmlProps(props); + return (
{title}
{children}
diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.test.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.test.tsx index 4f68202c6af..8633433f54b 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.test.tsx +++ b/packages/main/src/components/ObjectStatus/ObjectStatus.test.tsx @@ -1,4 +1,4 @@ -import { mountThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, mountThemedComponent } from '@shared/tests/utils'; import React from 'react'; import { ObjectStatus } from '@ui5/webcomponents-react/lib/ObjectStatus'; import { ValueState } from '@ui5/webcomponents-react/lib/ValueState'; @@ -38,4 +38,6 @@ describe('ObjectStatus', () => { const wrapper = mountThemedComponent({el}); expect(wrapper.text()).toEqual(el); }); + + createPassThroughPropsTest(ObjectStatus); }); diff --git a/packages/main/src/components/ObjectStatus/index.tsx b/packages/main/src/components/ObjectStatus/index.tsx index f6e19e8eb74..b559424c11a 100644 --- a/packages/main/src/components/ObjectStatus/index.tsx +++ b/packages/main/src/components/ObjectStatus/index.tsx @@ -1,4 +1,10 @@ +import '@ui5/webcomponents-icons/dist/icons/hint'; +import '@ui5/webcomponents-icons/dist/icons/status-critical'; +import '@ui5/webcomponents-icons/dist/icons/status-inactive'; +import '@ui5/webcomponents-icons/dist/icons/status-negative'; +import '@ui5/webcomponents-icons/dist/icons/status-positive'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { Icon } from '@ui5/webcomponents-react/lib/Icon'; import { ValueState } from '@ui5/webcomponents-react/lib/ValueState'; import React, { FC, forwardRef, ReactNode, Ref, useMemo } from 'react'; @@ -6,11 +12,6 @@ import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; import styles from './ObjectStatus.jss'; -import '@ui5/webcomponents-icons/dist/icons/status-negative'; -import '@ui5/webcomponents-icons/dist/icons/status-positive'; -import '@ui5/webcomponents-icons/dist/icons/status-critical'; -import '@ui5/webcomponents-icons/dist/icons/status-inactive'; -import '@ui5/webcomponents-icons/dist/icons/hint'; export interface ObjectStatusPropTypes extends CommonProps { children?: string | number | ReactNode; @@ -63,8 +64,17 @@ const ObjectStatus: FC = forwardRef((props: ObjectStatusP iconClasses.put(classes[`icon${state}`]); const textClass = classes[`text${state}`]; + const passThroughProps = usePassThroughHtmlProps(props); + return ( -
+
{iconToRender &&
{iconToRender}
} {children !== null && children !== undefined && {children}}
diff --git a/packages/main/src/components/Page/Page.test.tsx b/packages/main/src/components/Page/Page.test.tsx index 10709b82264..f591eac0a13 100644 --- a/packages/main/src/components/Page/Page.test.tsx +++ b/packages/main/src/components/Page/Page.test.tsx @@ -1,4 +1,4 @@ -import { renderThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, renderThemedComponent } from '@shared/tests/utils'; import { Page } from '@ui5/webcomponents-react/lib/Page'; import React from 'react'; @@ -33,4 +33,6 @@ describe('Page', () => { ); expect(wrapper).toMatchSnapshot(); }); + + createPassThroughPropsTest(Page); }); diff --git a/packages/main/src/components/Page/index.tsx b/packages/main/src/components/Page/index.tsx index 8c7a0e0712e..76a54920b28 100644 --- a/packages/main/src/components/Page/index.tsx +++ b/packages/main/src/components/Page/index.tsx @@ -1,6 +1,7 @@ import '@ui5/webcomponents-icons/dist/icons/navigation-left-arrow'; import { Event } from '@ui5/webcomponents-react-base/lib/Event'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { Bar } from '@ui5/webcomponents-react/lib/Bar'; import { Button } from '@ui5/webcomponents-react/lib/Button'; import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign'; @@ -95,8 +96,10 @@ const Page: FC = forwardRef((props: PagePropTypes, ref: Ref +
{showHeader &&
{header}
}
{children}
{showFooter &&
{renderCustomFooter && renderCustomFooter()}
} diff --git a/packages/main/src/components/ProgressIndicator/ProgressIndicator.test.tsx b/packages/main/src/components/ProgressIndicator/ProgressIndicator.test.tsx index 5f368c12854..9bddda0c6dc 100644 --- a/packages/main/src/components/ProgressIndicator/ProgressIndicator.test.tsx +++ b/packages/main/src/components/ProgressIndicator/ProgressIndicator.test.tsx @@ -1,4 +1,4 @@ -import { mountThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, mountThemedComponent } from '@shared/tests/utils'; import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity'; import { ProgressIndicator } from '@ui5/webcomponents-react/lib/ProgressIndicator'; import { ValueState } from '@ui5/webcomponents-react/lib/ValueState'; @@ -29,4 +29,6 @@ describe('ProgressIndicator', () => { }); testFactory(); + + createPassThroughPropsTest(ProgressIndicator); }); diff --git a/packages/main/src/components/ProgressIndicator/index.tsx b/packages/main/src/components/ProgressIndicator/index.tsx index b4b6ec59dad..b1b70a7a93c 100644 --- a/packages/main/src/components/ProgressIndicator/index.tsx +++ b/packages/main/src/components/ProgressIndicator/index.tsx @@ -1,4 +1,5 @@ import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity'; import { ValueState } from '@ui5/webcomponents-react/lib/ValueState'; import React, { FC, forwardRef, Ref, useMemo } from 'react'; @@ -73,8 +74,17 @@ const ProgressIndicator: FC = forwardRef( const progressBarContainerStyle = useMemo(() => ({ ...style, width, height }), [style, width, height]); + const passThroughProps = usePassThroughHtmlProps(props); + return ( -
+
{percentValue <= 50 ? null : progressBarTextSpan}
diff --git a/packages/main/src/components/SegmentedButton/SegmentedButton.test.tsx b/packages/main/src/components/SegmentedButton/SegmentedButton.test.tsx index 2bff98dd473..fd06c92bebb 100644 --- a/packages/main/src/components/SegmentedButton/SegmentedButton.test.tsx +++ b/packages/main/src/components/SegmentedButton/SegmentedButton.test.tsx @@ -1,4 +1,4 @@ -import { getEventFromCallback, mountThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, getEventFromCallback, mountThemedComponent } from '@shared/tests/utils'; import { SegmentedButton } from '@ui5/webcomponents-react/lib/SegmentedButton'; import { SegmentedButtonItem } from '@ui5/webcomponents-react/lib/SegmentedButtonItem'; import React, { cloneElement } from 'react'; @@ -39,4 +39,6 @@ describe('SegmentedButton', () => { expect(wrapper.render()).toMatchSnapshot(); expect(callback.called).toBe(false); }); + + createPassThroughPropsTest(SegmentedButton); }); diff --git a/packages/main/src/components/SegmentedButton/__snapshots__/SegmentedButton.test.tsx.snap b/packages/main/src/components/SegmentedButton/__snapshots__/SegmentedButton.test.tsx.snap index 55d744c189d..e855805761a 100644 --- a/packages/main/src/components/SegmentedButton/__snapshots__/SegmentedButton.test.tsx.snap +++ b/packages/main/src/components/SegmentedButton/__snapshots__/SegmentedButton.test.tsx.snap @@ -9,12 +9,14 @@ exports[`SegmentedButton Update Selection via API 1`] = `
  • Test
  • Test
    • @@ -30,12 +32,14 @@ exports[`SegmentedButton Update Selection via API 2`] = `
  • Test
  • Test
    • diff --git a/packages/main/src/components/SegmentedButton/index.tsx b/packages/main/src/components/SegmentedButton/index.tsx index a4d1fbdaf12..ef38272bd83 100644 --- a/packages/main/src/components/SegmentedButton/index.tsx +++ b/packages/main/src/components/SegmentedButton/index.tsx @@ -1,6 +1,7 @@ -import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef'; -import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; import { Event } from '@ui5/webcomponents-react-base/lib/Event'; +import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; +import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity'; import React, { Children, @@ -112,6 +113,8 @@ const SegmentedButton: FC = forwardRef( }); }, [children, listRef]); + const passThroughProps = usePassThroughHtmlProps(props); + return (
      = forwardRef( ref={listRef} title={tooltip} slot={slot} + {...passThroughProps} > {Children.toArray(children) .filter(Boolean) diff --git a/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.test.tsx b/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.test.tsx index 8c20ee7bde4..355fb908364 100644 --- a/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.test.tsx +++ b/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.test.tsx @@ -1,4 +1,4 @@ -import { getEventFromCallback, mountThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, getEventFromCallback, mountThemedComponent } from '@shared/tests/utils'; import React from 'react'; import sinon from 'sinon'; import { Icon } from '@ui5/webcomponents-react/lib/Icon'; @@ -46,4 +46,6 @@ describe('SegmentedButtonItem', () => { expect(wrapper.render()).toMatchSnapshot(); expect(getEventFromCallback(callback).getParameter('selectedKey')).toEqual(1); }); + + createPassThroughPropsTest(SegmentedButtonItem); }); diff --git a/packages/main/src/components/SegmentedButtonItem/__snapshots__/SegmentedButtonItem.test.tsx.snap b/packages/main/src/components/SegmentedButtonItem/__snapshots__/SegmentedButtonItem.test.tsx.snap index 54473e645f2..6838e3b1f0c 100644 --- a/packages/main/src/components/SegmentedButtonItem/__snapshots__/SegmentedButtonItem.test.tsx.snap +++ b/packages/main/src/components/SegmentedButtonItem/__snapshots__/SegmentedButtonItem.test.tsx.snap @@ -4,6 +4,7 @@ exports[`SegmentedButtonItem Basic SegmentedButtonItem 1`] = `
    • = forwardRef( }; }, [style, width]); + const passThroughProps = usePassThroughHtmlProps(props); + return (
    • = forwardRef( style={inlineStyles} title={tooltip} data-has-own-width={!!width} + {...passThroughProps} > {icon &&
      {icon}
      } {children} diff --git a/packages/main/src/components/SideNavigation/SideNavigation.test.tsx b/packages/main/src/components/SideNavigation/SideNavigation.test.tsx index d1d25e83bac..db61d87e57e 100644 --- a/packages/main/src/components/SideNavigation/SideNavigation.test.tsx +++ b/packages/main/src/components/SideNavigation/SideNavigation.test.tsx @@ -1,4 +1,4 @@ -import { mountThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, mountThemedComponent } from '@shared/tests/utils'; import { SideNavigation } from '@ui5/webcomponents-react/lib/SideNavigation'; import { SideNavigationListItem } from '@ui5/webcomponents-react/lib/SideNavigationListItem'; import { SideNavigationOpenState } from '@ui5/webcomponents-react/lib/SideNavigationOpenState'; @@ -100,4 +100,6 @@ describe('SideNavigation', () => { ); expect(wrapper.render()).toMatchSnapshot(); }); + + createPassThroughPropsTest(SideNavigation); }); diff --git a/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap b/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap index d081a5fbb29..a63f1088372 100644 --- a/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap +++ b/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap @@ -16,6 +16,7 @@ exports[`SideNavigation Collapsed 1`] = ` class="SideNavigationListItem--listItem-" data-has-children="false" data-id="home" + id="home" type="Active" > @@ -66,6 +70,7 @@ exports[`SideNavigation Collapsed 1`] = ` class="SideNavigationListItem--listItem-" data-has-children="false" data-id="delivieries" + id="delivieries" type="Active" > @@ -180,6 +191,7 @@ exports[`SideNavigation Condensed 1`] = ` class="SideNavigationListItem--listItem-" data-has-children="false" data-id="delivieries" + id="delivieries" type="Active" > @@ -261,6 +276,7 @@ exports[`SideNavigation Expanded 1`] = ` class="SideNavigationListItem--listItem-" data-has-children="false" data-id="calendar" + id="calendar" type="Active" > @@ -351,6 +371,7 @@ exports[`SideNavigation Expanded 1`] = ` data-has-children="false" data-id="sales-cpqs" data-is-child="true" + id="sales-cpqs" type="Active" > @@ -529,6 +559,7 @@ exports[`SideNavigation Expanded without Icons 1`] = ` data-has-children="false" data-id="sales-cpqs" data-is-child="true" + id="sales-cpqs" type="Active" > >(sideNavigationStyles, { name: 'SideNavigation' @@ -97,8 +97,10 @@ const SideNavigation: FC = forwardRef((props: SideNavigatio [onItemSelect, onItemClick, setInternalSelectedId] ); + const passThroughProps = usePassThroughHtmlProps(props); + return ( -
      +
      {Children.map(children, (child: any) => cloneElement(child, { diff --git a/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.test.tsx b/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.test.tsx index 0b130c362e6..9a01b489254 100644 --- a/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.test.tsx +++ b/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.test.tsx @@ -1,4 +1,4 @@ -import { mountThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, mountThemedComponent } from '@shared/tests/utils'; import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity'; import { SideNavigationListItem } from '@ui5/webcomponents-react/lib/SideNavigationListItem'; import React from 'react'; @@ -28,4 +28,6 @@ describe('SideNavigationListItem', () => { }); expect(wrapper.render()).toMatchSnapshot(); }); + + createPassThroughPropsTest(SideNavigationListItem); }); diff --git a/packages/main/src/components/SideNavigationListItem/__snapshots__/SideNavigationListItem.test.tsx.snap b/packages/main/src/components/SideNavigationListItem/__snapshots__/SideNavigationListItem.test.tsx.snap index 44413f8cfdb..7917b166a3c 100644 --- a/packages/main/src/components/SideNavigationListItem/__snapshots__/SideNavigationListItem.test.tsx.snap +++ b/packages/main/src/components/SideNavigationListItem/__snapshots__/SideNavigationListItem.test.tsx.snap @@ -5,6 +5,7 @@ exports[`SideNavigationListItem Basic 1`] = ` class="SideNavigationListItem--listItem-" data-has-children="false" data-id="home" + id="home" type="Active" > diff --git a/packages/main/src/components/SideNavigationListItem/index.tsx b/packages/main/src/components/SideNavigationListItem/index.tsx index 88867311000..7ed00fb0d25 100644 --- a/packages/main/src/components/SideNavigationListItem/index.tsx +++ b/packages/main/src/components/SideNavigationListItem/index.tsx @@ -1,4 +1,7 @@ +import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow.js'; +import '@ui5/webcomponents-icons/dist/icons/navigation-right-arrow.js'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity'; import { CustomListItem } from '@ui5/webcomponents-react/lib/CustomListItem'; import { Icon } from '@ui5/webcomponents-react/lib/Icon'; @@ -8,8 +11,6 @@ import { PopoverVerticalAlign } from '@ui5/webcomponents-react/lib/PopoverVertic import { SideNavigationOpenState } from '@ui5/webcomponents-react/lib/SideNavigationOpenState'; import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem'; import { Text } from '@ui5/webcomponents-react/lib/Text'; -import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow.js'; -import '@ui5/webcomponents-icons/dist/icons/navigation-right-arrow.js'; import React, { Children, cloneElement, @@ -94,6 +95,8 @@ const SideNavigationListItem: FC = forwardRef( childCount > 0 && !!validChildren.find((child: any) => child.props.id === props['selectedId']); + const passThroughProps = usePassThroughHtmlProps(props); + const customListItemCommonProps = { ref, className: listItemClasses.valueOf(), @@ -102,7 +105,8 @@ const SideNavigationListItem: FC = forwardRef( style, 'data-id': id, 'data-has-children': childCount > 0, - 'data-is-child': props['isChild'] + 'data-is-child': props['isChild'], + ...passThroughProps }; const popoverRef = useRef(); diff --git a/packages/main/src/components/Spinner/Spinner.test.tsx b/packages/main/src/components/Spinner/Spinner.test.tsx index 584d393f9a7..0d504acaf0e 100644 --- a/packages/main/src/components/Spinner/Spinner.test.tsx +++ b/packages/main/src/components/Spinner/Spinner.test.tsx @@ -1,4 +1,4 @@ -import { renderThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, renderThemedComponent } from '@shared/tests/utils'; import React from 'react'; import { Size } from '@ui5/webcomponents-react/lib/Size'; import { Spinner } from '@ui5/webcomponents-react/lib/Spinner'; @@ -28,4 +28,6 @@ describe('Spinner', () => { const wrapper = renderThemedComponent(); expect(wrapper).toMatchSnapshot(); }); + + createPassThroughPropsTest(Spinner); }); diff --git a/packages/main/src/components/Spinner/index.tsx b/packages/main/src/components/Spinner/index.tsx index 0fa6f6b3698..5ced8903cfd 100644 --- a/packages/main/src/components/Spinner/index.tsx +++ b/packages/main/src/components/Spinner/index.tsx @@ -1,4 +1,5 @@ import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { Size } from '@ui5/webcomponents-react/lib/Size'; import React, { FC, forwardRef, RefObject, useEffect, useState } from 'react'; import { createUseStyles } from 'react-jss'; @@ -35,6 +36,8 @@ const Spinner: FC = forwardRef((props: SpinnerProps, ref: RefObjec } }, []); + const passThroughProps = usePassThroughHtmlProps(props); + if (!isVisible) { return null; } @@ -52,6 +55,7 @@ const Spinner: FC = forwardRef((props: SpinnerProps, ref: RefObjec title={tooltip || 'Please wait'} slot={slot} style={style} + {...passThroughProps} > Loading...
      diff --git a/packages/main/src/components/Text/Text.test.tsx b/packages/main/src/components/Text/Text.test.tsx index 0b192d14ebf..0bf22bed463 100644 --- a/packages/main/src/components/Text/Text.test.tsx +++ b/packages/main/src/components/Text/Text.test.tsx @@ -1,4 +1,4 @@ -import { mountThemedComponent } from '@shared/tests/utils'; +import { createPassThroughPropsTest, mountThemedComponent } from '@shared/tests/utils'; import React from 'react'; import { Text } from '@ui5/webcomponents-react/lib/Text'; @@ -28,4 +28,6 @@ describe('Text', () => { const wrapper = mountThemedComponent(Test); expect(window.getComputedStyle(wrapper.getDOMNode()).width).toEqual('300px'); }); + + createPassThroughPropsTest(Text); }); diff --git a/packages/main/src/components/Text/index.tsx b/packages/main/src/components/Text/index.tsx index 913eb066dbf..99e0d6da793 100644 --- a/packages/main/src/components/Text/index.tsx +++ b/packages/main/src/components/Text/index.tsx @@ -1,4 +1,5 @@ import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import React, { CSSProperties, FC, forwardRef, ReactNode, Ref } from 'react'; import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; @@ -42,8 +43,18 @@ const Text: FC = forwardRef((props: TextProps, ref: Ref + {children} ); diff --git a/packages/main/src/components/VariantManagement/VariantManagement.test.tsx b/packages/main/src/components/VariantManagement/VariantManagement.test.tsx index abb4b3d3b77..142af03ef9b 100644 --- a/packages/main/src/components/VariantManagement/VariantManagement.test.tsx +++ b/packages/main/src/components/VariantManagement/VariantManagement.test.tsx @@ -1,8 +1,11 @@ -import { mountThemedComponent } from '@shared/tests/utils'; -import React from 'react'; +import { createPassThroughPropsTest, mountThemedComponent } from '@shared/tests/utils'; import { VariantManagement } from '@ui5/webcomponents-react/lib/VariantManagement'; +import React from 'react'; -const variantItems = [{ label: 'Variant 1', key: '1' }, { label: 'Variant 2', key: '2' }]; +const variantItems = [ + { label: 'Variant 1', key: '1' }, + { label: 'Variant 2', key: '2' } +]; describe('VariantManagement', () => { test('Render without crashing', () => { @@ -36,4 +39,6 @@ describe('VariantManagement', () => { // // // }); + + createPassThroughPropsTest(VariantManagement, { variantItems }); }); diff --git a/packages/main/src/components/VariantManagement/index.tsx b/packages/main/src/components/VariantManagement/index.tsx index a2b21452c94..dfd657e8b04 100644 --- a/packages/main/src/components/VariantManagement/index.tsx +++ b/packages/main/src/components/VariantManagement/index.tsx @@ -1,4 +1,6 @@ +import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow'; import { Event } from '@ui5/webcomponents-react-base/lib/Event'; +import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { Button } from '@ui5/webcomponents-react/lib/Button'; import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign'; import { List } from '@ui5/webcomponents-react/lib/List'; @@ -9,7 +11,6 @@ import { Popover } from '@ui5/webcomponents-react/lib/Popover'; import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem'; import { Title } from '@ui5/webcomponents-react/lib/Title'; import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel'; -import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow'; import React, { FC, forwardRef, Ref, useCallback, useEffect, useMemo, useState } from 'react'; import { createUseStyles } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; @@ -83,7 +84,7 @@ const VariantManagement: FC = forwardRef( const classes = useStyles(); const [open, setOpen] = useState(false); const [selectedKey, setSelectedKey] = useState( - initialSelectedKey ? initialSelectedKey : variantItems.length ? variantItems[0].key : null + initialSelectedKey ? initialSelectedKey : variantItems?.[0]?.key ?? null ); if (!variantItems || variantItems.length < 1) { @@ -146,6 +147,7 @@ const VariantManagement: FC = forwardRef( }, [handleCancelButtonClick, closeOnItemSelect, selectedKey, variantItems, setSelectedKey] ); + const passThroughProps = usePassThroughHtmlProps(props); return ( = forwardRef( className={className} style={style} tooltip={tooltip} + {...passThroughProps} > {variantItems.map((item) => ( diff --git a/shared/tests/utils.tsx b/shared/tests/utils.tsx index 313426d537c..c491424ba39 100644 --- a/shared/tests/utils.tsx +++ b/shared/tests/utils.tsx @@ -1,7 +1,7 @@ import { Event } from '@ui5/webcomponents-react-base/lib/Event'; import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider'; import { mount, shallow } from 'enzyme'; -import React from 'react'; +import React, { ComponentType } from 'react'; export const modifyObjectProperty = (object: any, attr: string, value: any) => { Object.defineProperty(object, attr, { @@ -30,3 +30,26 @@ export const mountThemedComponent = ( export const renderThemedComponent = (component, contextOverwrite = {}) => shallow({component}).render(); + +export const createPassThroughPropsTest = (Component: ComponentType, props = {}) => { + test('Pass Through HTML Standard Props', () => { + const wrapper = mountThemedComponent( + + ); + const html = wrapper.html(); + + expect(html).toMatch(/data-special-test-prop="data-prop"/); + expect(html).toMatch(/aria-labelledby="aria-prop"/); + // special handling for ObjectPage Sections because of own ID handling... + if (Component.displayName !== 'ObjectPageSection' && Component.displayName !== 'ObjectPageSubSection') { + expect(html).toMatch(/id="element-id"/); + } + expect(html).not.toMatch(/disabled-custom-prop/); + }); +};