@ebay/ui-core-react 6.3.0 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/common/floating-label-utils/hooks.d.ts.map +1 -1
  2. package/common/floating-label-utils/hooks.js +3 -2
  3. package/ebay-alert-dialog/README.md +4 -1
  4. package/ebay-badge/README.md +2 -2
  5. package/ebay-breadcrumbs/README.md +1 -1
  6. package/ebay-button/README.md +1 -1
  7. package/ebay-calendar/README.md +27 -24
  8. package/ebay-carousel/README.md +4 -1
  9. package/ebay-checkbox/README.md +2 -2
  10. package/ebay-confirm-dialog/README.md +4 -1
  11. package/ebay-cta-button/README.md +1 -1
  12. package/ebay-date-textbox/README.md +31 -28
  13. package/ebay-dialog-base/README.md +1 -1
  14. package/ebay-drawer-dialog/README.md +3 -0
  15. package/ebay-eek/README.md +1 -1
  16. package/ebay-fake-menu/README.md +2 -2
  17. package/ebay-fake-menu-button/README.md +2 -2
  18. package/ebay-fake-tabs/README.md +2 -2
  19. package/ebay-field/README.md +2 -2
  20. package/ebay-fullscreen-dialog/README.md +4 -1
  21. package/ebay-icon/README.md +4 -1
  22. package/ebay-icon/icon.d.ts.map +1 -1
  23. package/ebay-icon/icon.js +20 -1
  24. package/ebay-icon/types.d.ts +1 -1
  25. package/ebay-icon/types.d.ts.map +1 -1
  26. package/ebay-icon-button/README.md +1 -1
  27. package/ebay-infotip/README.md +2 -2
  28. package/ebay-inline-notice/README.md +2 -2
  29. package/ebay-lightbox-dialog/README.md +4 -1
  30. package/ebay-lightbox-dialog/lightbox-dialog.d.ts +1 -1
  31. package/ebay-lightbox-dialog/lightbox-dialog.d.ts.map +1 -1
  32. package/ebay-listbox-button/README.md +2 -2
  33. package/ebay-menu/README.md +2 -2
  34. package/ebay-menu-button/README.md +2 -2
  35. package/ebay-page-notice/README.md +2 -3
  36. package/ebay-pagination/README.md +5 -2
  37. package/ebay-panel-dialog/README.md +4 -1
  38. package/ebay-progress-bar/README.md +1 -1
  39. package/ebay-progress-spinner/README.md +1 -1
  40. package/ebay-progress-stepper/README.md +3 -4
  41. package/ebay-radio/README.md +14 -14
  42. package/ebay-section-notice/README.md +2 -3
  43. package/ebay-section-title/README.md +10 -9
  44. package/ebay-select/README.md +5 -2
  45. package/ebay-signal/README.md +2 -2
  46. package/ebay-snackbar-dialog/README.md +3 -0
  47. package/ebay-split-button/README.md +1 -1
  48. package/ebay-star-rating/README.md +3 -2
  49. package/ebay-star-rating-select/README.md +3 -2
  50. package/ebay-svg/README.md +1 -1
  51. package/ebay-svg/svg.d.ts.map +1 -1
  52. package/ebay-svg/svg.js +82 -42
  53. package/ebay-switch/README.md +10 -8
  54. package/ebay-tabs/README.md +2 -2
  55. package/ebay-textbox/README.md +32 -34
  56. package/ebay-textbox/index.d.ts +2 -0
  57. package/ebay-textbox/index.d.ts.map +1 -1
  58. package/ebay-textbox/index.js +5 -1
  59. package/ebay-textbox/postfix-text.d.ts +5 -0
  60. package/ebay-textbox/postfix-text.d.ts.map +1 -0
  61. package/ebay-textbox/postfix-text.js +8 -0
  62. package/ebay-textbox/prefix-text.d.ts +5 -0
  63. package/ebay-textbox/prefix-text.d.ts.map +1 -0
  64. package/ebay-textbox/prefix-text.js +8 -0
  65. package/ebay-textbox/textbox.d.ts +1 -1
  66. package/ebay-textbox/textbox.d.ts.map +1 -1
  67. package/ebay-textbox/textbox.js +21 -9
  68. package/ebay-textbox/types.d.ts +6 -0
  69. package/ebay-textbox/types.d.ts.map +1 -1
  70. package/ebay-toast-dialog/README.md +13 -10
  71. package/ebay-tooltip/README.md +2 -3
  72. package/ebay-tourtip/README.md +2 -3
  73. package/ebay-video/README.md +6 -2
  74. package/package.json +5 -3
