Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(TDOPS-5724): remove react bootstrap #5045

Merged
merged 10 commits into from
Dec 13, 2023
Merged

chore(TDOPS-5724): remove react bootstrap #5045

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3596846
remove from forms and sandbox
Dec 7, 2023
95ea275
remove from containers
Dec 7, 2023
0649d2d
remove from components
Dec 7, 2023
4cba72a
update tests
Dec 7, 2023
62ddac8
update tests
Dec 7, 2023
bb6d691
update tests
Dec 7, 2023
7b09e6c
update tests
Dec 7, 2023
837c6ff
changeset and last minute fixes
Dec 7, 2023
46f16a9
Update .changeset/hot-dancers-search.md
Gbacc Dec 11, 2023
c9c7394
Merge branch 'master' into gbacc/chore/TDOPS-5724-remove-react-bootstrap
Gbacc Dec 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .changeset/few-mayflies-confess.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
5 changes: 5 additions & 0 deletions .changeset/hot-dancers-search.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@talend/react-containers': minor
---

Removed dependency on react-bootstrap on SelectObject component
5 changes: 5 additions & 0 deletions .changeset/light-houses-give.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@talend/ui-playground': minor
---

Remove dependency on react-bootstrap
5 changes: 5 additions & 0 deletions .changeset/slow-forks-remain.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@talend/react-forms': minor
---

Remove dependency on react-bootstrap
1 change: 1 addition & 0 deletions packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 2 additions & 0 deletions packages/components/src/Datalist/Datalist.component.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
118 changes: 59 additions & 59 deletions packages/components/src/Drawer/Drawer.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = <HeaderBar brand={{ label: 'Example App Name' }} />;

