npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@aaronanderson/lwdc

v1.0.54

Published

Workday Canvas Kit LitElement Web Components

Downloads

164

Readme

Workday® is the registered trademark of Workday, Inc. This project is not affiliated with Workday, Inc. and Workday, Inc. does not endorse this project.

lwdc

Provides Lit web components for Workday Canvas Kit UI components.

The purposes of these components are:

  • Fully leverage the modern native web platform including Web Components and HTML Templates via Lit eliminating the need for complicated and archaic VDOM frameworks

  • Wrap the Canvas Kit CSS components to reduce boilerplate code and typos

  • Offer alternatives to Canvas Kit React components that do not have CSS equivalents

  • Provide Javascript functionality such as dynamic styling and selection

  • Plug into HTML form validation

React based applications would benefit from the direct usage of the React components included in Canvas Kit. Web Component based applications can easily include these components or wrap the React components using PReact as demonstrated here.

New collaborators or contributors are welcome.

Styling

Logically each Canvas Kit component should be wrapped as a Lit web component. However some of the Canvas Kit component utilize descendant CSS selectors that are unable to pierce web component shadow DOMs. For example, error.scss defines wdc-form-error at the form field level and has descendant selectors for text and select inputs. There are three potential solutions to this issue:

  • Add CSS selectors to parent elements for ::slotted and ::part

  • Add CSS selectors to child elements for :host-context()

  • Forego the use of the Shadow DOM and create elements in the Light DOM.

The Light DOM option was used for select components. The ::slotted and ::part solution would require upstream changes to Canvas Kit SCSS or a large amount of forked SCSS to replicate SCSS parent selectors. Likewise the :host-context() solution would require advanced introspection of the SCSS and targeted CSS for child components. Also FireFox does not support complex :host CSS selectors. Due to the complex nature of the comobox component it does use the Shadow DOM and has CSS selectors specifically for error highlighting.

The form related web components are added to the Light DOM and their styles are individually added to the closest shadow DOM or document. Typically form components will be wrapped by another custom element or the provided lwdc-form element so the styles will have some isolation and not excessive duplication.

Browser Support

The Lit components utilize two experimental browser features:

The current version of Chrome supports both of these features without any extra configuration. Firefox support is evolving:

Partial form associated custom element support can be activated in the latest version of Firefox via the dom.webcomponents.elementInternals.enabled setting in about:config

A minimal pollyfill is used to provide the missing form associated element features in Firefox in order to provide full form validation.

Storybook

Build the components: yarn install then yarn build

Build the Storybook: yarn build-storybook

Run the Storybook: yarn start

Usage

yarn add @aaronanderson/lwdc

Development

Local testing can be performed by checking this project out, running npm link in the checked out directory, and then running npm link @aaronanderson/lwdc in the target project.

Alternatively run yarn pack in the checked out directory and then run yarn remove @aaronanderson/lwdc, yarn cache clean, yarn add file:aaronanderson-lwdc-v1.0.0.tgz in the target project to install the latest version.