@@ -1,8 +1,8 @@
1
- # ebay-inline-notice
1
+ # EbayInlineNotice
2
2
 
3
3
  ## Demo
4
4
 
5
- [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-inline-notice--confirmation-message)
5
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/notices-tips-ebay-inline-notice--default)
6
6
 
7
7
  ## Use
8
8
 
@@ -1,8 +1,11 @@
1
1
  # EbayLightboxDialog
2
2
 
3
+ ## Demo
4
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/dialogs-ebay-lightbox-dialog--default)
5
+
3
6
  ## Usage
4
7
 
5
- ```react
8
+ ```jsx
6
9
  <EbayLightboxDialog open a11yClosetext="Close">
7
10
  <EbayDialogHeader>Heading</EbayDialogHeader>
8
11
  <p>Body content</p>
@@ -1,7 +1,7 @@
1
1
  import { FC } from 'react';
2
2
  import { DialogBaseProps } from '../ebay-dialog-base';
3
3
  type Mode = 'default' | 'mini';
4
- type Size = 'wide' | 'narrow';
4
+ type Size = 'wide' | 'narrow' | 'fullscreen' | 'large';
5
5
  export type Props<T = any> = Omit<DialogBaseProps<T>, 'size'> & {
6
6
  open?: boolean;
7
7
  mode?: Mode;
@@ -1 +1 @@
1
- {"version":3,"file":"lightbox-dialog.d.ts","sourceRoot":"","sources":["../../src/ebay-lightbox-dialog/lightbox-dialog.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,eAAe,EAAuB,MAAM,qBAAqB,CAAA;AAI1E,KAAK,IAAI,GAAG,SAAS,GAAG,MAAM,CAAA;AAC9B,KAAK,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAA;AAE7B,MAAM,MAAM,KAAK,CAAC,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GAAG;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAA;AAED,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,KAAK,CAmBjC,CAAA;AAED,eAAe,kBAAkB,CAAA"}
1
+ {"version":3,"file":"lightbox-dialog.d.ts","sourceRoot":"","sources":["../../src/ebay-lightbox-dialog/lightbox-dialog.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,eAAe,EAAuB,MAAM,qBAAqB,CAAA;AAI1E,KAAK,IAAI,GAAG,SAAS,GAAG,MAAM,CAAA;AAC9B,KAAK,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,YAAY,GAAG,OAAO,CAAA;AAEtD,MAAM,MAAM,KAAK,CAAC,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GAAG;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAA;AAED,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,KAAK,CAmBjC,CAAA;AAED,eAAe,kBAAkB,CAAA"}
@@ -1,7 +1,7 @@
1
- # ebay-listbox-button
1
+ # EbayListboxButton
2
2
 
3
3
  ## Demo
4
- [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-listbox-button--default)
4
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/buttons-ebay-listbox-button--default)
5
5
 
6
6
  ## Import JS
7
7
  ```jsx harmony
@@ -1,7 +1,7 @@
1
- # ebay-menu
1
+ # EbayMenu
2
2
 
3
3
  ## Demo
4
- [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-menu--default)
4
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/building-blocks-ebay-menu--default)
5
5
 
6
6
  ## Install
7
7
  ```
@@ -1,7 +1,7 @@
1
- # ebay-menu-button
1
+ # EbayMenuButton
2
2
 
3
3
  ## Demo
4
- [Storybook](https://pages.github.corp.ebay.com/React/ebayui-core-react/master/?path=/story/ebay-menu-button--default)
4
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/buttons-ebay-menu-button--default)
5
5
 
6
6
  ## Install
7
7
  ```
@@ -1,8 +1,7 @@
1
- # ebay-page-notice
1
+ # EbayPageNotice
2
2
 
3
3
  ## Demo
4
-
5
- [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-page-notice--confirmation-message)
4
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/notices-tips-ebay-page-notice--simple-usage)
6
5
 
7
6
  ## Import JS
8
7
 
@@ -1,5 +1,8 @@
1
1
  # EbayPagination
2
2
 
3
+ ## Demo
4
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/navigation-disclosure-ebay-pagination--basic-links)
5
+
3
6
  The `<EbayPagination>` is a tag used to create a pagination navigation. It will display up to 9 page links.
4
7
  If pagination doesn't fit the page it will adjust to the available width.
5
8
 
@@ -22,7 +25,7 @@ import '@ebay/skin/utility.css'
22
25
 
23
26
  ### EbayPagination Usage
24
27
 
25
- ```React
28
+ ```jsx
26
29
  <EbayPagination a11yPreviousText="Previous page" a11yNextText="Next page" a11yCurrentText="Results Pagination - Page 2">
27
30
  <EbayPaginationItem href="#" type="previous" disabled/>
28
31
  <EbayPaginationItem href="#" current>item 1</EbayPaginationItem>
@@ -54,7 +57,7 @@ Name | Type | Stateful | Description
54
57
 
55
58
  ### EbayPaginationItem Usage
56
59
 
57
- ```React
60
+ ```jsx
58
61
  <EbayPaginationItem>1</EbayPaginationItem>
59
62
  ```
60
63
 
@@ -1,8 +1,11 @@
1
1
  # EbayPanelDialog
2
2
 
3
+ ## Demo
4
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/dialogs-ebay-panel-dialog--default)
5
+
3
6
  ## Usage
4
7
 
5
- ```react
8
+ ```jsx
6
9
  <EbayPanelDialog open a11yClosetext="Close">
7
10
  <EbayDialogHeader>Heading</EbayDialogHeader>
8
11
  <p>Body content</p>
@@ -2,7 +2,7 @@
2
2
  The progress bar gives an immediate, real-time visualisation of the current task completion status. The progress bar's value does not include its min, so giving a value <= min will set the value to min + 1.
3
3
 
4
4
  ## Demo
5
- [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-progress-bar--default)
5
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/progress-ebay-progress-bar--default)
6
6
 
