🖍️ Crayons

Freshworks Crayons is a library of UI components that help create an intuitive and uniform user interface for all your apps. This collection of Web components helps developers build apps that adhere to the UX standards set by the Freshworks Design System.

Installation

Please refer to the usage guidelines here.

Documentation

You can refer to the documentation on the Crayons Website.

Development and Contribution

• Clone the repo:

git clone https://github.com/freshworks/crayons
cd crayons
npm install
git config core.hooksPath .git/hooks/

• To start in dev mode with HMR and Storybook:

npm run dev

• To build the components for production, run:

npm run build:components

• To run the tests for the components, run:

npm run test

• To generate a new component, run:

npm run generate

Please see CONTRIBUTING GUIDELINES for more details.

Code of Conduct

Please read the Code of Conduct here.

Naming Components

When generating components, the custom element tags is prefixed with fw- while the rest of the name is modified to support web component standards. For example, if a component is generated with the name Label, the component that would be generated would be <fw-label/>.

Read more

This project is built with StencilJS. You can check out the following links for further information:

• Build components
• Testing a component
• Using in different frameworks

2.13.3 (2022-01-05)

Bug Fixes

• icon.tsx: removes title from svg that is visible on hover (95d2900), closes #200

2.13.2 (2021-07-16)

Bug Fixes

• main.yml: changes to upgrade remove validations (de111ca)

2.13.1 (2021-04-14)

Bug Fixes

• fw-input: adds a new event for clearing input (271a20f), closes #185

2.13.0 (2021-03-18)

Features

• fw-label: introduce css variables for label padding (c7ef767), closes #181

2.12.2 (2021-03-16)

Bug Fixes

• radio.tsx, checkbox.tsx: fixes checked value change to reflect in UI when disabled (0cc6f70), closes #154

2.12.1 (2021-03-09)

Bug Fixes

• select.tsx: fixes emitting fwChange before initialization for multiselect (3d11ba5)

2.12.0 (2021-02-03)

Features

• input, button, radio-group, textarea, datepicker, timepicker, checkbox: added form support (58a7d25), closes #104 #170

2.11.1 (2021-01-06)

Bug Fixes

• dropdown-button: make only list scrollable (09ee194), closes #168

2.11.0 (2020-12-21)

Features

• select.tsx: added max for multselect (e297873), closes #156

2.10.2 (2020-12-21)

Bug Fixes

• input.scss: hides arrows in input type number (cb91f0d), closes #150
• toast: fix toast icon not loading (f4b69d8), closes #164
• toast: review comments (f434514), closes #164

2.10.1 (2020-12-11)

Bug Fixes

• select.tsx: fixed placeholder problem in select (123a15a), closes #157

2.10.0 (2020-12-07)

Features

• textarea: change textarea var desc (4ef8b78), closes #152
• textarea: introduced text color for textarea as scss var (7e4af5b), closes #152

2.9.1 (2020-12-02)

Bug Fixes

• search.svg: fixes color issue in svg file (fbd1d18), closes #147

2.9.0 (2020-11-04)

Features

• dropdown-button: add disabled prop (0aeca90), closes #145

2.8.1 (2020-10-28)

Bug Fixes

• icon: add gulp task to test (d84eaa3), closes #143
• icon: fixes icon url path error (c20bdd8), closes #143
• icon: minor gulp file fix (db2d920), closes #143

2.8.0 (2020-10-14)

Features

• components/select/select.tsx: add a method to set selected values in fw-select component (1ea13de), closes #132

2.7.1 (2020-10-05)

Bug Fixes

• fix datapicker false events trigger (318f554)

2.7.0 (2020-09-30)

Features

• button: fix type change (429e7dc), closes #112
• dropdown button: add missing css prop (36c157f), closes #112
• dropdown button: dropdown button adhering to Freshworks Design System (43e8bda), closes #112
• dropdown button: dropdown button small fix (003a937), closes #122
• dropdown button: review comments (43923cd), closes #112
• dropdown button: review comments - 2 (b8bfe71), closes #112

2.6.3 (2020-09-30)

Bug Fixes

