freshworks / crayons Goto Github PK

View Code? Open in Web Editor NEW

197.0 22.0 57.0 47.3 MB

🖍️ Crayons - A UI Kit comprising of web components for building Freshworks Apps!

Home Page: https://crayons.freshworks.com

JavaScript 2.86% HTML 7.18% TypeScript 74.11% Vue 1.63% Handlebars 0.08% Stylus 0.07% SCSS 10.71% Shell 0.05% MDX 3.30%

web-components stenciljs stenciljs-components uikit ui-components freshworks crayons components frontend ui

crayons's People

Contributors

Stargazers

Watchers

Forkers

dgonzalezr velmurugan-balasubramanian lax0248917 ashwin-sundararajan arpancodes narendran-kannan existentialcoder meenakshisundaram-ms b-barry teiger313 akshay9677 codingram lokprakash-babu kaidisn julzmon kulkarni-kashyap cjreysayago arvind6353 arvindanta chavikram chris-blesson mani-rsg isabella232 shiwangi20 mdaslam86 devp619 ndrohith09 santhoshbalusamy suryaumapathy2812 anand-gopinath sujith-gunasekaran namslay26 vangakirankumarreddy kirankumarrr cristianstanciu itskdaniel unagigd aditya-ayare karunalladeva mariappan-subramanian prasanna-vijayan quintonjason kunal-singhh maccesch develop-build octodemo drcoolsanjeev madhan028 harshith-venkatesh-freshworks zwgirl jeevanthedev ndp keerthipremchandar zazamilham dipanshu-create shebertd

crayons's Issues

fw-select

Note: A trimmed-down version of ion-select. Pl. share your inputs/corrections.fw-select-option is indicated by the green box. Refer #9

Properties

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`

fwChange event not working when we remove the last option in multiselect (fw-select)

Steps to reproduce the issues

Create a multi-select dropdown using fw-select.
Listen to the fwChange event.
When you remove the last option from the dropdown, the event is not firing.

fw-timepicker

It is a sub-component of the date-time picker. Its aimed to have the following custom properties.

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`

[Enhancement] - Ability to id and class to fw-select-option

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.

[Bug] - fwChange event handler function attached to fw-tabs is being fired for fw-select as well

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

fw-select-option

SelectOption is a component that is a child element of fw-select.

Properties

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`	`''`

[Feature Request] - Adding a collapse component

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.

More details:
Screenshots taken from Bootstrap 4:

Tab container and click event

When fw-tabs is used along with other controls, this behavior is noted. The tab collapses if a click occurs in any region that the tag encloses

I am able to reach the controls by using tab key to toggle

Input fields validation

Input fields are doesn't have any validations, apart from default HTML ones

[Feature Request] - Support for forms

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.

[Enhancement] - Add freshwork product logos in fw-icon

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.

Dropdown value is not displayed after choosing option value

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:

Go to https://crayons.freshworks.com/components/dropdown-button/#usage
Click on any dropdown and choose the value
The value will not replace the label of fw-dropdown-button

Expected behavior
After choosing the value in the dropdown the value must be changed to new one.

Screenshots

fw-input

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.

Properties

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`	`''`

Events

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>`

Methods

`getInputElement() => Promise<HTMLInputElement>`

Returns the native <input> element used under the hood.

Returns

Type: Promise<HTMLInputElement>

`setFocus() => Promise<void>`

Sets focus on the specified ion-input. Use this method instead of the global
input.focus().

Returns

Type: Promise<void>

CSS Custom Properties

N.A

[Bug] - Tag does not get disabled

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

[Enhancement] - Introduce disabled prop to dropdown button

Description of the enhancement:
Introduce disabled prop to dropdown button

[Enhancement] - Provision to set fw-button with Loading state

Description of the enhancement:
fw-button - Add loading state with spinner inside fw-button

Describe the solution you'd like

add new attribute for loading state, w/o text,
if that attribute is enabled then disable the button and show the spinner inside of the button.

eg:

[Enhancement] - Introduce autofocus props for input, text area and select

Description of the enhancement:
Introduce autofocus for input, select and textarea

The automated release is failing 🚨

🚨 The automated release from the `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.

