[Tabs extended vertical] Web Component: update focus state - DPO Consulting

Engineering info:

• Innovation Team engineer: @andy-blum
• Innovation Team JIRA Ticket: https://jsw.ibm.com/browse/HC-2396
• DPO consulting engineer: @emyarod

---

User Story

As a [user role below]: Carbon for ibm.com developer

I need to: create/change the Tabs extended vertical

so that I can: provide the ibm.com adopter developers components they can use to build ibm.com web pages

Specific update needed

When Tooltip is visible (on hover & on focus), the tooltip’s little triangle should be on the top, and aligned left.

Additional information

• Story within Storybook with corresponding knobs
• Utilize Carbon
• Create with Shadow DOM and Custom Elements standards
• See the Epic (#7372 ) for the Design and Functional specs information
• No E2E testing update is needed.
• Web Components Visual QA testing issue (#7485)
• Web Components Prod QA testing issue (#7486)

Acceptance criteria

• Include README for the web component and corresponding styles
• Create Web Components styles in styles package
• Do not create knobs in Storybook that include JSON objects
• Break out Storybook stories into multiple variation stories, if applicable
• Create codesandbox example under /packages/web-components/examples/codesandbox and include in README
• Minimum 80% unit test coverage
• Update the Carbon for ibm.com website component data file to be sure the web site Component Status and Storybook links are correct
• Use the Visual QA checklist to verify design quality
• Update the e2e test scripts, if needed.
• Confirm e2e test results have no major errors.
• If a design is provided, the Designer is included as a Reviewer in the Pull Request
• Provide a direct link to the deploy preview for the designer in the Pull Request description
• A comment is posted in the Prod QA issue, tagging Praveen when development is finished

[oliviaflory]

@andy-blum cc: @jeffchew

The only thing that this issue would change is the placement of the caret in relation to the parent item. Is that something we actually want to change away from carbon core?

No, we don’t want to change away from how the Carbon tooltip is done. I think in an earlier version of the Carbon tool tips the caret was more like the “expected” example above, but it seems like design didn’t catch the update to always be center aligned to the parent.

If this is already implemented there is no further action needed and we can close out this issue.

[proeung]

@oliviaflory Thanks for getting back to us! Feels like there’s no action that’s needed for this particular issue. I’ll go ahead and close this out for now. Feel free to re-open if there is more action needed. cc: @ljcarot @jeffchew