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.

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

[RFC] docs(contribution): community components model #3769

Closed
wants to merge 10 commits into from
Closed

[RFC] docs(contribution): community components model #3769

wants to merge 10 commits into from

Conversation

jnm2377
Copy link
Contributor

@jnm2377 jnm2377 commented Aug 20, 2019

No description provided.

@netlify
Copy link

netlify bot commented Aug 20, 2019

Deploy preview for the-carbon-components ready!

Built with commit 238fff7

https://deploy-preview-3769--the-carbon-components.netlify.com

@netlify
Copy link

netlify bot commented Aug 20, 2019

Deploy preview for carbon-components-react ready!

Built with commit 238fff7

https://deploy-preview-3769--carbon-components-react.netlify.com

@netlify
Copy link

netlify bot commented Aug 20, 2019

Deploy preview for carbon-elements ready!

Built with commit 238fff7

https://deploy-preview-3769--carbon-elements.netlify.com

**How do I include my design assets in the component package?**

If you're contributing design, you will add your sketch files to the community
components [box folder](url here). In the monorepo, we will include the
Copy link
Member

Choose a reason for hiding this comment

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

has this folder been created yet?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

No. We haven't created any assets for this. We wanted to get feedback on the model first.

Copy link
Member

Choose a reason for hiding this comment

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

ok got it, I assumed we had some existing from our previous addons

in the monorepo. Reaching 100% completeness means meeting all of the design and
development guidelines on this list.

**Basic (always required)**
Copy link
Contributor

Choose a reason for hiding this comment

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

For communities that have more rigorus requirements would be we be able to extend the this list for our specific package? (regulated environments for example have more testing/documentation that is required).

Copy link
Contributor

Choose a reason for hiding this comment

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

Since the criteria live with the component, regulated environments would be able to use (or not use) components that meet their unique criteria.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

To add to what Vince said, components can definitely have more design and technical specs than what's on this list (i.e. if you support RTL) but these are objective completeness measures based on what Carbon supports. We don't want to require more rigorous specs if it's not something that we don't support in our own components, but we won't stop teams from implementing them on their own. @elizabethsjudd


### What are community components?

Community Components is our new library of custom components contributed by you.
Copy link
Contributor

Choose a reason for hiding this comment

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

WH has a a group of Carbon components that are built in Handlebars that are exportable and re-useable... would that live in the community components under a single package for "handlebars"? or would that be something that would still want to be in the core library since they are duplicate components from what is in core?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The idea is that any components that don't already exist in our core library would live in community components. Whether they are variations of our core components (i.e. a component with a new feature that we don't have) or a completely different component that we don't have, we would want them to live in community components @elizabethsjudd

