Skip to content

Latest commit

 

History

History
176 lines (166 loc) · 8.59 KB

CHECKLIST.md

File metadata and controls

176 lines (166 loc) · 8.59 KB
Raw

Task List for Web Components

General Component Checklist

  • Accessibility: Create accessible markup at the start and test a screen reader like Chrome Vox. Also pass Axe tests (with some exceptions)
  • Abstraction: Think about abstraction, does this component needs to be broken down into different smaller components.
  • Re Use: Try and use existing components and mixins in your component.
  • Settings/Events/Methods: Look at the old component and cover the most important settings, we will try to not bring all of this over so will spec this out.
  • Private Methods and Classes: Make anything private that should be with # on the name
  • Id/Automation Ids: Just name the id's appropriately and then can be accessed via the shadow DOM. Need to be unique per component shadowRoot.
  • example.index: The main example.html page should just show one simple example and not all variations
  • test-sandbox.index: The sandbox page should show all other examples in a nicely formatted way.
  • Standalone Css: Add a basic standalone css example
  • Right to Left: Test on lang="ar" that when flipped all is correct (best way is to use flex and justify)
  • Locale: Make sure strings are translated, and use number / date / timezone parsers as needed
  • Side By Side Example: Works in Page with 4.x version
  • Documentation: Add copious documentation in a README.MD in the folder
  • TODO: Add a TODO.md for anything needing to be done in the future you think of
  • Themes: Implement color changes for Themes
  • Types: In the d.ts file add types for all public settings, methods and events
  • 100% Test Coverage: Add Functional test coverage to 100% or by ignoring coverage on a non testable section
  • Change log: Add detailed Upgrade Docs in the change log discussing any gotchas converting from 4.x
  • Playwright Tests: Add tests for any functionality that cant be accurately tested in the functional tests as well as basic sanity checks, Axe checks and Percy Tests for all 3 themes
  • Security: We will always pass all CSP guidelines. But the code is setup to error if this fails. Also we will pass security scans like Veracode and Snyk. The biggest issue here is usually XSS.
  • NG / Vue / React / Svelte / TS Example (we will build this out)
  • Old Issues: Review Be aware of old and new issues on a component in the old backlog
  • Add an index.yaml file to expose the examples on the root page for categories it should be one of:
Form Inputs
Navigation and Interaction
Messages and Alerts
Lists
Layouts
Patterns
Charts and Visualizations

Components To Convert