The 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:

chore(release): 2.0.1 [skip ci] (0731d72)
fix(select): fixes Select bug that caused fwChange not to be fired for last multi-select option (2313678)
chore(release): 2.0.0 [skip ci] (9eee41b)
docs(readme.md): updated Bleeding edge version (f6e302e)
docs(readmd.md, contributing.md): updated Docs content (36182d0)
docs(contributing): contributing (f30ac84)
docs(readme): readme (22aa041)
docs: documents (0ca7e64)
added Contributing.md (43720d4)
chore(release): 1.1.0 [skip ci] (5e8e150)
feat(fw-select-options, fw-select, fw-tag): added 'disabled' state to fw-select options (044304d)
ci(check.yml, main.yml, .realeaserc): changes the repo to have multibranch for better maintainance (c44b35b)
ci: fixed Invalidation problems (31d0698)
docs: fixed base path for Docs (a791dbc)

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 📦🚀

fw-datepicker

Reference:
https://freshworks.invisionapp.com/dsm/freshworks/freshworks/folder/components/5c68fa78fb26bb0018554084

Date range picker - should allow date and date range selection and date range input field.
Will use fw-input.

Properties

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'

Events

Event	Description	Type
fwChange	Emitted start/end date selection change	customEvent

[Bug] - Unable to render html in select dropdown

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.

[Enhancement] - Option to hide the increment and decrement counter for fw-input if the type is number

Description of the enhancement:

Provide a option to hide the increment and decrement counter for fw-input type="number"

[Enhancement] - Edit Documentation and Markdown files for Grammer, Spelling, Typos, and Uniformity

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 CONTRIBUTING.md

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

Unable to set Input field 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

text area default size

Text area default size is different for input box default size, so when the app loads it looks awkward

fw-icon search color is not changing

Component
fw-icon
name = "search"

Describe the bug
search icon color is not changing

To Reproduce
Use the following line:
<fw-icon name="search" color="white"></fw-icon>

Icon Colors are getting changing except for search icon

Screenshots

[Enhancement] - add maximumSelectionLength on multiselect select box

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

[Bug] : fw-timepicker value set

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:

Create a fw-timepicker component in the HTML with a value attribute set to a time.
The timepicker renders but without any time set.

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.

Screenshots

Additional context
https://community.developers.freshworks.com/t/issues-in-fw-timepicker-crayons-ui/788

The automated release is failing 🚨

