Discussion: v9 refactoring & breaking changes

[ianmcburnie]

Candidates for v9 breaking changes.

NOTE: we would not want to do ALL of these in one release. To make upgrades as painless as possible we should prioritise these.

Definites:

• eBay-button: rename a11yButtonText to a11yLoadingText
• ebay-carousel: refactor status/headings API #1630
• ebay-details, remove p tag as the default, which is creating problems as teams are nesting block level elements inside of it
• carousel, rename a11y-heading-tag to a11y-heading-level

Maybes:

• ebay-menu & ebay-menu-button
  • does not support groups (see: https://makeup.github.io/makeup-js/makeup-menu/index.html)
• Button (comments originally from @darkwebdev in #923)
  • Does it make sense to call a property "priority" if it has a delete value? Answer: probably not. Maybe rename to "variant". We could move to even higher level of encapsulation with ebay-primary-button, ebay-delete-button etc (we already have ebay-expand-button and ebay-cta-button). See: https://spicefactory.co/blog/2019/03/26/how-to-avoid-the-boolean-trap-when-designing-react-components/
  • Do we need a value fake-link for variant property when we can just infer it from the href property? Long term it might be best to split ebay-button out into ebay-fake-button (see above)
• Does page-notice-base still make sense? Not sure inline notice has much in common with page notice and section notice
  • https://github.com/eBay/ebayui-core/pull/1400/files#diff-5140941efa2fb8731469d23631806f4bce10e377aca91833034b18c57aa4938dR18

Other

• ebayui & vite
  • support commonjs & esm
• Marko 5 features? Anything we can take advantage of?
  • Upgrade CoreUI src code to Marko 5 (for our own dev exp)
• Does ebay- prefix still make sense?
  • We want to make coreui the North Star for Marko components
  • Ties in with our headless ui / unbranded vision
  • Maybe ‘core-’ instead? Or 'marko-ui'? Can we think of a cool name?
• Need a consistent I18N strategy
• Remove hardcoded English defaults
• Perhaps make all strings required at compile time?
• Align with standard L10N bundle support (.properties file)
• rename "fake" things for better findability?
  • ebay-fake-menu => ebay-menu-fake
  • ebay-fake-tabs => ebay-tabs-fake
  • ebay-fake-menu-button => ebay-menu-button-fake

[PrashantAshok]

@ianmcburnie - couple of things:-

1. Perhaps make all strings required at compile time? - Yes please, or at-least make a11y-* attributes required?
2. Is there a possibility to think about https://popper.js.org/ in v9?

[ianmcburnie]

@PrashantAshok Great suggestions! We are having a brainstorming/planning session soon. I will make sure both of those are on the table.

I think 2 has been on the backlog long enough and I'm really hoping we can take it on at last!

[PrashantAshok]

One more - can we start thinking about "molecule" components, like "date-picker", "rich-text-editor"? Can be created from scratch or maybe include [internal] components.

[agliga]

ebay-menu-button: Make default variant to be button and not form.

[agliga]

We might want to change originalEvent to be the first argument and have additional arguments as second argument. That way it's more in line with HTML (instead of passing an object, which I think was due to limitations in marko 3)

Like:

<ebay-button on-click((originalEvent) => console.log(originalEvent))/>
<ebay-textbox on-input-change((originalEvent, value) => console.log(originalEvent, value))/>

[PrashantAshok]

Can we please look into adding in support for overlapping dialogs - lightbox over lightbox or lightbox over fullscreen dialog, etc.?

[ianmcburnie]

@PrashantAshok That would go against best practices, which the design system has now codified in their new "Levels of interaction framework" - I encourage you to take a look at that for how we can and should avoid visually overlapping modals.

[agliga]

Closing issue, will create a new one with v10

[agliga]

Done:

eBay-button: rename a11yButtonText to a11yLoadingText ebay-carousel: refactor status/headings API https://github.com/eBay/ebayui-core/issues/1630 ebay-details, remove p tag as the default, which is creating problems as teams are nesting block level elements inside of it carousel, rename a11y-heading-tag to a11y-heading-level ebay-menu-button: Make default variant to be button and not form.