- [`@carbon/layout`](https://github.com/carbon-design-system/carbon/tree/master/packages/layout)
- [`@carbon/motion`](https://github.com/carbon-design-system/carbon/tree/master/packages/motion)
- [`@carbon/themes`](https://github.com/carbon-design-system/carbon/tree/master/packages/themes)
- [`@carbon/icons-react`](https://github.com/carbon-design-system/carbon/tree/master/packages/icons-react)
Copy link
Contributor

Choose a reason for hiding this comment

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

isn't there other @carbon/icons-* packages as well? (WH specifically uses the handlebars one)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

There are a few other packages in general. We've listed some of our main ones here, but included a link to all our packages below it.

### What if I want to contribute a new feature or custom component?

If you're contributing to Carbon Components, we will only accept bug fixes. If
you want to contribute a custom component, new feature, or a variation of an
Copy link
Contributor

Choose a reason for hiding this comment

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

A lot of times to add a feature/variation of a core component it's duplicating a lot of work from the core repo to achieve the desired outcome vs just making the core component more flexible. Would there be a way to denote that a variation in core is owned by someone outside of the core team. Examples we have: required modals that remove the x on the modal, overflow menus that have headings within the list, etc.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We realize that there are variations of our components and it would be easier for the contributors to just work in our source code but there are 2 main reasons that we don't want that:

  1. We don't want our developers to have to become familiar or deal with more code. Even if we said that a component variation was maintained by another person not on Carbon, that code would still be something that we have to become familiar with, approve, etc. We'd also have to deal with potential bugs from a new variation that might affect anything we're doing with that component. Etc.
  2. We don't want to approve features without extensive design research behind it.

This feeds into community-component-to-core path. We would only consider variations of components eventually moving into core/being maintained by us after we see that there's been thorough research, maintenance, use/need for the component.

Essentially what we don't want to do is create more work for our designers and developers until we've seen evidence that this should live in core Carbon.

The diagram above illustrates one way we could implement this vision for
community contribution. In this model we would need both a Core Carbon and a
Community monorepo. The Community repo would consume packages from Core Carbon
repo and both monorepos would need to run on the same spec model (this has not
Copy link
Contributor

Choose a reason for hiding this comment

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

if they are running the same spec across repos but community components that are variations on an existing component would require either duplicate specs OR the core specs would need to be updated to allow the flexibility. (see previous comment about how variants in the separate repo would also be troublesome/non-DRY)

@@ -0,0 +1,3 @@
# Patterns contributions

Patterns contribution guidelines coming soon!
Copy link
Member

Choose a reason for hiding this comment

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

The IBM.com Library team has a ton of patterns work on our roadmap very soon, as this is a huge need for IBM.com adopters (React/Vanilla). Our current plan is creating a patterns package in our monorepo. We should sync up to see how much this will align with what Carbon team has in mind.
cc: @photodow @oliviaflory @larahanlon2

Copy link
Contributor

Choose a reason for hiding this comment

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

WH also has a ton of Pattern work going on as well @AT-public @vincentsnagg @janedepgen

practices and proper commit messages.
3. **Issue:** Check repo for an _existing_ issue related to your contribution
first. If none exist, open a new issue.
4. **Package directory:** Once you open an issue, we will review that you have a
Copy link
Contributor

Choose a reason for hiding this comment

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

Out of curiosity, what would the turn around time be on creating the set up for contributions.

Besides a duplicate name would there be any reason why an issue would be denied?

Copy link
Contributor

@vpicone vpicone left a comment

Choose a reason for hiding this comment

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

I have some technical questions around the community components mono repo approach:

  • Will all of the community components be packaged and released together by framework? Does endorsement play into this?
  • Will all of the community components share a stylesheet? How do we prevent naming collisions in those styles?
  • What if a component meets certain (non-automated) criteria but either the criteria or the component changes so this isn't true any more?

_If we're not required to meet any of the guidelines, why would we want to
create more work for ourselves by trying to meet most of them?_

Good question. Carbon will be endorsing components that meet 80% or more of
Copy link
Contributor

Choose a reason for hiding this comment

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

This seems kind of arbitrary. I get having a loose 'base' requirement, but by this standard we'd endorse a component as being the same design and development level as a core component with the following criteria:

  • fails all 3 accessibility levels
  • is built with v9
  • only supports Chrome.
  • no interactive states

- [ ] Semantic HTML
- [ ] Code documentation (props, class/selectors)
- [ ] Include different states (hover, focus, disabled)
- [ ] Unit testing

Choose a reason for hiding this comment

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

What will the Continuous Integration process be? This has potential to be a very large monorepo with a lot of disparate technologies. Is it possible to have a separate CI process on a per-package basis?

Choose a reason for hiding this comment

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

If there is not separate processes, what happens if an un-related package is failing CI - will the cross-package CI system be merge-blocking for all packages?

Copy link

@scottnath scottnath left a comment

Choose a reason for hiding this comment

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

Thank you for the RFC, very exciting concept!

- [ ] SASS
- [ ] Using Carbon design tokens (color, type, motion, spacing)
- [ ] `#{$prefix}` class naming
- [ ] Semantic HTML

Choose a reason for hiding this comment

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

Will this be tested for using the free tools from W3?

- [ ] Using Carbon design tokens (color, type, motion, spacing)
- [ ] `#{$prefix}` class naming
- [ ] Semantic HTML
- [ ] Code documentation (props, class/selectors)

Choose a reason for hiding this comment

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

Can these be created via an auto-generated process as part of CI?

- [ ] Using IBM icons
- [ ] Using IBM grid & layout guidance
- [ ] Design in all 4 color themes
- [ ] Satisfy basic accessibility contrast requirements (text readability 4.5:1,

Choose a reason for hiding this comment

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

Will there be automated a11y testing in the community repo?

- [ ] Semantic HTML
- [ ] Code documentation (props, class/selectors)
- [ ] Include different states (hover, focus, disabled)
- [ ] Unit testing

Choose a reason for hiding this comment

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

If there is not separate processes, what happens if an un-related package is failing CI - will the cross-package CI system be merge-blocking for all packages?

- [ ] Satisfy basic accessibility contrast requirements (text readability 4.5:1,
info graphics 3:1)

**Code**

Choose a reason for hiding this comment

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

What if the community contribution is an add-on feature of an existing component? For instance, if there was a feature that Carbon didn't want to add to a Core component? Will it be possible to create a component directory that imports and builds upon a Core component, yet retains it's naming? As a super basic for instance, what if a team needed a yellow Tag? This would seem like overkill to create a completely new component. Could something like this happen:

Carbon-Community/packages/tag

  • docs: use core/tag docs and add yellow to them (could be automated via JSDoc)
  • tests: use core/tag/tests, adding a test for the yellow tag
  • styles: import core/tag/*.scss adding yellow tag style
  • HTML: this community component would not need it's own HTML - it would use the core one because there are no HTML differences

End user:
Imports Carbon-Community/packages/tag, receives the entirety of the Tag component


**Frameworks**

- [ ] Vanilla JS

Choose a reason for hiding this comment

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

can one community-component contain multiple framework implementations within it?

- [ ] Angular
- [ ] Vue

**Browser support**

Choose a reason for hiding this comment

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

Will there be screen-reader support guidelines?


1. **Contributor License Agreement:** Before you can contribute any code, we
need you to sign a Contributor License Agreement (CLA).
2. **Development environment:** If you haven't already, fork and clone the

Choose a reason for hiding this comment

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

Will Carbon be supplying dev environment functionality? Test runners, sass processing, live-reload dev server, etc?
Would these be tools which we could set up as needed for a package?
Would this functionality be part of setting up the package directory done by Carbon?

@jnm2377 jnm2377 mentioned this pull request Sep 3, 2019
17 tasks
@joshblack
Copy link
Contributor

@jnm2377 do we want to separate out the COC into a separate PR to get merged in?

Following up on this, is there anything that you need to move forward with this or should we close and regroup with the feedback received?

@joshblack
Copy link
Contributor

Gonna close this as we're cleaning up our PRs, feel free to re-open!

@joshblack joshblack closed this Sep 18, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants