Once the hamburger left-nav panel opens, the background container stays open even when the browser window is expanded to a larger breakpoint.

https://react.carbondesignsystem.com/?path=/story/components-paginationnav--pagination-nav

Does anyone know what ${prefix}--container-highlight-class is doing? I didn't see a reference for it in the SCSS.

Originally posted by @photodow in #132

This repo is no longer being used and can be archived.
https://github.com/IBM/carbon-addons-dotcom

When the Search is open the close-icon looks smaller / not aligned to the search-icon and profile-icon.

For optical alignment, the close-icon needs to be 20px while the search-icon and profile-icon should be larger at 24px each.

The eyebrow has the browser default focus state and should be changed to match the focus state of other links.

Assuming this piece is using a dark theme so it should use the $focus color token.

Detailed description

Describe in detail the issue you're having.

The DotcomShell component is not being exported.

Is this a feature request (new component, new icon), a bug, or a general
issue?

Bug

Is this issue related to a specific component?

DotcomShell

What did you expect to happen? What happened instead? What would you like to
see changed?

Have access to the DotcomShell component. No access to the DotcomShell component. I want to use the DotcomShell component.

What browser are you working in?

Chrome/Safari

What version of the IBM.com Library are you using?
0.5.1

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
none

When a dropdown menu is open, I can't use the keyboard to select any of the dropdown options. Not sure if this is a bug on our side or a bug in Carbon

In the Carbon dropdown examples, I can press the down arrow to go through the menu items
In Carbon's UI shell example, I can tab into the dropdown menu

But in our masthead, when I hit the down arrow it scrolls down the page instead of through the menu items.
Screen recording attached
dropdown-keyboard.zip

I think this could be an accessibility problem?
cc @ljcarot @jeffchew

Both L0 and L1 divider lines within the dropdowns are visible upon hover, however in Carbon react storybook the divider lines are not visible upon hover. Is it possible to achieve this same effect as Carbon?

L0

L1

Carbon

This is a nice to have but not critical: the padding-bottom between L1 menu items and the bottom of the L1 bar should be 12px. This allows for the same spacing from the bottom in both L1 and L0, despite the different heights of the L's.

See here:

The focus state is appearing below the bottom rule on all the L0 links, causing the focus state to look uneven with only 1px of blue at the bottom.

Can the focus appear above the rule?

Detailed description

Describe in detail the issue you're having.

When importing a component from the React package, getting a build error that axios is missing

Is this a feature request (new component, new icon), a bug, or a general
issue?

Bug

Is this issue related to a specific component?

HorizontalRule, but believe this is for all components

What did you expect to happen? What happened instead? What would you like to
see changed?

No build errors

What browser are you working in?

Chrome

What version of the IBM.com Library are you using?

v0.5.1

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

N/A

Steps to reproduce the issue

1. Go to codesandbox.com and create a project with @carbon/ibmdotcom-react
2. Import a component
3. See screenshot:

When turning the platform knob on, the divider rule should display to the left (between the IBM 8-bar and the platform name). Currently, it's pushing to the right and running up against the platform name.

On Storybook:

But should look like:

There is currently no hover or focus state for the search and close icon when the search bar is active and open. They should look like this:

I know there are problems with this dropdown because of Carbon overflow but if possible...

• The profile dropdown is approx 4px too high. It should be flush to the bottom of the profile border/48px container. Flush to the top of L1.
• The height of the dropdown row item is currently 40px but should be 48px (same as L0 and L1 main nav dropdowns).
• Can't see the full border of profile-icon when focused.

Same as #113

Please add hover and focus like other L0 menu items:

Timeline

• December 9th, 2019: Code freeze
• December 9th - 13th, 2019: Release Candidate(s) and testing
• December 16th, 2019: Full Release

Features

React