7
7
  ## Usage
8
8
 
@@ -1,7 +1,7 @@
1
1
  # EbayProgressSpinner
2
2
 
3
3
  ## Demo
4
- [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-progress-spinner--default-large)
4
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/progress-ebay-progress-spinner--default-small-large)
5
5
 
6
6
  ## Usage
7
7
 
@@ -1,8 +1,7 @@
1
- # ebay-progress-stepper
1
+ # EbayProgressStepper
2
2
 
3
3
  ## Demo
4
-
5
- [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-progress-stepper--default)
4
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/progress-ebay-progress-stepper--default)
6
5
 
7
6
  ## Usage
8
7
 
@@ -19,7 +18,7 @@ import { EbayProgressStepper, EbayProgressStep as Step } from '@ebay/ui-core-rea
19
18
  ### Import styles from Skin
20
19
 
21
20
  ```jsx
22
- import '@ebay/skin/stepper'
21
+ import '@ebay/skin/progress-stepper'
23
22
  ```
24
23
 
25
24
  ```jsx
@@ -1,7 +1,7 @@
1
- # ebay-radio
1
+ # EbayRadio
2
2
 
3
3
  ## Demo
4
- [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-radio--default-radio-button)
4
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/form-input-ebay-radio--default)
5
5
 
6
6
  ## Install
7
7
  ```
@@ -39,19 +39,19 @@ This component uses SVG icons, so you need to add the `<EbaySvg/>` component at
39
39
 
40
40
  ## Attributes
41
41
 
