feat(masthead): introduce web components #2960

asudoh · 2020-06-30T11:39:29Z

Related Ticket(s)

Refs #2861.

Description

This change introduces Web Components version of masthead (L0).

This change also introduces:

lit-html version of the icons defined in @carbon/ibmdotcom-styles. To do this, needed to hoist carbon-components/carbon-custom-elements dependencies given lit-html version of the icons that is create on-the-fly in development time isn't tied to packages/web-components
Several mix-ins for masthead style rules. This required given they are under deeply nested selectors that are hard to define custom elements selectors alongside
lint-staged support for TypeScript files

Changelog

New

Web Components version of masthead (L0)
lit-html version of the icons defined in @carbon/ibmdotcom-styles
lint-staged support for TypeScript files

Changed

Moved several style rules of masthead to mix-ins

This change introduces Web Components version of masthead (L0). This change also introduces: * `lit-html` version of the icons defined in `@carbon/ibmdotcom-styles`. To do this, needed to hoist `carbon-components`/`carbon-custom-elements` dependencies given `lit-html` version of the icons that is create on-the-fly in development time isn't tied to `packages/web-components` * Several mix-ins for masthead style rules. This required given they are under deeply nested selectors that are hard to define custom elements selectors alongside * `lit-staged` support for TypeScript files Refs carbon-design-system#2861.

jeffchew · 2020-06-30T12:50:55Z

@asudoh I was running into a similar problem on another branch, do you know what's causing this?

asudoh · 2020-06-30T13:03:27Z

@jeffchew Do you have the CircleCI log link? My finding is that it's likely specific to this PR (introduction of latest fetch-mock).

ibmdotcom-bot · 2020-06-30T13:54:22Z

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/2960/index.html

Built with commit: f84ee992bbd4695676b3607b25a04d5b9dd2e6df

jeffchew · 2020-06-30T13:57:04Z

@jeffchew Do you have the CircleCI log link? My finding is that it's likely specific to this PR (introduction of latest fetch-mock).

This is the PR that's having issues. I actually can replicate locally as well, but haven't had a chance to isolate the issue.

#2667

asudoh · 2020-06-30T14:03:08Z

Thanks @jeffchew! Let's discuss further there.

jeffchew · 2020-06-30T15:52:21Z

Looks great @asudoh!

Are there knobs that we can set for the story, like platform name, etc? It might also be worth creating as separate stories too and treat as a variation.

The masthead content below looks a little odd when you scroll down:

jeffchew · 2020-06-30T15:59:38Z

@asudoh noticed a couple of things with the masthead search. It is supposed to overlay the entire header when opened, but is showing as this:

Also, when using the search typeahead, it seems to take over the whole storybook screen and can't find a way back:

asudoh · 2020-07-01T10:20:09Z

Thanks @jeffchew for reviewing! Added knobs for brand name and authentication state, and fixed the issues.

jeffchew · 2020-07-01T19:40:53Z

Thanks @asudoh ! Looks much better! I am still seeing the black banding when scrolling down though on the page, not sure if that's a storybook thing or the masthead causing it?

Also, I don't see the data-autoid attributes in the rendered markup.

asudoh · 2020-07-02T01:16:33Z

Thanks @jeffchew!

I am still seeing the black banding when scrolling down though on the page, not sure if that's a storybook thing or the masthead causing it?

One question here; How did you make the Storybook itself black? I think reproducing the problem requiring to do so. given what I'm seeing is:

…sthead

asudoh · 2020-07-02T16:15:38Z

Fixed the issue in operating system's dark mode (I guess newer Storybook supports @media (prefers-color-scheme: dark)). Thank you @kennylam and everyone for your help!

asudoh · 2020-07-03T03:27:10Z

As discussed, added documentation for analytics on how tag names and custom events can be used in Web Components to play the role of data-autoid: https://github.com/carbon-design-system/ibm-dotcom-library/blob/26c948c30cb67c1cea9e8c8c56fb02045058787b/packages/web-components/README.md#web-components-way-for-analytics

Also added missing dds-masthead-search-toggled custom event.

jeffchew · 2020-07-06T13:24:05Z

As discussed, added documentation for analytics on how tag names and custom events can be used in Web Components to play the role of data-autoid: https://github.com/carbon-design-system/ibm-dotcom-library/blob/26c948c30cb67c1cea9e8c8c56fb02045058787b/packages/web-components/README.md#web-components-way-for-analytics