🚨 The automated release from the `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.

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.

The 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:

fix: style and default value fix (6046c28)
fix: select component default value fix (6f01d9c)
fix: month Year Dropdown (51b2124)
feat(datepicker): adding Datepicker component (2596656)
docs(readme): changed docs build (6dd1010)
docs(readme): changed docs (d269103)
docs(readme files, icongallery): fixed documentation for All components and IconGallery style change (cc8c7eb)
docs(icon): adds listing of icons in docs (87a1221)

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 📦🚀

[Feature Request] - Dropdown button

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/

More details:

Properties

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	''

Events

Event	Description	Type
fwOptionClick	Emitted on selecting an option	customEvent
fwOptionsAdd	Emitted on adding options (`Add` button click)	customEvent

Sample HTML

<fw-button dropdown split> Select OTT 
  <span id="1" value="netflix"> Netflix </span>
  <span id="2" value="amazon"> Amazon </span>
</fw-button>

Unable to query element inside TAB

Unable to query an element inside the tab component using Jquery. as a result, couldn't target the element and apply styles

[Bug] - Datepicker not closing when clicked outside of the popup

Component
Datepicker

Describe the bug
Datepicker is not closing when clicked outside of the popup.

To Reproduce
Steps to reproduce the current behavior:

Go to 'https://crayons.freshworks.com/components/datepicker/#usage'
Click on 'Single date picker input box'
Once the popup is opened, click outside of the popup
Popup is not closing

Expected behavior
When clicked outside of the popup, it should be closed.

Screenshots
https://share.vidyard.com/watch/oKP1WniWeWB6X6iHhfiXp7?

[Bug] - Nesting tabs is not working

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

[Enhancement] - Improve keyboard accessibility for components.

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.

[Feature Request] - Toast component to toast error, info messages

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

Description:

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.

Properties

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

Events

Event	Description	Type
fwLinkClick	Emitted on action link click	customEvent

Usage

<fw-toast type="failure" sticky="false" timeout="5000"></fw-toast>

document.querySelector('fw-toast').trigger({type:'success',content:'Saved Successfully'});

[Bug] - input, text are component disabled state text are not visible

Component

input
text-area

Describe the bug

Color of the text and background color crashed so text not visible in disabled state

To Reproduce
Steps to reproduce the current behaviour:

Enter some text in component and make the component disabled

[Bug] - Issue with applying margin to button component

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.

error/warning state in fw-select is not reflecting the color.

[Enhancement] - Set Values to fw-select with mulitple option.

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.

[Bug] - Placeholder is not hidden when we selected an item in multi-select element

Component
fw-select

Describe the bug
Placeholder is not hidden when the value selected.

To Reproduce

Expected behavior
the placeholder should be hidden when the value is selected and show the placeholder only if the value is not selected.

Screenshots

[Feature Request] - Modals

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

Access for Icon assets

I guess its a minor s3 config ?

https://static.freshdev.io/freshworks-ui-kit/assets/icons/create.svg

[Bug] - Unable to see my login fields because of the updated UI kit in Freshdesh. Check screenshot

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:

Go to 'Apps'
Click on 'Settings of Twilio App'
Try to 'install the App'
See the login fields.

Expected behavior
Username and password field should be visible.

Screenshots

[Bug] - fwChange event for fwTabs

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.

[Bug] - fw-icon doesn't work in a Vue application

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

Include component in the vue app
Icon component is not displayed
Go to networks tab and search for the icon name ( e.g add-contact if the html you included is <fw-icon name="add-contact" size="18" color="green"></fw-icon>)
This line tries to fetch from that current server and does not return svg, probably because of ionic-team/stencil#2269

Expected behavior
Icon should be displayed

Screenshots

[Enhancement] - Expose `text` in fw-select

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

[Bug] - Radio Group values are not selected if it is disabled

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.

Screenshots

To Reproduce
Steps to reproduce the current behavior:

Set <fw-select values="[1,2,3]"

Expected behavior
1,2,3 values should be selected, but not

Screenshots

Additional context
Add any other context about the bug here.

freshworks / crayons Goto Github PK

crayons's People

Contributors

Stargazers

Watchers

Forkers

crayons's Issues

fw-select

Properties

fw-timepicker

Properties

fw-select-option

Properties

fw-input

Properties

Events

Methods

getInputElement() => Promise<HTMLInputElement>

Returns

setFocus() => Promise<void>

Returns

CSS Custom Properties

🚨 The automated release from the master branch failed. 🚨

The release 2.0.0 on branch master cannot be published as it is out of range.

Properties

Events

Screenshots

🚨 The automated release from the master branch failed. 🚨

The release 2.1.0 on branch master cannot be published as it is out of range.

Properties

Events

Sample HTML

Description:

Properties

Events

Usage

Recommend Projects

Recommend Topics

Recommend Org

`getInputElement() => Promise<HTMLInputElement>`

`setFocus() => Promise<void>`

🚨 The automated release from the `master` branch failed. 🚨

The release `2.0.0` on branch `master` cannot be published as it is out of range.

🚨 The automated release from the `master` branch failed. 🚨

The release `2.1.0` on branch `master` cannot be published as it is out of range.