• fw-button: fixes CSS issues with external CSS (ba327de), closes #134

2.6.2 (2020-09-30)

Bug Fixes

• select: fixed tag not getting disabled (3723830), closes #137

2.6.1 (2020-09-28)

Bug Fixes

• toast.scss, toast.scss, readme.md: added z-index for toast messages, increased default timeout (99d6b9d)

2.6.0 (2020-09-25)

Features

• toast Component (3db87dc), closes #111

2.5.0 (2020-09-17)

Features

• input select textarea: adds new prop - autofocus (bd88d2b), closes #129

2.4.0 (2020-08-28)

Features

• fw-modal: added events and hide-footer attribute (a4bd59c)
• fw-modal: introduces modals to crayons (1725f86), closes #113

2.3.4 (2020-08-18)

Bug Fixes

• fw-tabs: fixes Multi-Level Nesting in Tabs (8e312f2), closes #109

2.3.3 (2020-08-14)

Bug Fixes

• fw-tabs: fwChange fires twice (0135302), closes #106

2.3.2 (2020-07-24)

Bug Fixes

• datepicker: fixes closing the datepicker as designed (19eec6d), closes #98

2.3.1 (2020-07-23)

Bug Fixes

• close popup on click outside (a88efc1), closes #98

2.3.0 (2020-07-14)

Bug Fixes

• review comments (2556171)
• review comments - 2 (7dbdf98)

Features

• style fix (71a0794)
• select: added back readonly (c78ae16)
• select: review comments -4 (7501ff8)
• select: review comments - 3 (b72687e)
• textarea, timepicker, select: improvements in textarea, select, timepicker (ce02f62)

2.2.4 (2020-06-23)

Bug Fixes

• tabs: adds active index as an attribute/prop (6f5cefb)

2.2.3 (2020-06-22)

Bug Fixes

• checkbox, radio: adds reflect property to keep sync of attributes and properties (57bd15e)

2.2.2 (2020-06-19)

Bug Fixes

• tabs: add customizations for color (96bfac0)

2.2.1 (2020-06-17)

Bug Fixes

• tab: fixes rendering when props of fw-tab is changed (4d6a7f3)

2.2.0 (2020-06-17)

Bug Fixes

• tabs: re-render on attribute change in fw-tab (cc53bd4)

Features

• tabs: added disable and tabHeaderHtml capability (4ec6be8)

2.1.1 (2020-05-27)

Bug Fixes

• select.tsx, select.scss: fixed UI bugs for next line input (151671d)

2.1.0 (2020-05-22)

Bug Fixes

• tabs: react to changes within fw-tabs (c1fe804)
• month Year Dropdown (8ac0322)
• select component default value fix (7be93c5)
• style and default value fix (dda833f)

Features

• datepicker: adding Datepicker component (9208e76)

2.0.5 (2020-05-22)

Bug Fixes

• tabs: react to changes within fw-tabs (c1fe804)

2.0.5 (2020-05-19)

Bug Fixes

• tabs: react to changes within fw-tabs (cbd2895)

2.0.4 (2020-05-07)

Bug Fixes

• textarea: fixes default textarea width to be 100% (b475c35), closes #30

2.0.3 (2020-05-06)

Bug Fixes

• select: fixes select (93cea4f)

2.0.2 (2020-05-06)

Bug Fixes

• select: fixes error and warning css for select (c9739fe), closes #74

2.0.1 (2020-05-06)

Bug Fixes

• select: fixes Select bug that caused fwChange not to be fired for last multi-select option (650c205), closes #68

2.0.0 (2020-05-06)

Documentation

• documents (42055c2)

BREAKING CHANGES

• documents

1.1.0 (2020-04-29)

Features

• fw-select-options, fw-select, fw-tag: added 'disabled' state to fw-select options (d15eb0f)

1.0.1 (2020-04-15)

Bug Fixes

• tabs: fixes initial render for Tabs component (7ffe365)

1.0.0 (2020-04-15)

Bug Fixes

• tab, tabs: fixes querying nested components (0f7e9e2)

Reverts

• reverting Tokens (e2f2b9a)