diff --git a/.changeset/few-mayflies-confess.md b/.changeset/few-mayflies-confess.md new file mode 100644 index 00000000000..0557ac98f7b --- /dev/null +++ b/.changeset/few-mayflies-confess.md @@ -0,0 +1,8 @@ +--- +'@talend/react-components': major +--- + +Typeahead - Changed input to DS Form.Text + +#### BREAKING CHANGE +Some props and styles that were previously working on bootstrap input might no longer work. Check classNames and overriding styles passed to Typeahead to check that it still integrates well within your pages diff --git a/.changeset/hot-dancers-search.md b/.changeset/hot-dancers-search.md new file mode 100644 index 00000000000..38de3b624b8 --- /dev/null +++ b/.changeset/hot-dancers-search.md @@ -0,0 +1,5 @@ +--- +'@talend/react-containers': minor +--- + +Removed dependency on react-bootstrap on SelectObject component diff --git a/.changeset/light-houses-give.md b/.changeset/light-houses-give.md new file mode 100644 index 00000000000..05e569bbead --- /dev/null +++ b/.changeset/light-houses-give.md @@ -0,0 +1,5 @@ +--- +'@talend/ui-playground': minor +--- + +Remove dependency on react-bootstrap diff --git a/.changeset/slow-forks-remain.md b/.changeset/slow-forks-remain.md new file mode 100644 index 00000000000..69b171c15d4 --- /dev/null +++ b/.changeset/slow-forks-remain.md @@ -0,0 +1,5 @@ +--- +'@talend/react-forms': minor +--- + +Remove dependency on react-bootstrap diff --git a/packages/components/package.json b/packages/components/package.json index 46663518e87..ebe241cf278 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -9,6 +9,7 @@ "build:prod": "talend-scripts build --umd --prod", "pre-release": "yarn build:dev && yarn build:prod", "build:lib": "talend-scripts build && yarn run tsc", + "watch": "talend-scripts build --watch", "tsc": "tsc --emitDeclarationOnly --project ./tsconfig.json --outDir ./types", "test": "cross-env TZ=UTC talend-scripts test", "test:watch": "cross-env TZ=UTC talend-scripts test --watch", diff --git a/packages/components/src/Datalist/Datalist.component.test.js b/packages/components/src/Datalist/Datalist.component.test.js index 5b6e7c60928..e3aadca9f98 100644 --- a/packages/components/src/Datalist/Datalist.component.test.js +++ b/packages/components/src/Datalist/Datalist.component.test.js @@ -30,6 +30,8 @@ const multiSectionMap = [ { title: 'cat 4', suggestions: [{ name: 'My lol', value: 'lol' }] }, ]; +jest.unmock('@talend/design-system'); + describe('Datalist component', () => { it('should render a input', () => { // when diff --git a/packages/components/src/Drawer/Drawer.stories.js b/packages/components/src/Drawer/Drawer.stories.js index c63b1856347..10159645e5b 100644 --- a/packages/components/src/Drawer/Drawer.stories.js +++ b/packages/components/src/Drawer/Drawer.stories.js @@ -1,15 +1,16 @@ import { useState } from 'react'; + import { action } from '@storybook/addon-actions'; -import { TagVariantsNames } from '@talend/design-system'; -import { Nav, NavItem, Tab } from '@talend/react-bootstrap'; -import Drawer from './Drawer.component'; +import { TagVariantsNames } from '@talend/design-system'; import ActionBar from '../ActionBar'; +import { ActionButton } from '../Actions'; import HeaderBar from '../HeaderBar'; import Layout from '../Layout'; import SidePanel from '../SidePanel'; -import { ActionButton } from '../Actions'; +import TabBar from '../TabBar'; +import Drawer from './Drawer.component'; const header = ; @@ -418,49 +419,52 @@ export const WithTabsWithSpecificFooters = () => { export const Custom = () => { function CustomDrawer() { + const [selectedTab, setSelectedTab] = useState('info'); return ( - -
- - - - - - {scrollableContent()} - Test - - - {scrollableContent()} - - - - {scrollableContent()} - - - - {scrollableContent()} - - - -
- + + setSelectedTab(tab.key)} + selectedKey={selectedTab} + /> + +
+ {selectedTab === 'info' && ( + <> + {scrollableContent()} + Test + + )} + {selectedTab === 'navigator' && ( + <> + {scrollableContent()} + + + )} + {selectedTab === 'profile' && ( + <> + {scrollableContent()} + + + )} +
); } @@ -482,20 +486,16 @@ export const CustomStacked = () => { function CustomDrawer() { return ( - -
- - - {scrollableContent()} - - - - -
- + +
+ {scrollableContent()} + + + +
); } diff --git a/packages/components/src/Enumeration/Items/Item/Item.component.js b/packages/components/src/Enumeration/Items/Item/Item.component.js index 734d3b36bbd..61b66d640b1 100644 --- a/packages/components/src/Enumeration/Items/Item/Item.component.js +++ b/packages/components/src/Enumeration/Items/Item/Item.component.js @@ -1,15 +1,16 @@ -import classNames from 'classnames'; -import { Button } from '@talend/react-bootstrap'; import { withTranslation } from 'react-i18next'; -import { removeDuplicates, allIndexOf } from './utils'; +import classNames from 'classnames'; + import Action from '../../../Actions/Action'; -import theme from './Item.module.scss'; import Checkbox from '../../../Checkbox'; -import ItemPropTypes from './Item.propTypes'; import I18N_DOMAIN_COMPONENTS from '../../../constants'; import Icon from '../../../Icon'; import TooltipTrigger from '../../../TooltipTrigger'; +import ItemPropTypes from './Item.propTypes'; +import { allIndexOf, removeDuplicates } from './utils'; + +import theme from './Item.module.scss'; function itemClasses(isSelected) { return classNames({ @@ -89,7 +90,7 @@ function Item({ id, item, searchCriteria, showCheckboxes, style, t }) { } return ( - + ); } diff --git a/packages/components/src/PieChart/PieChartButton.component.js b/packages/components/src/PieChart/PieChartButton.component.js index 94552b78064..2e95396ed6d 100644 --- a/packages/components/src/PieChart/PieChartButton.component.js +++ b/packages/components/src/PieChart/PieChartButton.component.js @@ -1,9 +1,11 @@ import PropTypes from 'prop-types'; -import { Button, Popover } from '@talend/react-bootstrap'; -import PieChartIcon, { pieChartIconPropTypes } from './PieChartIcon.component'; -import pieChartCssModule from './PieChart.module.scss'; + +import { Action } from '../Actions'; import OverlayTrigger from '../OverlayTrigger'; import { getTheme } from '../theme'; +import PieChartIcon, { pieChartIconPropTypes } from './PieChartIcon.component'; + +import pieChartCssModule from './PieChart.module.scss'; const theme = getTheme(pieChartCssModule); @@ -31,7 +33,7 @@ export function decorateWithOverlay( trigger="click" rootClose placement={overlayPlacement} - overlay={{overlayComponent}} + overlay={
{overlayComponent}
} ref={overlayRef} > {btn} @@ -85,11 +87,11 @@ export default function PieChartButtonComponent({ const rClick = wrapMouseEvent(onClick, overlayComponent, label, rest, model); const rMouseDown = wrapMouseEvent(onMouseDown, overlayComponent, label, rest, model); const btn = ( - + ); return decorateWithOverlay(btn, overlayPlacement, overlayComponent, overlayId, overlayRef); } diff --git a/packages/components/src/PieChart/__snapshots__/PieChart.test.js.snap b/packages/components/src/PieChart/__snapshots__/PieChart.test.js.snap index 98866d1924f..2fdfbf564e5 100644 --- a/packages/components/src/PieChart/__snapshots__/PieChart.test.js.snap +++ b/packages/components/src/PieChart/__snapshots__/PieChart.test.js.snap @@ -2,10 +2,11 @@ exports[`PieChart should render a PieChartButton 1`] = ` - + /> + ); } diff --git a/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/__snapshots__/OrderChooser.test.js.snap b/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/__snapshots__/OrderChooser.test.js.snap index 9297cb06268..cfed3f7a6a7 100644 --- a/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/__snapshots__/OrderChooser.test.js.snap +++ b/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/__snapshots__/OrderChooser.test.js.snap @@ -4,7 +4,7 @@ exports[`OrderChooser should render OrderChooser in default mode 1`] = ` + {label} ); diff --git a/packages/components/src/Typeahead/Typeahead.component.renderers.js b/packages/components/src/Typeahead/Typeahead.component.renderers.js index 74f015c02b8..734bfcd7c58 100644 --- a/packages/components/src/Typeahead/Typeahead.component.renderers.js +++ b/packages/components/src/Typeahead/Typeahead.component.renderers.js @@ -1,14 +1,17 @@ -import PropTypes from 'prop-types'; -import ReactDOM from 'react-dom'; -import get from 'lodash/get'; -import { ControlLabel, FormControl } from '@talend/react-bootstrap'; import DebounceInput from 'react-debounce-input'; +import ReactDOM from 'react-dom'; + import classNames from 'classnames'; +import get from 'lodash/get'; +import PropTypes from 'prop-types'; + +import { Form } from '@talend/design-system'; -import { getTheme } from '../theme'; -import Icon from '../Icon'; import CircularProgress from '../CircularProgress'; import Emphasis from '../Emphasis'; +import Icon from '../Icon'; +import { getTheme } from '../theme'; + import theme from './Typeahead.module.scss'; const css = getTheme(theme); @@ -35,9 +38,6 @@ export function renderInputComponent(props) { ); return (
- - Search - {icon && (
{icon && } @@ -45,13 +45,12 @@ export function renderInputComponent(props) { )} {debounceMinLength || debounceTimeout ? ( { // eslint-disable-next-line react/no-find-dom-node @@ -59,13 +58,13 @@ export function renderInputComponent(props) { }} /> ) : ( - )} {hasCaret && ( @@ -100,7 +99,6 @@ export function renderItemsContainerFactory( loadingText, referenceElement, render = content => content, - setPopperElement, styles, attributes, diff --git a/packages/components/src/Typeahead/Typeahead.test.js b/packages/components/src/Typeahead/Typeahead.test.js index a45c9e2d632..d5cd08c11a0 100644 --- a/packages/components/src/Typeahead/Typeahead.test.js +++ b/packages/components/src/Typeahead/Typeahead.test.js @@ -7,6 +7,8 @@ function getHeaders() { return document.querySelectorAll('.section-header'); } +jest.unmock('@talend/design-system'); + describe('Typeahead', () => { const initialProps = { id: 'my-search', diff --git a/packages/components/src/Typeahead/__snapshots__/Typeahead.snapshot.test.js.snap b/packages/components/src/Typeahead/__snapshots__/Typeahead.snapshot.test.js.snap index 5f664d70165..d0e72c1b3a0 100644 --- a/packages/components/src/Typeahead/__snapshots__/Typeahead.snapshot.test.js.snap +++ b/packages/components/src/Typeahead/__snapshots__/Typeahead.snapshot.test.js.snap @@ -11,20 +11,15 @@ exports[`Typeahead injection should use render props to inject extra components
- - - - - - - - - - - - - - - - { @@ -33,27 +33,21 @@ describe('Action', () => { }; // when - const buttonProps = getPropsFrom(Button, props); + const buttonProps = getPropsFrom(Action, props); // then expect(buttonProps).toEqual({ 'aria-label': 'aria-label', 'data-feature': 'data-feature', - active: true, autoFocus: true, - block: false, className: 'my class', - disabled: false, id: 'my-id', - href: 'www.google.de', name: 'toto', - onClick, rel: 'noopener noreferrer', role: 'button', tabIndex: 1, target: '_blank', title: 'my title', - type: 'button', form: 'my-super-form-id', }); }); diff --git a/packages/containers/package.json b/packages/containers/package.json index 624dfe71f64..b32b3806e7e 100644 --- a/packages/containers/package.json +++ b/packages/containers/package.json @@ -34,7 +34,6 @@ }, "dependencies": { "@talend/design-system": "^8.6.1", - "@talend/react-bootstrap": "^2.2.1", "@talend/react-cmf": "^8.3.1", "@talend/react-components": "^12.3.1", "@talend/react-forms": "^12.3.1", diff --git a/packages/containers/src/ComponentForm/__snapshots__/ComponentForm.test.js.snap b/packages/containers/src/ComponentForm/__snapshots__/ComponentForm.test.js.snap index 520ccaff6de..e32d83f84f0 100644 --- a/packages/containers/src/ComponentForm/__snapshots__/ComponentForm.test.js.snap +++ b/packages/containers/src/ComponentForm/__snapshots__/ComponentForm.test.js.snap @@ -60,23 +60,33 @@ exports[`ComponentForm #render should render a UIForm 1`] = `
- - + + +
+ +
+
diff --git a/packages/containers/src/PieChartButton/__snapshots__/PieChartButton.test.js.snap b/packages/containers/src/PieChartButton/__snapshots__/PieChartButton.test.js.snap index 0752591a294..fc72215e653 100644 --- a/packages/containers/src/PieChartButton/__snapshots__/PieChartButton.test.js.snap +++ b/packages/containers/src/PieChartButton/__snapshots__/PieChartButton.test.js.snap @@ -2,10 +2,11 @@ exports[`PieChartButton container should render 1`] = `
diff --git a/packages/containers/src/SelectObject/SelectObject.scss b/packages/containers/src/SelectObject/SelectObject.module.scss similarity index 84% rename from packages/containers/src/SelectObject/SelectObject.scss rename to packages/containers/src/SelectObject/SelectObject.module.scss index 075fe9b054e..016c3dba1c3 100644 --- a/packages/containers/src/SelectObject/SelectObject.scss +++ b/packages/containers/src/SelectObject/SelectObject.module.scss @@ -14,6 +14,7 @@ .container { display: flex; flex-direction: row; + overflow: auto; .list { flex: 4 0 0; @@ -25,6 +26,17 @@ } .results { + > button { + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; + + &:hover { + background-color: #f3f3f3; + } + } + margin-top: $padding-smaller; overflow-y: auto; flex: 4 0 0; diff --git a/packages/faceted-search/src/components/BasicSearch/__snapshots__/BasicSearch.component.test.js.snap b/packages/faceted-search/src/components/BasicSearch/__snapshots__/BasicSearch.component.test.js.snap index 325ff3d958f..16b6f54efe1 100644 --- a/packages/faceted-search/src/components/BasicSearch/__snapshots__/BasicSearch.component.test.js.snap +++ b/packages/faceted-search/src/components/BasicSearch/__snapshots__/BasicSearch.component.test.js.snap @@ -15,12 +15,6 @@ exports[`BasicSearch should render the default html output with no badges 1`] =
-
@@ -33,18 +27,34 @@ exports[`BasicSearch should render the default html output with no badges 1`] = shape-rendering="geometricPrecision" />
- +
+ + +
+ +
+
- - + + +
+ +
+
diff --git a/packages/playground/package.json b/packages/playground/package.json index 937f1478b0e..21f5c28bc76 100644 --- a/packages/playground/package.json +++ b/packages/playground/package.json @@ -39,7 +39,6 @@ }, "dependencies": { "@talend/bootstrap-theme": "^8.3.1", - "@talend/react-bootstrap": "^2.2.1", "@talend/assets-api": "^1.3.1", "@talend/design-system": "^8.6.1", "@talend/design-tokens": "^2.10.1", diff --git a/packages/playground/src/app/components/ComponentFormSandbox.js b/packages/playground/src/app/components/ComponentFormSandbox.js index 4316411ec05..d524f0e023b 100644 --- a/packages/playground/src/app/components/ComponentFormSandbox.js +++ b/packages/playground/src/app/components/ComponentFormSandbox.js @@ -1,17 +1,21 @@ import { useState } from 'react'; + import PropTypes from 'prop-types'; + +import { InlineMessageInformation } from '@talend/design-system'; import { cmfConnect } from '@talend/react-cmf'; import Layout from '@talend/react-components/lib/Layout'; import SubHeaderBar from '@talend/react-components/lib/SubHeaderBar'; -import UIForm from '@talend/react-forms'; import ComponentForm from '@talend/react-containers/lib/ComponentForm'; -import SidePanel from '@talend/react-containers/lib/SidePanel'; import HeaderBar from '@talend/react-containers/lib/HeaderBar'; -import { Alert } from '@talend/react-bootstrap'; +import SidePanel from '@talend/react-containers/lib/SidePanel'; +import UIForm from '@talend/react-forms'; + // test new behavior on non css module files import './ComponentFormSandbox.scss'; const example = require('../../../mockBackend/mock/kit/example.json'); + const { isComponentFormDirty } = ComponentForm.selectors; const { setComponentFormDirtyState } = ComponentForm.actions; @@ -86,9 +90,10 @@ function ComponentFormSandBox({ dirty, dispatch }) { />
{!hasAPI && ( - - You don t have backend API so we will use an ComponentForm as proxy to UIForm component - + )} {displayConfig ? (