carbon-design-system
Feature: Notification panel
https://www.carbondesignsystem.com/patterns/notification-pattern/#notification-panel
Definitely, thank you for jumping in @xxxle0! Great if you can read the coding convention doc beforehand. Also there are some coding conventions I haven't been able to document yet, so if you can read some of the existing code and take cues from there it'll be great. Please don't hesitate to ask any time if you have any questions!
hi @asudoh, i read the codebase and this repo will inherit css from carbon package component. Just convert the presentational component to Web component. Is it right ?
Thanks you for asking @xxxle0 - Let's take <bx-dropdown-item> as an example. It has static styles property that dictates the style set to shadow DOM, coming from dropdown.scss from the same directory. The dropdown.scss file imports several styles from Carbon as you may have alluded to, but it also has styles for :host(#{$prefix}-dropdown-item) selector. This is because <bx-dropdown-item> is an actual DOM element unlike React component node (e.g. carbon-components-react's <ListBoxMenuItem>) which is not a DOM element. That means the style of <bx-dropdown-item> has to be mapped to the top-level element <ListBoxItem> renders, which is, <div className="bx--list-box__menu-item">. Fortunately many cases for <bx-dropdown-item> it's as simple as using Sass @extend along with fixing display where we want block but browser's default style for unknown element is inline. But as you see in some style rules there (e.g. one for disabled dropdown item) we may need more manual styling depending on how the corresponding Carbon style is defined.
Other than that, it's mostly about having lit-element define properties, render the contents, and handling events. Don't hesitate to ask any other questions. Thanks!
I have definitely seen a request for this or something similar to this before from someone attending Design Office Hours.
However I'm unclear if this is a feature or a Pattern that Carbon is showing as an example.
