carbon-design-system / carbon-for-ibm-dotcom Goto Github PK
View Code? Open in Web Editor NEWCarbon for IBM.com is based on the Carbon Design System for IBM
Home Page: https://www.ibm.com/standards/carbon/
License: Apache License 2.0
Carbon for IBM.com is based on the Carbon Design System for IBM
Home Page: https://www.ibm.com/standards/carbon/
License: Apache License 2.0
Modal
with an expressive themeLink
component with icon<hr />
elementIt'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
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#
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
@carbon/ibmdotcom-react
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.
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.
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
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
As a :
Web simplification designer
I need:
a variation of the link component
so that I can:
finalize my designs.
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
Note
This is a variation of the primary link
component and we should not provide a link + icon
variant of inline links
.
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
digitalData
objectdigitalData.page.version
is undefinedWhen 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?
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.
ππππππ
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
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
create-react-app
applicationCannot pull in HorizontalRule when importing from root of the package
@carbon/ibmdotcom-react
import { HorizontalRule } from '@carbon/ibmdotcom-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.
Ref: https://ibmdotcom-react.netlify.com/?path=/story/masthead--default
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 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
* NOTE: Behind a feature flag
Same as #113
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
@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?
Currently, the eyebrow is too close to the L1 title. It should be 16px
from the top of the L1.
Ref: https://ibmdotcom-react.netlify.com/?path=/story/masthead--default
This repo is no longer being used and can be archived.
https://github.com/IBM/carbon-addons-dotcom
Couple of styling updates to be implemented, please:
font-weight
to 400line-height
and increased height
to 3rem.chevron-down
to chevron-right
. See design spec at bottom.@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:
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
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
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.
The primary foundation of the library will include several packages:
Each package (minus the styles package) includes their own living documentation output:
<hr />
elementTo 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:
I know there are problems with this dropdown because of Carbon overflow but if possible...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.