42
- Name | Type | Description
43
- --- | --- | --- | ---
44
- `disabled` | Boolean | Disabled when true
45
- `value` | string | The value of radio button component. For the radio checked/unchecked state, please use `checked` props.
46
- `checked` | boolean | Set the radio button state to checked/unchecked. Use this for **controlled component**.
47
- `defaultChecked` | boolean | Set the radio button initial state to checked/unchecked. Use this for **uncontrolled component**.
48
- `size` | String | No | No | Either `large` or `regular` (default). Sets the radio icon size. For mweb this should be set to `large`. (Note: The dimensions of the radio will not change, but only the icon)
42
+ | Name | Type | Description |
43
+ | ---------------- | ------- | ----------- |
44
+ | `disabled` | boolean | Disabled when true |
45
+ | `value` | string | The value of radio button component. For the radio checked/unchecked state, please use `checked` props. |
46
+ | `checked` | boolean | Set the radio button state to checked/unchecked. Use this for **controlled component**. |
47
+ | `defaultChecked` | boolean | Set the radio button initial state to checked/unchecked. Use this for **uncontrolled component**. |
48
+ | `size` | string | No | No | Either `large` or `regular` (default). Sets the radio icon size. For mweb this should be set to `large`. (Note: The dimensions of the radio will not change, but only the icon) |
49
49
 
50
50
  ## Callbacks
51
- Name | Data | Description
52
- --- | --- | --- | ---
53
- `onChange` | `(ChangeEvent, { value })` | Callback fired when selected radio button is changed
54
- `onFocus` | `(FocusEvent, { value })` | Callback fired when radio button is focused
55
- `onKeydown` | `(KeyboardEvent, { value })` | Callback fired when key is down
51
+ | Name | Data | Description |
52
+ | ----------- | ---------------------------- | ---------------------------------------------------- |
53
+ | `onChange` | `(ChangeEvent, { value })` | Callback fired when selected radio button is changed |
54
+ | `onFocus` | `(FocusEvent, { value })` | Callback fired when radio button is focused |
55
+ | `onKeydown` | `(KeyboardEvent, { value })` | Callback fired when key is down |
56
56
 
57
57
  Note: For this component, `className`/`style` are applied to the container, while all other HTML attributes are applied to the input.
@@ -1,8 +1,7 @@
1
- # ebay-section-notice
1
+ # EbaySectionNotice
2
2
 
3
3
  ## Demo
4
-
5
- [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-section-notice--default-message-with-no-action)
4
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/notices-tips-ebay-section-notice--default-message-with-no-action)
6
5
 
7
6
  ## Import JS
8
7
 
@@ -37,17 +37,18 @@ import '@ebay/skin/section-title.css'
37
37
 
38
38
  ## EbaySectionTitle Props
39
39
 
40
- Name | Type | Stateful | Required | Description
41
- --- | --- | --- | --- | ---
42
- `ctaText` | String | No | No | URL text. Optional content to be displayed next to title. `href` is required when using this attribute.
43
- `href` | String | No | No | URL. Title content and optional CTA content will link to this. Populating `cta-text` is optional.
40
+ | Name | Type | Stateful | Required | Description |
41
+ | --------- | ----- | -------- | -------- | ----------- |
42
+ | `ctaText` | string | No | No | URL text. Optional content to be displayed next to title. `href` is required when using this attribute. |
43
+ | `href` | string | No | No | URL. Title content and optional CTA content will link to this. Populating `cta-text` is optional. |
44
44
 
45
45
  ## Nested Components
46
- Name | Required | Description
47
- `title` | No | The main title content to be displayed. Title tag is required when using other sub-tags.
48
- `subtitle` | No | The subtitle content to be displayed
49
- `info` | No | Placeholder for `<EbayInfotip>` component
50
- `overflow` | No | Placeholder for `<EbayMenuButton>` component
46
+ | Name | Required | Description |
47
+ | ---------- | -------- | ----------- |
48
+ | `title` | No | The main title content to be displayed. Title tag is required when using other sub-tags. |
49
+ | `subtitle` | No | The subtitle content to be displayed |
50
+ | `info` | No | Placeholder for `<EbayInfotip>` component |
51
+ | `overflow` | No | Placeholder for `<EbayMenuButton>` component |
51
52
 
52
53
  ### Examples
53
54
 
@@ -2,7 +2,7 @@
2
2
  This component is used to create a native `<select>` form element with default browser styling.
