Readonly boolean 2

[jgroth]

Suggestions for improvements for #2747

• The private component is public, renamed to limel-label to make it reusable in other scenarios
• Changed the interface of the component, can now take other values and not only booleans
• Changed the interface of the ReadonlyProps, the Label interface now represents a single label with a value, text and icon

[github-actions]

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-2853/

[Kiarokh]

we should also remember to reword the commit title

[jgroth]

Everything is fixups to your commits and targets your branch 😄

[Kiarokh]

🤔 these don't seem to work for true, the default ones are being used

[jgroth]

cc42437

[Kiarokh]

Screen.Recording.2024-03-26.at.11.55.03.mov

these seem to work in a weird way for limel-switch. You have to toggle the selected state for them to work

[jgroth]

cc42437

[Kiarokh]

Screen.Recording.2024-03-26.at.11.57.24.mov

[jgroth]

cc42437

[Kiarokh]

Suggested change

	tag: 'limel-label',
	tag: 'limel-dynamic-label',

[jgroth]

055a500
c820820
ef70fe8

[Kiarokh]

To me this description is unclear:

If no matching label is found, the default label will be displayed.

[jgroth]

4acef8b

[Kiarokh]

I can't say that I read these docs and understand what these props do 😅
Even when I look at the code, I am still confused. But the consumer only sees the props' description in the generated docs. So the docs should make it clear what these props do.

I tried to improve the docs like below:

Suggested change

	/**
	* The value of the component.
	*
	* The value will be matched with the given labels to determine what label
	* to display
	*/
	@Prop({ reflect: true })
	public value: LabelValue;
	/**
	* Default label to display if no label with corresponding value is found
	*/
	@Prop({ reflect: true })
	public defaultLabel: Omit<Label, 'value'> = {};
	/**
	* Available labels
	*/
	@Prop()
	public labels: Label[] = [];
	/**
	* The current value of the component;
	* which is used to match with the `labels` array to determine the label to display.
	* If no matching label is found, the `defaultLabel` is displayed.
	*/
	@Prop({ reflect: true })
	public value: LabelValue;
	/**
	* The label to display when no matching value is found in the `labels` array.
	* This is a fallback label that ensures there's always a label displayed for the component.
	*/
	@Prop({ reflect: true })
	public defaultLabel: Omit<Label, 'value'> = {};
	/**
	* An array of available labels. Each label in this array has a corresponding value.
	* When the `value` prop matches a value in this array, the corresponding label is displayed.
	*/
	@Prop()
	public labels: Label[] = [];

However, I am still unsatisfied and confused 😕 .

What if we rename the component to limel-dynamic-label and then we can rename the props like these:

Suggested change

	/**
	* The value of the component.
	*
	* The value will be matched with the given labels to determine what label
	* to display
	*/
	@Prop({ reflect: true })
	public value: LabelValue;
	/**
	* Default label to display if no label with corresponding value is found
	*/
	@Prop({ reflect: true })
	public defaultLabel: Omit<Label, 'value'> = {};
	/**
	* Available labels
	*/
	@Prop()
	public labels: Label[] = [];
	/**
	* The current value of the component;
	* which is used to match with the `dynamicLabels` array to determine the label to display.
	* If no matching label is found, the `label` is displayed.
	*/
	@Prop({ reflect: true })
	public value: LabelValue;
	/**
	* The label to display when no matching value is found in the `dynamicLabels` array.
	* This is a fallback label that ensures there's always a label displayed for the component.
	*/
	@Prop({ reflect: true })
	public label: Omit<Label, 'value'> = {};
	/**
	* An array of available labels which can be dynamically applied based on the given value.
	* Each label in this array will have to have a corresponding value.
	* When the `value` prop matches a value in this array,
	* the corresponding label is dynamically displayed.
	*/
	@Prop()
	public dynamicLabels: Label[] = [];

A bit better. But what do you think?

[jgroth]

I updated the descriptions but did not change the names

bc895e2

[Kiarokh]

I'm OK if you wanna squash all these and merge them into my branch. I think we can continue from there more easily.

[jgroth]

We can't squash them here easily, lets just merge it to the other branch first

[Kiarokh]

sure. I just mean things are OK from my perspective