• Locale Selector (#252): Call to action from the footer, which will show a modal where the user can select the locale/language translation for the given page. It will also set the user's preference.
• Updated feature flag names to include prefix (#700)

Vanilla

• Footer (#356): New look with two different configurable types (full, slim)

Patterns (React)

• Simple Long Form (#466): Simple Long Form pattern*
• List Section (#449): List section pattern*
• Table of Contents (#445): Table of Contents pattern*
• Lead Space, centered (#437): Lead Space pattern, centered version*
• Next Steps (cards w/o images) (#472): Next Steps pattern*
• Use Cases (#469): Use Cases pattern*
• Updated feature flag names to include prefix (#700)
• Add data-autoid attributes to optional fields for Patterns (#637)
• LeadSpace (#732): Update styles to apply color theme as a container modifier

* NOTE: Behind a feature flag

Utilities

• Available Language utility (#509): Utility for providing the available language translation on the current page

Bugs

• Footer suddenly is in white background (#718)
• IBM logo in Masthead is not aligned with content in big screens (#719)
• Separate global imports into different package (#527)

In URX we don't need any menu on the header, also the profile icon is not required, In Northstar header, there was an option masthead:'popup' this feature will help us to match the same behavior.

Make the masthead configurable, hide links, profile bypassing props to the component.

A duplicate of this issue has been created in the Digital Design board. Make the masthead configurable, hide links, profile bypassing props to the component

The focus state of the first item in the L0 dropdowns is only showing 1px of the 2px border on the top side . Is it possible to fix this? I looks like the rule at the bottom of the L0 is on top of the focus state.

Detailed description

Describe in detail the issue you're having.

When adding the DotcomShell in a vanilla create-react-app, getting the following error:

File to import not found or unreadable: @carbon/layout/scss/breakpoint. in /Users/[email protected]/Desktop/library-test/library-test/node_modules/carbon-components/scss/globals/scss/vendor/@carbon/grid/scss/_mixins.scss (line 12, column 1)

Is this a feature request (new component, new icon), a bug, or a general
issue?

bug

Is this issue related to a specific component?

DotcomShell

What did you expect to happen? What happened instead? What would you like to
see changed?

The page loads.

What version of the IBM.com Library are you using?

v1.0.0-rc.0

Steps to reproduce the issue

1. Create a new create-react-app application
2. Follow the steps to add the DotcomShell to the page
3. See error

User Story

As a :

Web simplification designer

I need:

a variation of the link component

so that I can:

finalize my designs.

Additional information

The web simplification team has created a design that utilizes a link and icon. This is a very common instance on current IBM.com and we need to develop a variation of the link component so it can be standardized.

The web simplification team will be coming back with logic around which icons can be paired in the link + icon variant within their pattern. This logic / guideance may or may not apply to the component within the ibm.com library

Specs

Note
This is a variation of the primary link component and we should not provide a link + icon variant of inline links.

Acceptance criteria

• component variation follows Carbon color tokens defined in primary link
• component passes accessibility standards on all color themes
• testing is done to determine what happens if a link+icon wraps to 2 lines

Detailed description

Describe in detail the issue you're having.

The DDO API was not properly setting the version in the digitalData object. Discovered the issue was that the datalayer_ready event was not getting properly captured in the isReady method.

Is this a feature request (new component, new icon), a bug, or a general
issue?

Bug

Is this issue related to a specific component?

the digitalData object version

What version of the IBM.com Library are you using?

v1.0.0-rc.0

Steps to reproduce the issue

1. Go to https://ibmdotcom-react.netlify.com/iframe.html?id=dotcom-shell--default
2. Open console and check the digitalData object
3. See that digitalData.page.version is undefined

• Focus management
• carbon-design-system/carbon-web-components#981
• Support for change in direction after instantiation, while the menu is open

The Profile / My IBM dropdown menu is hidden behind L1 when it's open

Eyebrow

Currently, the eyebrow is too close to the L1 title. It should be 16px from the top of the L1.

Like so:

Ref: https://ibmdotcom-react.netlify.com/?path=/story/masthead--default

User Story

As a [user role below]:
ibm.com user with visual impairments

I need to:
effectively navigate through ibm.com's header and footer

so that I can:
find my way through ibm.com

Additional information

• Use tools like Chromevox for testing keyboard navigation and voice announcements
• Any automated accessibility tests
• Should report any issues as separate issues in Github

Acceptance criteria

• Masthead and footer passes WCAG AA compliance

Currently, the SVG logo is showing banding issue on some monitors. It depends on the monitor's DPI, but here is a screen capture:

• This is not critical for 1.0.0, but should be fixed before the new masthead hits the glass.

Couple of styling updates to be implemented, please:

• All font-size should be 16px / 1rem
• Change font-weight to 400
• Spacing needs adjustment. Not sure what's best but in this edit below, I removed line-height and increased height to 3rem.
• Need to add divider lines between each item. See design spec at bottom.
• Need to change chevron-down to chevron-right. See design spec at bottom.

Suggested changes:

Actual:

When focusing on a dropdown sub-link, the blue border does not expand full width of the dropdown container. @kennylam I'm guessing this is the issue we talked about re: the divider lines indenting by 16px either side?

Also, 1px of the blue border is hidden underneath the gray divider – can it appear above, instead?

When hovering on an L0 menu item, the L0 border-bottom appears above the hover of the menu item:

But when hovering on the icons the hover state, the L0 border-bottom appears underneath the hover of the icon container. Can this be changed?

Detailed description

Cannot pull in HorizontalRule when importing from root of the package

Steps to reproduce the issue

1. In a React application, install @carbon/ibmdotcom-react
2. Import the HorizontalRule:

import { HorizontalRule } from '@carbon/ibmdotcom-react';

3. See import error

Overview

This is the initial public release of the IBM.com Library, which is a Carbon-based library for use on all of IBM.com. Its intentions are to provide a consistency of IBM.com specific components and patterns that adheres to the IBM Design Language, and is a complimentary solution to the Carbon Design System.

This release includes the primary foundation of the library itself, as well as an initial set of features described below. Starting this release, the IBM.com Library will follow a monthly release cycle.

Timeline

• September 27th, 2019: Code freeze
• September 30th - October 4th, 2019: Release Candidate(s) and testing
• October 7th, 2019: Full Release

Foundation

The primary foundation of the library will include several packages:

• @carbon/ibmdotcom-react: IBM.com React components
• @carbon/ibmdotcom-patterns-react: IBM.com React patterns
• @carbon/ibmdotcom-services: IBM.com ES6 Service classes
• @carbon/ibmdotcom-styles: Framework agnostic styles package for IBM.com components
• @carbon/ibmdotcom-utilities: IBM.com ES6 Utility classes

Each package (minus the styles package) includes their own living documentation output:

• React
• Patterns React
• Services
• Utilities

Features

React

• Masthead: The Masthead includes a refreshed look and feel, L0/L1 navigation, Search with Typeahead, and Profile
• Footer: The Footer has an updated look, with two different configurable types
• DotcomShell: The Dotcom Shell is an overall UI shell structure that includes the Masthead and Footer. This is a good starting point for building out an IBM.com page.
• HorizontalRule: A configurable <hr /> element
• Analytics:
  • Scroll tracking

Patterns React

• LeadSpace (experimental): LeadSpace pattern with optional CTAs

Services

• Translation API: Fetches translation data for the Masthead and Footer. Currently supporting US English only.
• SearchTypeahead API: Typeahead search, used in the Masthead
• Profile API: Profile API that fetches the user's authentication status
• DDO API: API that fetches various data from the Digital Data Object

Utilities

• Various helper utilities

Experimental Features

To encourage ongoing development of features, the IBM.com Library embraces the creation of experimental features through feature flags. These are all configured through environment variables, so that they can be easily switched on or off. Additional environments have been stood up that have all feature flags turned on:

• React
• Patterns React

Hover states for L1 Links look too dark. Can we please change them to be gray-10 hover or hover-ui if using Carbon gray 10 theme.

Current:

Actual:

Ref: https://ibmdotcom-react.netlify.com/?path=/story/masthead--default

When hovering/rolling over the dropdown menu in both L0 and L1 there is a slight delay in state change from top to bottom. It's taking too long for the hover state to deactivate when the mouse rolls over another menu item. It's as if it's sticking.

I don't know if it's a bug or styling issue? Either way, it should behave more like Carbon's UI header.

Screen recordings in here for test:
masthead-dropdown-rollover.zip

This is related to issue #112

REF: https://ibmdotcom-react.netlify.com/?path=/story/masthead--default-with-l1

It looks like L0 menu items, dropdown, and platform title hover[on click] states are all set to gray-10 #F3F3F3 but they should be hover-ui #E5E5E5.

When the L1 becomes sticky on scroll (and the L0 disappears), the L1 should shrink to 48px height. Like so:

When the eyebrow is active then leave the L1 at 80px, fixed to the top, just like it is right now.

Timeline

• October 25th, 2019: Code freeze
• October 28th - November 1st, 2019: Release Candidate(s) and testing
• November 4th, 2019: Full Release

Features

React

• Masthead/Footer (#421): Integration of the TranslationAPI into the Masthead/Footer
• Left panel container (#257): Left panel container in anticipation of use of left nav on pages
• Expressive Modal (#253): Variant of the Carbon Modal with an expressive theme
• Link with Icon (#163): Variant of the Link component with icon
• Clickable Tile (alpha) (#504): Clickable tile component
• Button Group (alpha): Group of Carbon buttons
• Masthead Updates:
  • Additional properties to show/hide the profile and search icons (#101)
  • Open the search box by default via prop (#593)
• Analytics:
  • Modal (#391)
  • Dynamic Tabs (#392):

Patterns

• Lead Space, Default (#517): Lead space, left-aligned version

Vanilla

• Package Architecture (#224): Initial Vanilla package architecture to support IBM.com Library Vanilla components
• Horizontal Rule (#553): A configurable <hr /> element

Services

• TranslationAPI (#515): Expand translation API to fetch data to display additional languages worldwide

Utilities

• ipcinfoCookie (#513): Utility for getting and setting the ipcinfo cookie
• geolocation (#514): Utility for fetching the geo location of the user

Hey @kennylam every text style except for the eyebrow in L1 should be set to 16px / 1rem. Right now, everything in L0 is at 14px (I'm guessing because it's pulling from Carbon). The L1 chip with eyebrow and title have the correct styling but the rest of the link items need to be 16px.

@kennylam sorry but I left this out of the spec file!

IBM 8-bar should have hover and focus states just like the rest of the menu items in L0:

The box-shadow on all dropdown menus for L0 and L1 has too much spread and is slightly too dark. Can we change to these values, please?

The sub-links inside the dropdowns are sitting a few pixels too high in the L1 dropdowns. The sub-link should be vertically centered within each option.

Detailed description

@kennylam this is a test issue

Describe in detail the issue you're having.

Is this a feature request (new component, new icon), a bug, or a general
issue?

Is this issue related to a specific component?

What did you expect to happen? What happened instead? What would you like to
see changed?

What browser are you working in?

What version of the IBM.com Library are you using?

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Additional information

• Screenshots or code
• Notes

User story

As a maker of ibm.com experiences in Arabic, I need a RTL version of the Masthead/Footer, so that I can build out a page/pages for my users who read Arabic.

Notes

• This should take mobile behavior in to account.
• This work should begin in 1Q2020
• Goal to complete the work is end of June 2020
• This is good reference https://www.w3.org/International/articles/inline-bidi-markup/
• Enabling RTL in React
• Enabling RTL in Web Components

Acceptance criteria

• Functional spec and design approved
• Code approved
• Sprint demoed
• OM accepted
• Guideline published
• Content published

When the masthead has no platform/page title can the search input text read: Search all of IBM (instead of just Search).

It looks like the blue underline in L1 dark chip is blue-60. If it is, can we please change to blue-50 or interactive-04 if using the Carbon gray 100 or 90 theme.

Current L1:

Actual:

👇👇👇👇👇👇
Note: the blue underline should be blue-60 for all other L1 links in the gray-10 zone.

Ref: https://ibmdotcom-react.netlify.com/?path=/story/masthead--default

Detailed description

Describe in detail the issue you're having.

Vendor css imports fail outside storybook usage. Must include ~ in css vendor import paths to fix, e.g. '~@carbon/ibmdotcom-styles...'

Is this a feature request (new component, new icon), a bug, or a general
issue?

General issue

What browser are you working in?

All

What version of the IBM.com Library are you using?

0.5.0

It's just a tiny bit off, but is it possible to better align the search and profile icon? Looks like the search icon should push down 1 or 2px:

Ref: https://ibmdotcom-react.netlify.com/?path=/story/masthead--default

When a user clicks one level down into the hamburger menu a < Back eyebrow should appear to allow them to navigate back to the "parent" menu.

Currently, there is no way for me to go back to the first level:

Actual view should be:

Is it possible to close one dropdown menu when another L0 dropdown is selected? Right now, this is what happens if I don't manually close:

During the most recent user test of the masthead, some people found it difficult to see the eyebrow in L1. Ben recommended that we increase the size from 12px [.75rem] to 14px [0.875rem]. Can we make that change, please and thanks!

REF: https://ibmdotcom-react.netlify.com/iframe.html?id=masthead--default-with-l1#