3
3
 
4
4
  ## Demo
5
- [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-select--default)
5
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/form-input-ebay-select--basic)
6
6
 
7
7
  ## Import JS
8
8
  ```jsx harmony
@@ -59,7 +59,10 @@ https://reactjs.org/docs/forms.html#the-select-tag. Notice that the selected val
59
59
  | `invalid` | Boolean | No | Indicates a field-level error with red border if true |
60
60
 
61
61
  ## Callbacks
62
- | `onChange` | Function | No | Called on option change with arguments: `(ChangeEvent, { index: number, selected: string[] }` |
62
+
63
+ | Name | Type | Required | Description |
64
+ | --------------- | -------- | -------- | --------------------------------------------------------------------------------------------- |
65
+ | `onChange` | Function | No | Called on option change with arguments: `(ChangeEvent, { index: number, selected: string[] }` |
63
66
 
64
67
  ## EbaySelectOption Attributes
65
68
 
@@ -1,10 +1,10 @@
1
- # ebay-signal
1
+ # EbaySignal
2
2
 
3
3
  ##Description
4
4
  Signals are data-backed recommendations to help customers make more informed decisions. There are four signal statuses, each corresponding to a specific color: `trustworthy`, `recent`, `time-sensitive` & `neutral`. Defaults to `neutral` if none specified.
5
5
 
6
6
  ## Demo
7
- [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-signal)
7
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/graphics-icons-ebay-signal--default-case)
8
8
 
9
9
  ## Usage
10
10
  ```
@@ -6,6 +6,9 @@ The user usually will want to manage the state of the snackbar, and so should pr
6
6
 
7
7
  In the case where the application developer only wants to manage the initial state of the snackbar, the dev can choose to provide only the open state as a boolean. This is useful when a dev wants the snackbar to appear only once on initial render and then disappear.
8
8
 
9
+ ## Demo
10
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/dialogs-ebay-snackbar-dialog--default)
11
+
9
12
  ## Import JS
10
13
  ```jsx harmony
11
14
  import { EbaySnackbarDialog, EbaySnackbarDialogAction } from '@ebay/ui-core-react/ebay-snackbar-dialog';
@@ -1,7 +1,7 @@
1
1
  # EbaySplitButton
2
2
 
3
3
  ## Demo
4
- [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-split-button--default)
4
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/buttons-ebay-split-button--controls)
5
5
 
6
6
  ## Usage
7
7
 
@@ -1,7 +1,8 @@
1
- # ebay-star-rating
1
+ # EbayStarRating
2
2
  For full stars use (rating from 0-5): ebay-star-rating-{rating} For half stars use: ebay-star-rating-{rating}-5 DS v1.0.0
3
+
3
4
  ## Demo
4
- [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-star-rating--dynamic-stars)
5
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/graphics-icons-ebay-star-rating--stars)
5
6
 
6
7
  ## Usage
7
8
  ```
@@ -1,7 +1,8 @@
1
- # ebay-star-rating-select
1
+ # EbayStarRatingSelect
2
2
  use (rating from 0-5)
3
+
3
4
  ## Demo
4
- [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/ebay-star-rating-select--isolated)
5
+ [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/form-input-ebay-star-rating-select--isolated)
5
6
 
6
7
  ## Usage
7
8
  ```
@@ -1,4 +1,4 @@
1
- # ebay-svg
1
+ # EbaySvg
2
2
  This is a helper component which holds all the SVG icons for your other `@ebay/ui-core-react` components.
3
3
 
4
4
  ## Install
@@ -1 +1 @@
1
- {"version":3,"file":"svg.d.ts","sourceRoot":"","sources":["../../src/ebay-svg/svg.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,QAAA,MAAM,OAAO,EAAE,EAmsBJ,CAAA;AAEX,eAAe,OAAO,CAAA"}
1
+ {"version":3,"file":"svg.d.ts","sourceRoot":"","sources":["../../src/ebay-svg/svg.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC,QAAA,MAAM,OAAO,EAAE,EA2tBJ,CAAA;AAEX,eAAe,OAAO,CAAA"}