carbon-design-system / ibm-products Goto Github PK

Catalog # 18

Link to Design

View remove implementation

This may have working code, check with Vikki Paterson.

Maintainer
Vikki Paterson

Tasks

• Initial review of design/existing code

Working in experimental package

• Create a shell component which
  • Create ComponentName/ComponentName.js component file that renders props
    in raw form (no styling or sub components, plain text OK)
  • Adds prop-types with comments for DocGen to
    ComponentName/ComponentName.js
  • Add Doc file e.g. ComponentName.mdx with a brief description of the
    component.
• First engineering review/playback

Continuing in experimental package

• Storybook - stories to cover design scenarios, story with long, min and
  max content, etc
• Doc tab in storybook derived from design docs with embedded stories where
  appropriate
• Code to include prop-types with comments for automated DocGen
  documentation
• Tests (written in React Test Library) to cover behavior from the
  documented in the components mdx file.

Review and promote

• Design review
• Add design review issues addressed, issues raised or discounted.
• Engineering review - Submit PR to promote component to production package
• All engineering issues addressed, issues raised or discounted.

Modified Tabs design -> #33
Designer ->

Description

Set up Storybook deploy to reflect the master branch.

Catalog # 9

Link to Design

Need to add github pages to the build

• needs to contain the collective story book for all packages
• needs to be updated when the build is done with the changes from the packages

Catalog # 20

Link to Design

Working code

Link to design

Maintainers: Vikki Paterson , Chloe Poulter

Dev Maintainer: @davidmenendez

Catalog number: 12

Tasks

• Initial review of design/existing code

Release reviewer(s)

• @matthewgallo
• @sydrosa

Working in experimental package

• Create a shell component which
  • Create ComponentName/ComponentName.js component file that renders props
    in raw form (no styling or sub components, plain text OK)
  • Adds prop-types with comments for DocGen to
    ComponentName/ComponentName.js
  • Add Doc file e.g. ComponentName.mdx with a brief description of the
    component.
• First engineering review/playback

Continuing in experimental package

• Storybook - stories to cover design scenarios, story with long, min and
  max content, etc
• Doc tab in storybook derived from design docs with embedded stories where
  appropriate
• Code to include prop-types with comments for automated DocGen
  documentation
• Tests (written in React Test Library) to cover behavior from the
  documented in the components mdx file.

Review and promote

• Design review
• Add design review issues addressed, issues raised or discounted.
• Engineering review - Submit PR to promote component to production package
• All engineering issues addressed, issues raised or discounted.

Summary

Discussion around how release management could work across Cloud Pak components packages, and what best practices are available to be leveraged from Carbon.

Questions

Lerna versus semantic-release

Catalog # 7

Link to Design

Maintainer
Vikki Paterson

Dev Maintainer
@matthewgallo

https://github.com/carbon-design-system/ibm-cloud-paks/projects/2#card-45884682

View empty states implementation

Tasks

• Initial review of design/existing code

Working in experimental package

• Create a shell component which
  • Create ComponentName/ComponentName.js component file that renders props in raw form (no styling or sub components, plain text OK)
  • Adds prop-types with comments for DocGen to ComponentName/ComponentName.js
  • Add Doc file e.g. ComponentName.mdx with a brief description of the component.
• First engineering review/playback

Continuing in experimental package

• Storybook - stories to cover design scenarios, story with long, min and
  max content, etc
• Doc tab in storybook derived from design docs with embedded stories where
  appropriate
• Code to include prop-types with comments for automated DocGen
  documentation
• Tests (written in React Test Library) to cover behavior from the documented in the components mdx file.

Review and promote

• Design review
• Add design review issues addressed, issues raised or discounted.
• Engineering review - Submit PR to promote component to production package
• All engineering issues addressed, issues raised or discounted.

Today, the packages being hosted here are:

• Automation
• CD & AI
• Security
• Bedrock services ->common services

I think we should add these to the common README for others awareness.

Originally posted by @ericabr in #3 (comment)

View additional tags implementation

To do