Expand Down Expand Up @@ -418,49 +419,52 @@ export const WithTabsWithSpecificFooters = () => {

export const Custom = () => {
function CustomDrawer() {
const [selectedTab, setSelectedTab] = useState('info');
return (
<Drawer.Container>
<Tab.Container defaultActiveKey="info" id="custom">
<div style={{ flexGrow: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
<Drawer.Title
title="Custom drawer with tabs and a super long name that breaks the drawer title"
onCancelAction={onCancelAction}
>
<Nav bsClass="nav nav-tabs">
<NavItem componentClass="button" eventKey="info">
Info
</NavItem>
<NavItem componentClass="button" eventKey="navigator">
Navigator
</NavItem>
<NavItem componentClass="button" eventKey="profile">
Profile
</NavItem>
<NavItem componentClass="button" eventKey="metrics">
Metrics
</NavItem>
</Nav>
</Drawer.Title>
<Tab.Content animation>
<Tab.Pane eventKey="info">
<Drawer.Content>{scrollableContent()}</Drawer.Content>
<Drawer.Footer>Test</Drawer.Footer>
</Tab.Pane>
<Tab.Pane eventKey="navigator">
<Drawer.Content>{scrollableContent()}</Drawer.Content>
<Drawer.Footer />
</Tab.Pane>
<Tab.Pane eventKey="profile">
<Drawer.Content>{scrollableContent()}</Drawer.Content>
<Drawer.Footer />
</Tab.Pane>
<Tab.Pane eventKey="metrics">
<Drawer.Content>{scrollableContent()}</Drawer.Content>
<Drawer.Footer />
</Tab.Pane>
</Tab.Content>
</div>
</Tab.Container>
<Drawer.Title
title="Custom drawer with tabs and a super long name that breaks the drawer title"
onCancelAction={onCancelAction}
>
<TabBar
items={[
{
key: 'info',
label: 'Info',
},
{
key: 'navigator',
label: 'Navigator',
},
{
key: 'profile',
label: 'Profile',
},
]}
onSelect={(_, tab) => setSelectedTab(tab.key)}
selectedKey={selectedTab}
/>
</Drawer.Title>
<div style={{ flexGrow: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
{selectedTab === 'info' && (
<>
<Drawer.Content>{scrollableContent()}</Drawer.Content>
<Drawer.Footer>Test</Drawer.Footer>
</>
)}
{selectedTab === 'navigator' && (
<>
<Drawer.Content>{scrollableContent()}</Drawer.Content>
<Drawer.Footer />
</>
)}
{selectedTab === 'profile' && (
<>
<Drawer.Content>{scrollableContent()}</Drawer.Content>
<Drawer.Footer />
</>
)}
</div>
</Drawer.Container>
);
}
Expand All @@ -482,20 +486,16 @@ export const CustomStacked = () => {
function CustomDrawer() {
return (
<Drawer.Container stacked>
<Tab.Container defaultActiveKey="info" id="info">
<div style={{ flexGrow: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
<Drawer.Title
title="Custom drawer with tabs and a super long name that breaks the drawer title"
onCancelAction={sameCancelAction}
/>
<Tab.Content>
<Drawer.Content>{scrollableContent()}</Drawer.Content>
<Drawer.Footer>
<ActionBar actions={panelActions} />
</Drawer.Footer>
</Tab.Content>
</div>
</Tab.Container>
<Drawer.Title
title="Custom drawer with tabs and a super long name that breaks the drawer title"
onCancelAction={sameCancelAction}
/>
<div style={{ flexGrow: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
<Drawer.Content>{scrollableContent()}</Drawer.Content>
<Drawer.Footer>
<ActionBar actions={panelActions} />
</Drawer.Footer>
</div>
</Drawer.Container>
);
}
Expand Down
15 changes: 8 additions & 7 deletions packages/components/src/Enumeration/Items/Item/Item.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand Down Expand Up @@ -89,7 +90,7 @@ function Item({ id, item, searchCriteria, showCheckboxes, style, t }) {
}

return (
<Button
<Action
className={itemLabelClasses(item.className)}
role="gridcell"
onClick={event => onSelectItem(item, event)}
Expand Down Expand Up @@ -118,7 +119,7 @@ function Item({ id, item, searchCriteria, showCheckboxes, style, t }) {
</span>
</TooltipTrigger>
)}
</Button>
</Action>
);
}

Expand Down
16 changes: 9 additions & 7 deletions packages/components/src/PieChart/PieChartButton.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);

Expand Down Expand Up @@ -31,7 +33,7 @@ export function decorateWithOverlay(
trigger="click"
rootClose
placement={overlayPlacement}
overlay={<Popover id={overlayId}>{overlayComponent}</Popover>}
overlay={<div id={overlayId}>{overlayComponent}</div>}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a Popover component in Coral if we want to use it here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes that's true , but i think we don't really need a popover here as overlaytrigger is already some sort of popover so it's like putting popover into your popover 😂

ref={overlayRef}
>
{btn}
Expand Down Expand Up @@ -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 = (
<Button
<Action
className={theme('tc-pie-chart-button', className)}
onMouseDown={rMouseDown}
onClick={rClick}
ref={buttonRef}
buttonRef={buttonRef}
bsStyle="link"
role="button"
{...rest}
Expand All @@ -103,7 +105,7 @@ export default function PieChartButtonComponent({
model={model}
size={size}
/>
</Button>
</Action>
);
return decorateWithOverlay(btn, overlayPlacement, overlayComponent, overlayId, overlayRef);
}
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/PieChart/__snapshots__/PieChart.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@

exports[`PieChart should render a PieChartButton 1`] = `
<button
class="tc-pie-chart-button theme-tc-pie-chart-button btn btn-link"
class="tc-pie-chart-button theme-tc-pie-chart-button btn-icon-only btn btn-link"
role="button"
type="button"
>
<span />
<span
class="tc-pie-chart-icon theme-tc-pie-chart-icon"
>
Expand Down
6 changes: 2 additions & 4 deletions packages/components/src/PieChart/__snapshots__/PieChartButton.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,13 @@ exports[`decorateWithOverlay should return the component wrapped 1`] = `
<span>
<OverlayTrigger
overlay={
<Popover
bsClass="popover"
<div
id="id-test"
placement="right"
>
<div
className="fake-overlay"
/>
</Popover>
</div>
}
placement="top"
preventScrolling={false}
Expand Down
14 changes: 11 additions & 3 deletions packages/components/src/ResourceList/ResourceList.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { useState, useMemo } from 'react';
import PropTypes from 'prop-types';
import { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';

import { action } from '@storybook/addon-actions';
import PropTypes from 'prop-types';

import ResourceList from './ResourceList.component';
import Icon from '../Icon';
import ResourceList from './ResourceList.component';

const collection = [
{
Expand Down Expand Up @@ -264,6 +265,13 @@ export function FilteredResourceList(props) {
value: filter,
onChange: event => setFilter(event.target.value),
},
sort: {
types: ['name'],
onChange: action('sort'),
orders: {
name: 'asc',
},
},
}}
{...props}
collection={filteredCollection}
Expand Down
Loading
Loading