Side panel

[carrenelloyd]

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.

[lee-chase]

Blocked as the status of the design it was set to 'status: refining' by @carrenelloyd

[ghost]

@carrenelloyd what was the reason behind the refining status tag - do you have a link to anything around the refinements underway?

[lee-chase]

@gatfora @carrenelloyd wondering what the state of the design is here?

[Levinson1]

Design is complete and published
https://pages.github.ibm.com/cdai-design/pal/components/side-panel/usage

[andrea-island]

@matthewgallo will meet with the design owner Kacie to get design approval

[andrea-island]

@matthewgallo can you provide an update from your meeting with Kacie?

[matthewgallo]

Yes definitely, here are some of my notes:

1. Margin right on title increase to $spacing-07
2. Add `title` html attribute to title in side panel
3. Add underline to bottom of fixed section (1px solid $decorative)
4. Allow size of panel to be controlled by Storybook controls (to reduce number of stories)
5. Add optional labelText prop with label-01 type token
   - bottom padding $spacing-02

[matthewgallo]

#731 --> will add multi step capability No longer applicable

[matthewgallo]

Review for release

Readiness

• One or more scenarios for a design pattern have been identified as a useful unit of functionality to publish.
• A functioning component or components delivering those scenarios have been delivered and merged to master.
• Design maintainer has approved the implementation for those scenarios (via a comment on the relevant issue/epic). - Issue 849

Engineering review

• Breaking changes have only been introduced with prior approval, discussion and documented in release notes. Ideally deprecation notices in the prior major version must have been added in a timely fashion.
• The implementation takes into account, and does not impair, remaining and anticipated design scenarios. - Issue 849
• Public component features (names, props, etc) are consistent with Carbon-defined conventions and are consistent internally. Where there isn't an existing convention to apply, ensure robust precedents are being established. - Issue 849
• The UI produced is accessible, responsive, translatable, cross-browser, and responds to the currently set Carbon theme. - Issue 849
• Components are functional components using hooks.
• Public components which produce DOM structures support className.
• Public components support a ref (via React.forwardRef).
• All significant DOM elements have meaningful classes.
• Additional attributes that are not identified as props (such as title, aria-*, etc) are passed through to an appropriate DOM node of the component as HTML attributes.
• No warnings, errors or log messages in the console. - Issue 849
• Each public component JS is exported in /src/components/index.js, each public component SCSS is included in /src/components/_index.scss, and each public component has a flag in package-settings.js.

Standards

• No linter warnings or errors are produced.
• Carbon tokens (theme, layout, motion) are used unless the design specifies otherwise.
• Code is formatted according to prettier rules (no use of //prettier-ignore).
• Code is clear, maintainable and follows standard React practices and the code guidelines. - Issue 849
• Copyright header in every source file (js, css, scss etc.) with the appropriate years. - Issue 849

Testing

• There is a set of test cases for the components.
• The tests exercise all inputs (props, slots, etc) and verify appropriate outputs. - Issue 849
• The tests validate the behaviors and interactions defined in the design where practical.
• The tests achieve 100% coverage. Usage of istanbul ignore is appropriate and not extensive.
• No warnings, errors or log messages in the test output.

Documentation

• Source code is satisfactorily commented and provides DocGen comments for all public components and their props.
• There is a story for each design scenario. The stories expose all relevant props and actions, and additional usage documentation and code samples are available on the 'Docs' tab along with the props table.
• There is a sandbox (or multiple sandboxes if appropriate) on CodeSandbox for the components. - - Issue 849

[matthewgallo]

This component has been released. Anything that comes up can be tracked in new issues