@ebay/ebayui-core-react
v10.0.17
Published
Skin components build off React
Downloads
22
Readme
ebayui-core-react
eBayUI React components
Requirements
eBayUI Components
- [x] ebay-alert-dialog
- [x] ebay-confirm-dialog
- [x] ebay-badge
- [x] ebay-breadcrumbs
- [x] ebay-button
- [ ]
ebay-carousel
(in progress...) - [x] ebay-checkbox
- [ ]
ebay-combobox
- [ ]
ebay-combobox-readonly
- [x] ebay-cta-button
- [ ]
ebay-details
- [x] ebay-drawer-dialog
- [x] ebay-eek
- [x] ebay-expand-button
- [x] ebay-fullscreen-dialog
- [ ]
ebay-fake-menu
(in progress...) - [ ]
ebay-fake-menu-button
(in progress...) - [ ]
ebay-fake-tabs
- [x] ebay-floating-label
- [x] ebay-field
- [ ]
ebay-filter
(in progress...) - [ ]
ebay-filter-menu
- [ ]
ebay-filter-menu-button
- [x] ebay-icon
- [x] ebay-infotip
- [x] ebay-inline-notice
- [x] ebay-legacy-floating-label
- [x] ebay-lightbox-dialog
- [x] ebay-listbox-button
- [x] [ebay-menu] (src/ebay-menu)
- [ ]
ebay-menu-button
(in progress...) - [x] ebay-page-notice
- [x] ebay-pagination
- [x] ebay-panel-dialog
- [x] ebay-progress-bar
- [x] ebay-progress-spinner
- [x] ebay-progress-stepper
- [x] ebay-radio
- [x] ebay-section-title
- [x] ebay-section-notice
- [x] ebay-select
- [ ]
ebay-snackbar-dialog
- [x] ebay-switch
- [x] ebay-signal
- [x] ebay-tab
- [x] ebay-textbox
- [x] ebay-toast-dialog
- [x] ebay-tooltip
- [ ]
ebay-tourtip
- [ ]
ebay-video
- [ ]
ebay-window-notice
Getting Started
These react components are available as @ebay/ebayui-core-react
package on NPM.
Use npm or yarn to add the package dependency to your project:
yarn add @ebay/ebayui-core-react
for quick development/POC
import { EbayTextbox, EbayButton } from '@ebay/ebayui-core-react'
<EbayTextbox placeholder="Enter text here" />
<EbayButton>Submit</EbayButton>
for smaller bundle size
import { EbayTextbox } from '@ebay/ebayui-core-react/ebay-textbox'
import { EbayButton } from '@ebay/ebayui-core-react/ebay-button'
<EbayTextbox placeholder="Enter text here" />
<EbayButton>Submit</EbayButton>
Notes
If you render children components dynamically and don't want to get React key
warnings then provide a key
:
<EbayParentComponent>
{items.map((item, index) => <EbayChildComponent key={index}>{item}</EbayChildComponent>)}
</EbayParentComponent>
IE-10/11 (deprecated)
You will need polyfills for IE. Recommended approach is using core-js
with or without babel
.
To manually use polyfills you need to import them:
import 'core-js/stable/object/values'
Object.values({ a: 'Hello' }).map(console.log)
But we suggest to use polyfills automatically by editing your .babelrc
:
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": "3",
"targets": {
"chrome": "63",
"safari": "12",
"ios": "12",
"edge": "18",
"ie": "11"
}
}
]
]
}
targets
can also be something like "> 0.2%, not dead"
Issues
Create an issue on github
Contributing
Write an email to [email protected]
How to update icons on skin
changes
This will update EbaySvg
and EbayIcon
components:
yarn update-icons
Quick guidance for contribution:
- Create a feature branch
git checkout -b features/new-component
yarn install
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 doyarn lint --fix
to automatically fix small lint issues (e.g indentation, whitespace, semicolons, ...)yarn test
. Doyarn test -u
to automatically the snapshot tests.
Requirements for new component
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-buttonpriority
) - 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.