Skin components build off React
npm install @ebay/ebayui-core-reacteBayUI React components
* Node.js (v16.14+)
* React (v16.8+)
* eBay Skin (v14)
ebay-carousel (in progress...)ebay-comboboxebay-combobox-readonlyebay-detailsebay-fake-menu (in progress...)ebay-fake-menu-button (in progress...)ebay-fake-tabsebay-filter (in progress...)ebay-filter-menuebay-filter-menu-buttonebay-menu-button (in progress...)ebay-snackbar-dialogebay-tourtipebay-videoebay-window-noticeThese react components are available as @ebay/ebayui-core-react package on NPM.
Use npm or yarn to add the package dependency to your project:
``sh`
yarn add @ebay/ebayui-core-react
jsx
import { EbayTextbox, EbayButton } from '@ebay/ebayui-core-react'
Submit
`$3
jsx harmony
import { EbayTextbox } from '@ebay/ebayui-core-react/ebay-textbox'
import { EbayButton } from '@ebay/ebayui-core-react/ebay-button'
Submit
`$3
If you render children components dynamically and don't want to get React warnings then provide a key:
`jsx harmony
{items.map((item, index) => {item} )}
`#### IE-10/11 (deprecated)
You will need polyfills for IE. Recommended approach is using
with or without babel.To manually use polyfills you need to import them:
`js
import 'core-js/stable/object/values'Object.values({ a: 'Hello' }).map(console.log)
`But we suggest to use polyfills automatically by editing your
:
`json
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": "3",
"targets": {
"chrome": "63",
"safari": "12",
"ios": "12",
"edge": "18",
"ie": "11"
}
}
]
]
}
`
can also be something like "> 0.2%, not dead"
$3
Create an issue on github
Contributing
Write an email to tmanyanov@ebay.com
$3
This will update EbaySvg and EbayIcon components:
`shell script
yarn update-icons
`$3
- Create a feature branch
- to install dependencies
- Add documentations:
* README.md on component level
* Unit test
* Storybook file for snapshot tests and also component showcase/demo
- Make your changes pass the:
* yarn lint. You can do yarn lint --fix to automatically fix small lint issues (e.g indentation, whitespace, semicolons, ...)
* yarn test. Do yarn test -u to automatically the snapshot tests.
$3
If you implement a new component, make sure that it complies with eBay UI guidelines:
* Skin
* MIND pattern for accessibility
One way to comply those guidelines is to implement your new component as similiar as possible with the Marko eBayUI Core, or port the Marko implementation to React. This means the new component should:
* Output the same HTML structure
* Have similiar behaviour (e.g open menu dropdown on click and keyboard)
* Support the same attributes (e.g ebay-breadcrumb
a11y-heading-text, or ebay-button priority)
* Support the same events (e.g ebay-select select-change`). Since React does not use event emitter (unlike Marko), one can implement this as a prop with Function.