freshworks / crayons Goto Github PK
View Code? Open in Web Editor NEW🖍️ Crayons - A UI Kit comprising of web components for building Freshworks Apps!
Home Page: https://crayons.freshworks.com
🖍️ Crayons - A UI Kit comprising of web components for building Freshworks Apps!
Home Page: https://crayons.freshworks.com
Description of the enhancement:
Provide a option to hide the increment and decrement counter for fw-input type="number"
Note: A trimmed-down version of ion-input. Pl. share your inputs/corrections.
Input states
https://freshworks.invisionapp.com/dsm/freshworks/freshworks/folder/components/5c68fa78fb26bb0018554077
Wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input.
It is meant for text type
inputs only, such as "text"
, "password"
, "email"
, "number"
, "search"
, "tel"
, and "url"
. It supports all standard text input events including keyup, keydown, keypress, and more.
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
autocomplete |
autocomplete |
Indicates whether the value of the control can be automatically completed by the browser. | boolean |
false |
clearInput |
clear-input |
If true , a clear icon will appear in the input when there is a value. Clicking it clears the input. |
boolean |
false |
state |
state |
Changes styling based on state - information, warning. default etc. | string | undefined |
undefined |
disabled |
disabled |
If true , the user cannot interact with the input. |
boolean |
false |
maxlength |
maxlength |
maximum number of characters that the user can enter. | number | undefined |
undefined |
minlength |
minlength |
minimum number of characters that the user can enter. | number | undefined |
undefined |
stateText |
state-text |
The state text refers to the message below the input element. | string |
undefined |
label |
label |
Label for the input | string |
'' |
type |
type |
The type of control to display. The default type is text. | "number" | "password" | "text" |
'text' |
name |
name |
The name of the control, which is submitted with the form data. | string |
this.inputId |
placeholder |
placeholder |
Instructional text that shows before the input has a value. | null | string | undefined |
undefined |
readonly |
readonly |
If true , the user cannot modify the value. |
boolean |
false |
required |
required |
If true , the user must fill in a value before submitting a form. |
boolean |
false |
value |
value |
The value of the input. | null | string | undefined |
'' |
Event | Description | Type |
---|---|---|
fwBlur |
Emitted when the input loses focus. | CustomEvent<void> |
fwChange |
Emitted when the value has changed. | CustomEvent<InputChangeEventDetail> |
fwFocus |
Emitted when the input has focus. | CustomEvent<void> |
fwInput |
Emitted when a keyboard input ocurred. | CustomEvent<KeyboardEvent> |
getInputElement() => Promise<HTMLInputElement>
Returns the native <input>
element used under the hood.
Type: Promise<HTMLInputElement>
setFocus() => Promise<void>
Sets focus on the specified ion-input
. Use this method instead of the global
input.focus()
.
Type: Promise<void>
N.A
Input fields are doesn't have any validations, apart from default HTML ones
Description of the enhancement:
Introduce autofocus for input, select and textarea
Component
fw-tabs
Describe the bug
Creating nested tabs ie., child tab under a parent tab shows the child tab both as a child tab and also in the same level as the parent.
To Reproduce
Steps to reproduce the current behavior:
Run the below code
<fw-tabs id="outertab"> <fw-tab tab-header="outertab"> <fw-tabs id="inner tab"> <fw-tab tab-header="innertab"></fw-tab> </fw-tabs> </fw-tab> </fw-tabs>
Expected behavior
The child tab shouldn't be shown parallel to the parent tab.
Screenshots
SelectOption is a component that is a child element of fw-select.
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
disabled |
disabled |
If true , the user cannot interact with the select option. |
boolean |
false |
selected |
selected |
If true , the element is selected. |
boolean |
false |
value |
value |
The text value of the option. | string |
'' |
key |
key |
The key of the option. | string |
'' |
icon |
icon |
URL for icon | URL |
'' |
Describe the functionality of the new component:
Toast component that follows the Freshworks Design system
More details:
https://xd.adobe.com/view/a8299f86-4d90-40f9-4d23-7dc26f9266e3-de18/screen/682d63fb-750d-4462-b44c-3d6b1f347236/
[Edit] - @sathishkumar-thangavel
Toast component used to toast the success/failure/warning messages for span of few seconds or with close button. This is used to alert the user without completely disrupt the user workflow.
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
type | type | toast message type(success/error/warning/inprogress) | string | warning |
timeout | timeout | duration to show message(in ms) | number | 2000 |
content | content | message to be displayed | string | none |
actionLinkText | action-link-text | message of action link | string | none |
sticky | sticky | won't close automatically | boolean | false |
pauseOnHover | pause-on-hover | toast will not be closed while hovering | Boolean | true |
position | position | position of the toast in screen(top-center/top-left/top-right) | string | top-center |
Event | Description | Type |
---|---|---|
fwLinkClick | Emitted on action link click | customEvent |
<fw-toast type="failure" sticky="false" timeout="5000"></fw-toast>
document.querySelector('fw-toast').trigger({type:'success',content:'Saved Successfully'});
when select field values are set programmatically, it doesn't display the values in the HTML but when fetched in javascript it returns the value also in the dropdown it shows selected with the tick mark
Note: A trimmed-down version of ion-select. Pl. share your inputs/corrections.fw-select-option is indicated by the green box. Refer #9
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
disabled |
disabled |
If true , the user cannot interact with the select. |
boolean |
false |
multiple |
multiple |
If true , the select can accept multiple values. |
boolean |
false |
name |
name |
The name of the control, which is submitted with the form data. | string |
this.inputId |
placeholder |
placeholder |
The text to display when the select is empty. | null | string | undefined |
undefined |
selectedKey |
selected-key |
The key of the option to be selected | null | string | undefined |
undefined |
required |
required |
indicate that it is a mandatory field | boolean |
false |
Date range picker - should allow date and date range selection and date range input field.
Will use fw-input.
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
startDate | start-date | from date of range | date | none |
endDate | end-date | to date of range | date | none |
minDate | min-date | earliest date user can select | date | none |
maxDate | max-date | latest date user can select | date | none |
mode | mode | to show (single date/range) | String | single date |
dateFormat | date-format | displaying date format | string | DD-MM-YYYY |
dateValue | date-value | the selected date value in single date mode | date | none |
placeholder | placeholder | Placeholder of input field | string | 'Select Date' or 'Select Date Range' |
Event | Description | Type |
---|---|---|
fwChange | Emitted start/end date selection change | customEvent |
Component
Radio Group
Describe the bug
if the Radio buttons are disabled in the radio group, predefined values are not selected.
To Reproduce
<fw-radio-group name="Profile" value="au" allow-empty>
<fw-radio value="au" disabled>Auditory</fw-radio>
<fw-radio value="vi" disabled>Visual</fw-radio>
<fw-radio value="re" disabled>Restless</fw-radio>
</fw-radio-group>
Expected behavior
value au should be selected by default.
Component
fw-tabs and fw-select
Describe the bug
Both fw-tabs and fw-select has the event fwChange.
When a change happens in fw-select, the event handler function attached for fw-tabs is being fired.
Even if the fw-select has it's on function attached.
To Reproduce
<html>
<body>
<fw-tabs id='tabs-settings'>
<fw-tab tab-header="Tab 1">
<fw-select id="slt-numbers">
<fw-select-option value="1">Test</fw-select-option>
</fw-select>
</fw-tab>
</fw-tabs>
</body>
</html>
$(document).ready(function () {
app.initialized().then(function (_client) {
$("#tabs-settings").on("fwChange", fwTabsOnChange);
$("#slt-numbers").on("fwChange", fwSelectOnChange);
});
});
function fwSelectOnChange() {
console.log("fwSelectOnChange")
}
function fwSelectOnChange() {
console.log("fwSelectOnChange")
}
When selecting an item in the fw-select, both event handler functions are fired.
Expected behavior
fw-select should not fire the event handler function attached to fw-tabs
Component
fw-button
Describe the bug
Refer to the problem: https://community.developers.freshworks.com/t/apply-css-properties-in-crayons-components/1241
Expected behavior
Button should adapt to margin CSS set.
master
branch failed. 🚨I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here is some links that can help you:
If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.
2.1.0
on branch master
cannot be published as it is out of range.Based on the releases published on other branches, only versions within the range >=2.0.4 <2.0.5
can be published from branch master
.
The following commits are responsible for the invalid release:
Those commits should be moved to a valid branch with git merge or git cherry-pick and removed from branch master
with git revert or git reset.
A valid branch could be next
.
See the workflow configuration documentation for more details.
Good luck with your project ✨
Your semantic-release bot 📦🚀
Text area default size is different for input box default size, so when the app loads it looks awkward
Component
fw-timepicker
Describe the bug
I’m facing issues with setting values (time) in the Crayons time picker.
According to the documentation, “value” does seem to be an allowed property to use for rendering a timepicker with a set date, but this doesn’t seem to work. It is required to access the shadowRoot of the component to set the values.
To Reproduce
Steps to reproduce the current behavior:
Expected behavior
The timepicker is expected to be rendered with the time set in the value attribute of the component. The component must also be available for setting time using Javascript.
Additional context
https://community.developers.freshworks.com/t/issues-in-fw-timepicker-crayons-ui/788
error/warning state in fw-select is not reflecting the color.
Steps to reproduce the issues
Description
Collapse - Used to toggle the visibility of content
Use Case
Lets say a website shows a list of recipes. When a user selects a recipe, the ingredients of that recipe will be visible to the user.
It is similar to Tabs but the only difference is that tabs will always show content of a tab by default.
Description of the enhancement:
For a disabled multi-select fw-select
, the user can still modify the value since the fw-tag used is not disabled
Describe the solution you'd like
Tag also should get disabled
Description of the enhancement:
It would be great if product logos of Freshdesk, Freshsales, Freshservice etc., I found only icons for Freshchat and Freshconnect being present.
Description of the enhancement:
Adding an additional method to the <fw-select> </fw-select>
component. In order to set values for fw-select
component with multiple
property, we need a out of box method from FW. Currently, we are manipulating the value of the select element using array methods and re-rendering the fw-select
component to DOM.
Describe the solution you'd like
We would like to have a method to set values to fw-select
component. Like getSelectedItem() => Promise<any>
available for extract values.
when Input field values are set programmatically, it doesn't display the values in the HTML but when fetched in javascript it returns the value
Component
Describe the bug
To Reproduce
Steps to reproduce the current behaviour:
Component
fw-icon
Describe the bug
Icon component does not work in Vue app( or anywhere else I guess! ), since it tries to fetch the icon.svg from the current web app and from the component library
To Reproduce
add-contact
if the html you included is <fw-icon name="add-contact" size="18" color="green"></fw-icon>
)Expected behavior
Icon should be displayed
I guess its a minor s3 config ?
https://static.freshdev.io/freshworks-ui-kit/assets/icons/create.svg
Description of the enhancement:
Requesting the ability to add class and id to fw-select-option, just like in fw-select.
Describe the solution you'd like
I would just like to be able to add id and class to the fw-select-option as I want to trigger changes to that particular dropdown option based on certain conditions. (For example, having two dropdown boxes, and disabling the option, which has been selected in the first dropdown box, in the second dropdown box.)
Functionality like this: As you can see that I have selected status in the first dropdown, it has been disabled in the second dropdown. This can be achieved if i can add classes and id to the fw-select-option.
Component
Datepicker
Describe the bug
Datepicker is not closing when clicked outside of the popup.
To Reproduce
Steps to reproduce the current behavior:
Expected behavior
When clicked outside of the popup, it should be closed.
Screenshots
https://share.vidyard.com/watch/oKP1WniWeWB6X6iHhfiXp7?
Description of the enhancement:
fw-input if the type is number provision to add min and max value to the input
Describe the solution you'd like
attribute to specify min/max value to the fw-input if the type is number
Describe the functionality of the new component:
Confirm modal box according to the Design system
https://xd.adobe.com/view/a8299f86-4d90-40f9-4d23-7dc26f9266e3-de18/screen/71c10a5a-1e4e-4c49-a214-94e100c329e6/
More details:
https://freshworks-nucleus.netlify.app/docs/components/nucleus-modal
Component
fw-select-option
Describe the bug
Unable to render html in as a drop-down choice. The html-content value is .
As per the documentation the choice displayed must be a right arrow. However, the choice was not displayed. Further, using the unicode value in the html to display the right arrow also didnt seem to work.
To Reproduce
Steps to reproduce the current behavior:
Use the below code and render:
<fw-select name="syncType" label="Sync Setting" required placeHolder="Choose the type of sync"> <fw-select-option value="fd_sf" html html-content="<fw-icon name="arrow-right">"></fw-select-option> </fw-select>
Expected behavior
Html content must be displayed as the choice label.
Component
fwTabs
Describe the bug
The fwChange event for fwTabs is being fired twice and before the tab is fully shown. So I can't get the current activeTabIndex property.
To Reproduce
Steps to reproduce the current behavior:
<body>
<fw-tabs id="tabs">
<fw-tab tab-header="Tab1"></fw-tab>
<fw-tab tab-header="Tab2"></fw-tab>
</fw-tabs>
<body>
<script>
var client;
$(document).ready(function () {
app.initialized().then(
function (_client) {
client = _client;
$("#tabs").on("fwChange", fwTabChange);
},
function (error) {
console.error(error);
}
);
});
function fwTabChange(evt) {
console.log($("#tabs").attr("active-tab-index"));
}
<script>
Changing tabs will result in two outputs in the console with the previous tab index.
Expected behavior
Event should be fired once and after the tab is fully shown, so getting the activeTabIndex would returns the current index.
Description of the enhancement:
A clear and concise description of what the enhancement is. Ex. Adding an additional property to a component, adding a specific validation on a component, Requesting a new event on a component [...]
Describe the solution you'd like
A clear and concise description of what has to happen. It can be validated by the repository maintainers and voted by the contributors.
Description of the enhancement:
For components: checkbox, date picker, radio, Select. It would be wonderful if we could add keyboard navigation as well. Eg tick checkbox on entering, navigating Select dropdown list with keyboard and entering etc...
It would improve usability as well.
Describe the solution you'd like
Add keyboard watch events and when element active and key pressed, modify the component states.
It is a sub-component of the date-time picker. Its aimed to have the following custom properties.
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
minTime |
min-time |
Start time of the time picker. Should be based on the hour format if mentioned | String |
12:00 AM |
maxTime |
max-time |
End time of the time picker. Should be based on the hour format if mentioned | String |
11:30 PM |
format |
format |
The hour format for the times (hh:mm A/HH:mm) | String |
hh:mm A |
interval |
interval |
The time interval between distinct times in minutes | String |
30 |
Describe the functionality of the new component:
The HTML form tag does go well with the existing crayons components. A mapping ie., field mapping is generated dynamically from the schema/fields present in the source and destination accounts. However, on form submit the ".serialize()" function doesn't give the form data. So, all the elements of the form have to be iterated to fetch the form data.
It will be great if "fw-form" web component is provided in the crayons.
Description of the enhancement:
Introduce disabled
prop to dropdown button
Unable to query an element inside the tab component using Jquery. as a result, couldn't target the element and apply styles
Description of the enhancement:
I would love to begin contributing by proofreading and editing the documentation and markdown files for typos, spelling mistakes, grammatical errors, and word uniformity
Describe the solution you'd like
Clear and concise communication is key in documentation. This will help alleviate any confusion, offer a uniformed document, and present a professional and finished product for the developer community.
ex. Found in Documentation for Checkbox (one spelled "checkbox" the other "check box")
None of these are huge issues, but I am new to open source and I see this as a great way for me to get involved.
Thank you
-Zach
Describe the functionality of the new component:
A dropdown button according to the Design system found in
https://xd.adobe.com/view/a8299f86-4d90-40f9-4d23-7dc26f9266e3-de18/screen/eb6930f3-3b16-49ee-9aaa-3dbc780e7154/
This will be part of fw-button itself
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
dropdown | dropdown | dropdown button or not | Boolean | false |
split | split | Whether to split dropdown or not. Invalid if dropdown is false | Boolean | false |
searchable | searchable | Whether the dropdown button should be searchable. Invalid if dropdown is false | Boolean | false |
value | value | Selected options | Array | undefined |
placeholder | placeholder | Placeholder for search input | String | '' |
Event | Description | Type |
---|---|---|
fwOptionClick | Emitted on selecting an option | customEvent |
fwOptionsAdd | Emitted on adding options (Add button click) |
customEvent |
<fw-button dropdown split> Select OTT
<span id="1" value="netflix"> Netflix </span>
<span id="2" value="amazon"> Amazon </span>
</fw-button>
Component
Select
Describe the bug
Multi select doesn't set multiple values
To Reproduce
Steps to reproduce the current behavior:
Expected behavior
1,2,3 values should be selected, but not
Screenshots
Additional context
Add any other context about the bug here.
master
branch failed. 🚨I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here is some links that can help you:
If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.
2.0.0
on branch master
cannot be published as it is out of range.Based on the releases published on other branches, only versions within the range >=1.0.1 <1.1.0
can be published from branch master
.
The following commits are responsible for the invalid release:
fwChange
not to be fired for last multi-select option (2313678)Those commits should be moved to a valid branch with git merge or git cherry-pick and removed from branch master
with git revert or git reset.
A valid branch could be next
.
See the workflow configuration documentation for more details.
Good luck with your project ✨
Your semantic-release bot 📦🚀
Description of the enhancement:
Currently, We are not able to set a maximum selection length on the multi-select element.
Describe the solution you'd like
need an attribute to set maximum selection length to restrict the selection on a multi-select element
by default, it is unlimited if we set that attribute then it should be restricted to the selection
Description of the enhancement:
Create a property to expose the selected Text for fw-select
.
Describe the solution you'd like
Currently, we only expose the value via the value
property. We can have another property called text
that exposes the selected text to the user.
https://crayons.freshworks.com/components/select/#properties
Component
Dropdown button (fw-dropdown-button)
Describe the bug
Usually after choosing the value from a dropdown, the value should display there. But in fw-dropdown-button, the value in option tag is not replaced the fw-dropdown-button label.
To Reproduce
Steps to reproduce the current behavior:
Expected behavior
After choosing the value in the dropdown the value must be changed to new one.
Describe the bug
Unable to see my login fields because of the updated UI kit in Freshdesh.
To Reproduce
Steps to reproduce the current behavior:
Expected behavior
Username and password field should be visible.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.