Will get a checkbox at minimum viable product. The rest of the details are covered in a TODO.md in the individual folder after first commit

  • About (ids-about)
  • Accordion (ids-accordion)
  • Action Sheet (ids-action-sheet)
  • Alerts (ids-alert)
  • Application menu (ids-application-menu)
  • Area (ids-area-chart)
  • Arrange (ids-swappable)
  • Autocomplete (ids-autocomplete)
  • Badges (ids-badge)
  • Bar (ids-bar-chart)
  • Block grid (ids-block-grid)
  • Breadcrumb (ids-bread-crumb)
  • Bubble (ids-bubble-chart)
  • Button (ids-button)
  • Bullet (ids-bullet-chart) skipping until needed
  • Builder (ids-patterns) skipping until needed
  • Button (ids-button)
  • Calendar (ids-calendar)
  • Cards (ids-card)
  • Checkboxes (ids-checkbox)
  • Circle Pager (ids-scroll-view)
  • Color Picker (ids-color-picker)
  • Column (ids-column-chart or ids-bar with a orientation setting)
  • Completion Chart (ids-progress-chart)
  • (Contextual) Action Panel (ids-action-panel)
  • Datagrid (ids-data-grid)
  • Data Label (ids-data-label)
  • Datepicker (ids-date-picker)
  • Donut (ids-donut or combined with ids-pie)
  • Drag (ids-draggable)
  • Dropdown (ids-drop-down)
  • Editor (ids-editor)
  • Emptymessage (ids-empty-message)
  • Error Page (ids-page-error)
  • Expandable area (ids-expandable-area)
  • Fieldset (ids-field-set)
  • Fontpicker (added as part of editor)
  • Form (ids-form)
  • Grid (ids-layout-grid)
  • Header (ids-header)
  • Hierarchy (ids-hierarchy)
  • Homepage (ids-homepage)
  • Hyperlinks (ids-hyperlink)
  • Icons (ids-icon)
  • Images (ids-image)
  • Input (ids-input)
  • (Layout) Responsive Grid (ids-layout-grid)
  • Line (ids-line-chart)
  • Listbuilder (ids-list-builder)
  • Listview (ids-list-view)
  • Loading indicator (ids-loading-indicator) aka Busy Indicator / Loader
  • Locale (ids-locale)
  • Lookup (ids-lookup)
  • Mask (ids-mask)
  • Masthead (ids-masthead)
  • Menu (ids-menu)
  • MenuButton (ids-menu-button)
  • Message (ids-message)
  • Modal (ids-modal)
  • Monthview (ids-month-view)
  • Multiselect (ids-multi-select)
  • Notification (ids-notification-banner)
  • Page Layouts (ids-page-layout or as individual separate examples)
  • Page Patterns (ids-page-pattern or as individual separate examples)
  • Pager (ids-pager)
  • Personalize (ids-personalize or as a mixin on components thats support)
  • Pie (ids-pie-chart)
  • Popup (ids-popup)
  • Popupmenu (ids-men
  • Positive Negative (ids-positive-negative-chart) skipping until needed
  • Radar (ids-radar-chart) skipping until needed
  • Radios (ids-radio)
  • Rating (ids-rating)
  • Scatterplot (ids-scatter-plot-chart)
  • Searchfield (ids-search-field)
  • Sign-in (ids-layouts)
  • Skiplink (ids-skip-link)
  • Slider (ids-slider)
  • Sparkline (ids-spark-line-chart) skipping until needed
  • Spinbox (ids-spin-box)
  • Splitter (ids-splitter)
  • Stepchart (ids-step-chart)
  • Swaplist (ids-swap-list)
  • Switch (ids-switch)
  • Tabs (ids-tabs)
  • Tabs Header (ids-tabs with option)
  • Tabs Module (ids-tabs with option)
  • Tabs Multi (ids-tabs with option) skipping until needed
  • Tabs Vertical (ids-tabs with option)
  • Tag (ids-tag)
  • Targeted Achievement (ids-progress-chart)
  • Textarea (ids-textarea)
  • Timeline (ids-time-line) skipping until needed (also have process indicator)
  • Timepicker (ids-time-picker)
  • Toast (ids-toast)
  • Toolbar (ids-toolbar)
  • Tooltip (ids-tooltip
  • TrackDirty (mixin)
  • Tree (ids-tree)
  • Treemap (ids-tree-map)
  • Trigger Field (ids-trigger-field)
  • Typography (ids-text)
  • Upload (ids-upload)
  • Upload Advanced (ids-upload-advanced)
  • Validation (ids-validation-mixin)
  • Visibility (ids-hidden)
  • Week View (ids-week-view)
  • Wizard (ids-wizard)

A bit about TODO's in this project

We have a series of gaps in this project to close in terms of functionality. Some things we may not add due to wanting to deprecate some functionality to clean things up but some we do need to add. Each folder in src for the component may have a TODO file listing all outstanding tasks and features. This document is a check list on how to look at making this list and generating some issues for the tasks to be fixed.

For each component...

  • Make sure CHECKLIST.md is checked off
  • Make sure component is on kitchen sink https://main.wc.design.infor.com/ page and in an appropriate section
  • Run the each example https://main.wc.design.infor.com/
  • Compare to examples to https://main-enterprise.demo.design.infor.com/components/ and make sure everything is covered
  • Check old source and see if any events/methods or settings might be needed
  • Check new settings and types are in d.ts and .md while testing
  • Add any breaking changes to README.md or anything we don't want to bring over (Converting from Previous Versions)
  • Look in https://github.com/infor-design/enterprise/issues for any unfixed issues and add
  • Fix only super small bugs
  • Check for if standalone css or side-by-side examples are needed and add a TODO
  • Check if RTL is needed
  • Check if themes all work (skip classic ###) - QA Task?
  • Compare Styling to old version - QA Task?
  • Check if keyboard all works - QA Task?
  • Sort the todos in priority and classify as Major/Minor
  • Make sure the TODO.md is formatted like the ids-about one (with the sections)
  • Make an issue for one or two todos
  • Make a parent issue for all todos #499 (estimate as the sum of all sub issues)
  • Update the Change log to be more generic and point to the README.md