Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(pictogram-item): add select pictogram knob #7661

Merged
merged 2 commits into from
Nov 19, 2021
Merged

docs(pictogram-item): add select pictogram knob #7661

merged 2 commits into from
Nov 19, 2021

Conversation

emyarod
Copy link
Member

@emyarod emyarod commented Nov 15, 2021 •
edited
Loading

Related Ticket(s)

unblocks #7433

Description

This PR adds a pictogram selector knob to the web components storybook to match the React storybook.

The SVGs are currently hard coded as a temporary stop gap to unblock #7433 tests, but we should probably import the pictograms directly from the upstream Carbon package. We have a couple of options on how to do this (this can be an engineering huddle discussion):

  • add @carbon/pictograms as a dependency, add svg-inline-loader for webpack, and import the SVGs directly inline

or

  • enhance svgResultCarbonIcon in carbon-web-components so that we can import pictogram helpers similar to the icon helpers we currently use (leaning towards this so that we can use them in other components in the library)

Either of these can be implemented in the future to avoid hard coding pictograms

Changelog

New

  • pictogram selector in Pictogram Item web component storybook

@emyarod emyarod added package: web components Work necessary for the IBM.com Library web components package storybook labels Nov 15, 2021
@emyarod emyarod requested a review from a team as a code owner November 15, 2021 19:21
@emyarod emyarod self-assigned this Nov 15, 2021
@emyarod emyarod mentioned this pull request Nov 15, 2021
Merged
@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Nov 15, 2021 •
edited
Loading

Deploy preview created for package Web Components HTML Test Application:
https://ibmdotcom-web-components-html-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/7661/index.html

Built with commit: 07f42c438e9cb4de8ce584911e0968d0a4949c25

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Nov 15, 2021 •
edited
Loading

Deploy preview created for package Web Components (React wrapper):
https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/7661/index.html

Built with commit: 07f42c438e9cb4de8ce584911e0968d0a4949c25

@emyarod emyarod force-pushed the docs/pictogram-item-select-pictogram-knob branch from 23eb79a to fc812fe Compare November 15, 2021 19:51
@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Nov 15, 2021 •
edited
Loading

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

Built with commit: 07f42c438e9cb4de8ce584911e0968d0a4949c25

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Nov 15, 2021 •
edited
Loading

Deploy preview created for package NextJS Test Application:
https://ibmdotcom-nextjs-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/7661/index.html

Built with commit: 089e1cc47400c9e64ac58e25fb7fac880d50d6dc

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Nov 15, 2021 •
edited
Loading

Deploy preview created for package React:
https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/7661/index.html

Built with commit: 07f42c438e9cb4de8ce584911e0968d0a4949c25

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Nov 16, 2021 •
edited
Loading

Deploy preview created for package "Web Components (Codesandbox Examples)":
https://webcomponents-codesandbox.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/7661/index.html

Built with commit: 07f42c438e9cb4de8ce584911e0968d0a4949c25

@ibmdotcom-bot
Copy link
Contributor

ibmdotcom-bot commented Nov 16, 2021 •
edited
Loading

Deploy preview created for package "React (Codesandbox Examples)":
https://react-codesandbox.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/7661/index.html

Built with commit: 07f42c438e9cb4de8ce584911e0968d0a4949c25

@emyarod emyarod force-pushed the docs/pictogram-item-select-pictogram-knob branch from fc812fe to 089e1cc Compare November 18, 2021 15:52
jeffchew
jeffchew approved these changes Nov 18, 2021
View reviewed changes
Copy link
Member

@jeffchew jeffchew left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@jeffchew jeffchew added the Ready to merge Label for the pull requests that are ready to merge label Nov 18, 2021
@kodiakhq kodiakhq bot merged commit 493cbd8 into carbon-design-system:master Nov 19, 2021
@emyarod emyarod deleted the docs/pictogram-item-select-pictogram-knob branch November 19, 2021 14:57
@emyarod emyarod added this to the Sprint 21-23 milestone Nov 19, 2021
@jeffchew jeffchew mentioned this pull request Nov 19, 2021
Closed
kodiakhq bot pushed a commit that referenced this pull request Nov 23, 2021
@emyarod
test(pictogram-item): add e2e tests (#7662)
405e6a0 
### Related Ticket(s)

#7433

### Description

This PR adds Pictogram Item e2e tests for the following scenarios

a. Check pictogram item and content is loaded 
b. Check the Link with icon is loaded and clickable
c. Verify Pictogram item can be customized (desktop, touch, pattern) [depends on #7661]
d. Customize theme from Carbon theme and verify gray 10, gray 90 and gray 100 theme.

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jeffchew jeffchew jeffchew approved these changes

@photodow photodow Awaiting requested review from photodow photodow was automatically assigned from carbon-design-system/carbon-for-ibm-com-members

@annawen1 annawen1 Awaiting requested review from annawen1 annawen1 was automatically assigned from carbon-design-system/carbon-for-ibm-com-members

@andysherman2121 andysherman2121 Awaiting requested review from andysherman2121 andysherman2121 was automatically assigned from carbon-design-system/carbon-for-ibm-com-members

Assignees

@emyarod emyarod

Labels
package: web components Work necessary for the IBM.com Library web components package Ready to merge Label for the pull requests that are ready to merge storybook
Projects
None yet
Milestone
Sprint 21-23
Development

Successfully merging this pull request may close these issues.
3 participants
@emyarod @ibmdotcom-bot @jeffchew