Also added missing dds-masthead-search-toggled custom event.

Thank you @asudoh ! FYI, I have a separate issue for updating the README to be more adopter focused (#2916), so we an address some of these thoughts there:

Once we have the dds-dotcomshell, we should probably swap out the dds-link-with-icon with that.
I wonder if we should have a separate developer docs and link out the contents at the end to there?
I'm wondering if we should have a quick explanation of what lit-html is and why we're using it, and secondary to that why it's a peer dependency vs regular dependency.
Browser support: The url for building ibm.com experiences has the following browser support language (https://www.ibm.com/standards/web/browser-support), but it is also good to mention that IE isn't supported here.

jeffchew · 2020-07-06T13:29:13Z

packages/web-components/README.md

+
+## Web Components way for analytics
+
+`@carbon/ibmdotcom-react`, etc. libraries have `data-autoid` attributes in several places, to convey better context than raw HTML `<div>`, etc. tags and their attributes when analytics libraries captures bubbling events e.g. `click` on `<body>` and inspects `event.target`.


At minimum, should we add the data-autoid for the parent level tags? e.g. data-autoid="dds--masthead"?

We could do <dds-masthead data-autoid="dds--masthead">. That said, <dds-masthead> tag name seems to serve the purpose of data-autoid, but did you meant that we'd want to duplicate it...?

I'm wondering if for analytics they are tracking anything across different applications within IBM.com, and if they need to have that consistent stable selector language when going from one part of the site to another? So one IBM.com application is using React, another application is using web components, and another one is using vanilla. I might be overthinking it though.

Yeah the thought overall makes sense. Given data-autoid inside shadow DOM doesn't make event.target.dataset.audoId work due to event retargeting as discussed, I thought that providing a new set of guidelines makes more sense instead of providing data-autoid that makes it looks like "compatible" but not actually fully.

But if we want to go with "partial compatibility" route I'm all for it.

asudoh · 2020-07-06T13:53:45Z

Thank you for another review @jeffchew! Good points:

Once we have the dds-dotcomshell, we should probably swap out the dds-link-with-icon with that.

Makes sense.

I wonder if we should have a separate developer docs and link out the contents at the end to there?

I'm wondering if we should have a quick explanation of what lit-html is and why we're using it, and secondary to that why it's a peer dependency vs regular dependency.

Browser support: The url for building ibm.com experiences has the following browser support language (https://www.ibm.com/standards/web/browser-support), but it is also good to mention that IE isn't supported here.

All makes sense - Updated.

jeffchew

Approving this, we can probably get in the stable selectors in a separate PR or maybe sneak this in before merging in. Thank you @asudoh !

asudoh · 2020-07-06T22:18:48Z

Thank you @jeffchew for reviewing! Let's queue up stable selector thing.

asudoh added the package: web components Work necessary for the IBM.com Library web components package label Jun 30, 2020

asudoh force-pushed the web-components-masthead branch from dde7a04 to f82ad7f Compare June 30, 2020 13:00

chore(dependencies): upgrade fetch-mock, core-js

8c9bc06

asudoh force-pushed the web-components-masthead branch from f82ad7f to 8c9bc06 Compare June 30, 2020 13:05

asudoh added 3 commits June 30, 2020 22:10

Merge branch 'master' into web-components-masthead

0940e54

Merge branch 'master' into web-components-masthead

4aa5c3c

chore(masthead): linter fix

5ba44df

asudoh added 2 commits June 30, 2020 23:09

fix(masthead): style fix

8fe869a

fix(masthead): style fix

7d638d2

asudoh force-pushed the web-components-masthead branch 3 times, most recently from 37896ec to b403d00 Compare July 1, 2020 08:37

asudoh added 5 commits July 1, 2020 17:55

fix(masthead): fix search bar and left nav

9a6aaad

chore(masthead): support knobs

cbb026f

feat(masthead): support brand name

eb2def4

chore(devenv): fix dummy content

3073962

chore(masthead): comment fix

4a8bbbb

asudoh force-pushed the web-components-masthead branch from b403d00 to 4a8bbbb Compare July 1, 2020 08:56

asudoh added 3 commits July 1, 2020 19:04

chore(masthead): improve search performance

979910a

chore(test): update snapshot

c2f0067

fix(masthead): misc style fixes

aaa7b04

chore(test): move web components test to GHA

1561052

asudoh force-pushed the web-components-masthead branch from c345ca0 to 1561052 Compare July 1, 2020 14:53

Merge branch 'master' into web-components-masthead

d9709c8

asudoh added 5 commits July 3, 2020 00:03

Merge remote-tracking branch 'upstream/master' into web-components-ma…

349ac80

…sthead

chore(devenv): try forcing Storybook light theme

d31de02

chore: offline mirror fix

466a9c8

Merge branch 'master' into web-components-masthead

25b9893

chore(devenv): fix dark mode in OS

76a1f79

asudoh added 2 commits July 3, 2020 06:34

Merge branch 'master' into web-components-masthead

d0130a5

chore(masthead): guidance for analytics

26c948c

asudoh and others added 5 commits July 3, 2020 12:36

test(masthead): fix tests

fba3a02

Merge branch 'master' into web-components-masthead

b3d792b

Merge branch 'master' into web-components-masthead

718fdd2

Merge branch 'master' into web-components-masthead

f763f66

Merge branch 'master' into web-components-masthead

c5f5f4c

jeffchew reviewed Jul 6, 2020

View reviewed changes

docs(README): update documentation

80b5284

jeffchew added 2 commits July 6, 2020 10:55

Merge branch 'master' into web-components-masthead

f2420f7

Merge branch 'master' into web-components-masthead

f84ee99

jeffchew approved these changes Jul 6, 2020

View reviewed changes

jeffchew added the Ready to merge Label for the pull requests that are ready to merge label Jul 6, 2020

asudoh merged commit 3e3c3c5 into carbon-design-system:master Jul 6, 2020

asudoh deleted the web-components-masthead branch July 6, 2020 22:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(masthead): introduce web components #2960

feat(masthead): introduce web components #2960

asudoh commented Jun 30, 2020

jeffchew commented Jun 30, 2020

asudoh commented Jun 30, 2020

ibmdotcom-bot commented Jun 30, 2020 •

edited

Loading

jeffchew commented Jun 30, 2020

asudoh commented Jun 30, 2020

jeffchew commented Jun 30, 2020

jeffchew commented Jun 30, 2020

asudoh commented Jul 1, 2020

jeffchew commented Jul 1, 2020

asudoh commented Jul 2, 2020

asudoh commented Jul 2, 2020

asudoh commented Jul 3, 2020

jeffchew commented Jul 6, 2020

jeffchew Jul 6, 2020

asudoh Jul 6, 2020

jeffchew Jul 6, 2020 •

edited

Loading

asudoh Jul 6, 2020

asudoh commented Jul 6, 2020

jeffchew left a comment

asudoh commented Jul 6, 2020


		## Web Components way for analytics

		`@carbon/ibmdotcom-react`, etc. libraries have `data-autoid` attributes in several places, to convey better context than raw HTML `<div>`, etc. tags and their attributes when analytics libraries captures bubbling events e.g. `click` on `<body>` and inspects `event.target`.

feat(masthead): introduce web components #2960

feat(masthead): introduce web components #2960

Conversation

asudoh commented Jun 30, 2020

Related Ticket(s)

Description

Changelog

jeffchew commented Jun 30, 2020

asudoh commented Jun 30, 2020

ibmdotcom-bot commented Jun 30, 2020 • edited Loading

jeffchew commented Jun 30, 2020

asudoh commented Jun 30, 2020

jeffchew commented Jun 30, 2020

jeffchew commented Jun 30, 2020

asudoh commented Jul 1, 2020

jeffchew commented Jul 1, 2020

asudoh commented Jul 2, 2020

asudoh commented Jul 2, 2020

asudoh commented Jul 3, 2020

jeffchew commented Jul 6, 2020

jeffchew Jul 6, 2020

Choose a reason for hiding this comment

asudoh Jul 6, 2020

Choose a reason for hiding this comment

jeffchew Jul 6, 2020 • edited Loading

Choose a reason for hiding this comment

asudoh Jul 6, 2020

Choose a reason for hiding this comment

asudoh commented Jul 6, 2020

jeffchew left a comment

Choose a reason for hiding this comment

asudoh commented Jul 6, 2020

ibmdotcom-bot commented Jun 30, 2020 •

edited

Loading

jeffchew Jul 6, 2020 •

edited

Loading