• show all feature
• Align the tooltip (carbon-design-system/carbon#7309)

Summary

Exploration and discussion on exploring Sass modules / Dart sass as a style solution across Cloud Pak components packages.

Catalog # 10

Link to Design

Maintainers
Vikki Paterson, Chloe Poulter

Working code

Catalog # 25

Link to Design

Update Carbon design

Made a start here, not actively working on

Maintainer
Myriam Battelli

Tasks

• Initial review of design/existing code

Working in experimental package

• Create a shell component which
  • Create ComponentName/ComponentName.js component file that renders props
    in raw form (no styling or sub components, plain text OK)
  • Adds prop-types with comments for DocGen to
    ComponentName/ComponentName.js
  • Add Doc file e.g. ComponentName.mdx with a brief description of the
    component.
• First engineering review/playback

Continuing in experimental package

• Storybook - stories to cover design scenarios, story with long, min and
  max content, etc
• Doc tab in storybook derived from design docs with embedded stories where
  appropriate
• Code to include prop-types with comments for automated DocGen
  documentation
• Tests (written in React Test Library) to cover behavior from the
  documented in the components mdx file.

Review and promote

• Design review
• Add design review issues addressed, issues raised or discounted.
• Engineering review - Submit PR to promote component to production package
• All engineering issues addressed, issues raised or discounted.

Epic Order/Plan

Beginning

• Toolbar items that do not go into overflow (see design). #822
• Toolbar item search behaviour. #824
• Toolbar item #814
• Toolbar item dropdown container #817
• Toolbar group contains items #815
• Toolbar item - pre-canned sets? #825
• Toolbar item toggle button e.g. bold #826

Middle

• Toolbar item horizontal options (text align) #821
• Toolbar responsive behaviour to be defined #816
• Toolbar item front size picker behaviour #820
• Toolbar item color picker behaviour #818

End

• Docked toolbar -works with page header #809
• Toolbar docking, floating behaviour, orientation #806
• Toolbar state e.g. docking position #807
• Toolbar context data mechanism #808
• Toolbar positioning in the grid, full width, or side to side #823
• Toolbar action preview #810
• Docked toolbar #813
• Floating toolbar #811

Catalog # 17

Link to Design

https://github.ibm.com/CloudIntegrationDesign/DesignSystemAdoptionGuild/issues/91

Catalog # 21

Link to Design

See also
https://pages.github.ibm.com/ibmcloud/pal/components/side-panel/usage/

Tasks

• Initial review of design/existing code

Working in experimental package

• Create a shell component which
  • Create ComponentName/ComponentName.js component file that renders props
    in raw form (no styling or sub components, plain text OK)
  • Adds prop-types with comments for DocGen to
    ComponentName/ComponentName.js
  • Add Doc file e.g. ComponentName.mdx with a brief description of the
    component.
• First engineering review/playback

Continuing in experimental package

• Storybook - stories to cover design scenarios, story with long, min and
  max content, etc
• Doc tab in storybook derived from design docs with embedded stories where
  appropriate
• Code to include prop-types with comments for automated DocGen
  documentation
• Tests (written in React Test Library) to cover behavior from the
  documented in the components mdx file.

Review and promote

• Design review
• Add design review issues addressed, issues raised or discounted.
• Engineering review - Submit PR to promote component to production package
• All engineering issues addressed, issues raised or discounted.

Catalog # 15

Link to Design

Summary

Discussion around how end-to-end testing could work across Cloud Pak components packages.

Link to Design

Work in Progress (WIP)

Link to Carbon ticket

Catalog #: 3

Catalog # 19

Link to Design

Catalog # 4

Link to design

Link to Redlines

Contributors
Austin Edwards
Kathryn Gallagher
Alexander Meyer
Ceci Moralles
JP Pollard

Catalog # 13

Link to Design

Work in Progress

Maintainers
Tom Solomon

Catalog # 22

Link to Design

Working code

Core package:

• We need to add carbon 10 in a way it can be required by other packages
  https://github.com/carbon-design-system/carbon/blob/master/packages/react
• Add theming to be picked up by other packages https://github.com/carbon-design-system/carbon/tree/master/packages/themes

Acceptance criteria

Primary

• Basic Jest and React Testing Library configuration
• Testing suite should run on each build

Secondary

Documentation

• Links for guidance on behavioural testing and configuration
• Test structure
• Examples

Summary

Identify and define CODEOWNERS and teams for design and development to automatically assign for PRs.

Summary

Discussion around how testing could work across Cloud Pak components packages, to ensure continued confidence in something working as designed and implemented, and what best practices are available to be leveraged from Carbon and other teams - For example:

• Accessibility
• End-to-end - Cypress
• Unit

Catalog # 6

Link to Design

Maintainers
Vikki Paterson, Chloe Poulter

Tasks

• Initial review of design/existing code

Working in experimental package

• Create a shell component which
  • Create ComponentName/ComponentName.js component file that renders props
    in raw form (no styling or sub components, plain text OK)
  • Adds prop-types with comments for DocGen to
    ComponentName/ComponentName.js
  • Add Doc file e.g. ComponentName.mdx with a brief description of the
    component.
• First engineering review/playback

Continuing in experimental package

• Storybook - stories to cover design scenarios, story with long, min and
  max content, etc
• Doc tab in storybook derived from design docs with embedded stories where
  appropriate
• Code to include prop-types with comments for automated DocGen
  documentation
• Tests (written in React Test Library) to cover behavior from the
  documented in the components mdx file.

Review and promote

• Design review
• Add design review issues addressed, issues raised or discounted.
• Engineering review - Submit PR to promote component to production package
• All engineering issues addressed, issues raised or discounted.

Summary

Discussion around how accessibility testing could work across Cloud Pak components packages.

Catalog # 5

Link to Design (not updated yet)
Link to interim design docs

Maintainers:
Andrew Smith, @Andrea-gm

Dev:
NOTE: Tearsheets are a separate issue. There are separate issues for each form of 'Create'.

Tasks

• Initial review of design/existing code

Working in experimental package

• Create a shell component which
  • Create ComponentName/ComponentName.js component file that renders props
    in raw form (no styling or sub components, plain text OK)
  • Adds prop-types with comments for DocGen to
    ComponentName/ComponentName.js
  • Add Doc file e.g. ComponentName.mdx with a brief description of the
    component.
• First engineering review/playback

Continuing in experimental package

• Storybook - stories to cover design scenarios, story with long, min and
  max content, etc
• Doc tab in storybook derived from design docs with embedded stories where
  appropriate
• Code to include prop-types with comments for automated DocGen
  documentation
• Tests (written in React Test Library) to cover behavior from the
  documented in the components mdx file.

Review and promote

• Design review
• Add design review issues addressed, issues raised or discounted.
• Engineering review - Submit PR to promote component to production package
• All engineering issues addressed, issues raised or discounted.

Issue description

Catalog # 16

Design maintainer: Cameron Calder
Dev maintainer: Lee Chase

Link to Design
Replace existing design with new design below

Link to Design Issue

Working code

View page header implementation

Implementation tasks

• Evaluate existing components. Is it a good starting point for the new header.
• Boolean property to control background appearance
• Breadcrumb and action bar (optional, jsx) - Array of BreadcrumbItem
• Title (optional, prop string 56) and Actions (optional, jsx)
• Subtitle/description area (string, optional)
• Available space (optional, jsx)
• Tabs / Content switcher (optional slot, jsx) (story to include content of tabs)
• Stories (1 story per every design example)
• Tests
  • Convert tests to React Test Library
• Documentation
  • Fix scroll behaviour in Doc page.
• Outstanding issues:
  • No easing when the primary action buttons jump to action bar during scrolling.
  • Primary action buttons possibly jump too early - perhaps they should jump just as they hit the action bar and not before.
  • In this story when you scroll the tags off the page it leaves too much whitespace below the primary page action buttons.
  • The title wraps and it should not.
  • The title should be limited to 56 chars and truncated and an ellipse added if it's longer that that, with the full text in the browser hover tooltip. Could be hard because of localisation.

Review items

• Ready for initial review.
• Fix background color on load (maybe use ResizeObserver package)
• Review responsive behaviour.

Design review

• Ensure spacing between type and objects matches spacing tokens used in design specs under the Structure section below
• Tabs should be offset 16 to the left so the type in the tabs aligns with the Page title
• 'Without Background BreadcrumbItems Title' shouldn't load with a background
• Breadcrumbs font should be size $label-01
  
• When the page header with no background transitions to the condensed breadcrumb bar, fade the background in with the speed of the scroll instead of the hard cut in
• When there is an Actionbar visible, wait until after the buttons scrolls under the Actionbar to animate in the buttons within the Actionbar area. Button fade animation should be: button fade-in & fade-out transition = motion(entrance, productive) / cubic-bezier(0, 0, 0.38, 0.9) $transition—base
• Divider line underneath the Actionbar should extend the full width
• 'With Background Breadcrumbitems Actionbar': Should include the 'Page title' at the end of the breadcrumb
• 'Long Values And Many Items': Match guidance for 'Page lengths' and 'Responsive behavior'
• If there is no page header background, there should be a $layout-03 spacer between the page title and the page content
  
• When it’s just the breadcrumb and no breadcrumb/action bar, it should be $spacing-02 between the breadcrumbs and the page title
  
• Remove the With Background Breadcrumbitems Title Pageactions Content Switcher example. Upon further discussion with designers across the org, the content switcher is not a component we want to advertise as proper within the page header.
• The space between the status & page content should be $layout-03
  
• With Background Breadcrumbitems Title Pageactions Tags: Tags are offset from the left. The space between the title and tags should also be $spacing-05
  
• With Background Breadcrumbitems Title Pageactions Summarydetails Tabs: If the control is set to keepBreadcrumbAndTabs=true then include the divider line between the breadcrumbs & tabs when they meet on scroll
  
• With Background Breadcrumbitems Actionbar Title Pageactions Tabs Tags: Slow down the duration of the button that animates into the breadcrumb bar on scroll. It's currently too fast. Try ~240-300ms

TODO:

• Breadcrumb with overflow
• ActionBarItems with overflow
• Tags component not quite complete. (Alignment and show all)

Questions

1. What size/type of "available content" filling can we have?

Summary

Discussion around how code styling could work across Cloud Pak components packages, and what best practices are available to be leveraged from Carbon.

• Code design and style decisions
• Linting and rules - eslint / stylelint configuration
• Formatting - Tabs versus spaces, Prettier configuration?

Catalog # 24

Link to Design