Addition of missing components

[dhruvkb]

While Vocabulary has a sizeable collection of components now, it is still far far away from being exhaustive. There are tons of components that need to be developed and this issue will serve to keep a track of components that have been proposed and are being worked on.

This is a discussion thread that will mark all components that have been requested by the community of users.

To request a component, just open a Markdown checkbox with the name of the component. Upvotes (:+1:) and downvotes (:-1:) will determine whether the component must be developed and once developed and merged, it will be checked off.

Example request would contain something like - [ ] Component X which renders like

• [ ] Component X

You can and should also add some description, mock-ups or links to other libraries that provide this component.

[dhruvkb]

• [ ] Slider

The slider could be single value or range selector.

References:

• Carbon Design System
• Ant Design

[dhruvkb]

• [ ] Label/Tag/Chip

The tag should also have a price-tag appearance variant.

References:

• Material Design
• Semantic UI

[dhruvkb]

Referencing comment, the InputField component with the attribute type="range" serves as a single value slider. The double value range selection slider remains to be developed.

[dhruvkb]

• [ ] Popup/Tooltip

The popup must have a choice of opening direction. Attention must be paid to the slight difference between a popover and a tooltip in terms of interactivity.

This would be helpful to address #21.

References:

• Ant Design
• Semantic UI

[hamzanouali]

@dhruvkb , I can create these missing components, you have suggested three components which are essentials and exists in most UI libraries and Frameworks.

[dhruvkb]

@HAMZABoxer98 sure, go ahead and pick one component that you would like to build. Do upload mockups and screenshots of the stylistic variants before coding the components.

[hamzanouali]

Simple Popup/ Tooltip.

[dhruvkb]

Looks good @HAMZABoxer98. Do remember to also develop inverted, rounded and simplistic variants.

[dhruvkb]

@rashadmad if you're looking for a quick introduction to Vocabulary, you could try building one of the components listed above other than those already being developed by someone else.

[rashadmad]

great I am going to make a slider component. This should get my feet wet. Should I use story book to make the component.

[dhruvkb]

@rashadmad that's swell. For now, none of the components have their stories in the storybook, so you can skip it. Develop just the Styleguidist documentation using a Markdown file named Component.md, similar to the other components.

[hamzanouali]

I would suggest:

• [ ] Dropdown

The dropdown could accept hover/ click events and should be attached to its first parent element automatically without any extra configurations.. we should be able to place the Dropdown inside any HTML or CC-Vocabulary elements.

References: https://ant.design/components/dropdown

[hamzanouali]

@dhruvkb , I'd like to work on Label/Tag/Chip.

[dhruvkb]

@HAMZABoxer98 looking forward to your designs!

[hamzanouali]

@dhruvkb I can improve it more, can I go ahead ?

[dhruvkb]

@HAMZABoxer98 this looks amazing! Can you also add a price-tag type of variant?

[hamzanouali]

one like this ? I've found this on codeopen ( it's not mine ).

[dhruvkb]

Yeah, @HAMZABoxer98 like that, although you'll likely need to tweak it to fit in with the rest of your tag designs.

[hamzanouali]

@dhruvkb , this is mine.

[rashadmad]

• [ ] Slider

The slider could be single value or range selector.

References:

• Carbon Design System
• Ant Design

Do you want this to just be a double slider or possibly allow users to set how many inputs that they want for the slider? For example if some one were to want up to four sliders?

[dhruvkb]

@rashadmad two sliders to select a range are the minimum requirement so that someone is able to select a min-max range out of a larger range.

I don't see a use-case for more than two sliders. Do you have examples or possible use-cases?

[rashadmad]

alright just 2 sliders then.

On Wed, Oct 16, 2019 at 12:57 AM Dhruv Bhanushali notifications@github.com wrote:

@rashadmad https://github.com/rashadmad two sliders to select a range are the minimum requirement so that someone is able to select a min-max range out of a larger range.

[image: image] https://user-images.githubusercontent.com/16580576/66891881-c9a54680-f007-11e9-9238-3299dfd85eea.png

I don't see a use-case for more than two sliders. Do you have examples or possible use-cases?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativecommons/cc-vocabulary/issues/7?email_source=notifications&email_token=ABKCOHEHEIKSCXF73NTFYC3QO2UMFA5CNFSM4IJDXWPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBLGC3I#issuecomment-542531949, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABKCOHEROZBGGDVGZVJGHZLQO2UMFANCNFSM4IJDXWPA .

--

---

Striving to be better every day

[rashadmad]

does this slider need to look exactly like the other one?

On Wed, Oct 16, 2019 at 10:55 AM Rashad Madison rashadmad@gmail.com wrote:

alright just 2 sliders then.

On Wed, Oct 16, 2019 at 12:57 AM Dhruv Bhanushali < notifications@github.com> wrote:

@rashadmad https://github.com/rashadmad two sliders to select a range are the minimum requirement so that someone is able to select a min-max range out of a larger range.

[image: image] https://user-images.githubusercontent.com/16580576/66891881-c9a54680-f007-11e9-9238-3299dfd85eea.png

I don't see a use-case for more than two sliders. Do you have examples or possible use-cases?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativecommons/cc-vocabulary/issues/7?email_source=notifications&email_token=ABKCOHEHEIKSCXF73NTFYC3QO2UMFA5CNFSM4IJDXWPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBLGC3I#issuecomment-542531949, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABKCOHEROZBGGDVGZVJGHZLQO2UMFANCNFSM4IJDXWPA .

--

---

Striving to be better every day

--

---

Striving to be better every day

[rashadmad]

also should I just add the 2 slider functionality to the input field that is already there.

On Wed, Oct 16, 2019 at 5:15 PM Rashad Madison rashadmad@gmail.com wrote:

does this slider need to look exactly like the other one?

On Wed, Oct 16, 2019 at 10:55 AM Rashad Madison rashadmad@gmail.com wrote:

alright just 2 sliders then.

On Wed, Oct 16, 2019 at 12:57 AM Dhruv Bhanushali < notifications@github.com> wrote:

@rashadmad https://github.com/rashadmad two sliders to select a range are the minimum requirement so that someone is able to select a min-max range out of a larger range.

[image: image] https://user-images.githubusercontent.com/16580576/66891881-c9a54680-f007-11e9-9238-3299dfd85eea.png

I don't see a use-case for more than two sliders. Do you have examples or possible use-cases?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativecommons/cc-vocabulary/issues/7?email_source=notifications&email_token=ABKCOHEHEIKSCXF73NTFYC3QO2UMFA5CNFSM4IJDXWPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBLGC3I#issuecomment-542531949, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABKCOHEROZBGGDVGZVJGHZLQO2UMFANCNFSM4IJDXWPA .

--

---

Striving to be better every day

--

---

Striving to be better every day

--

---

Striving to be better every day

[dhruvkb]

@rashadmad make it as close to the <input>-type slider as you can. You can make it another component like RangeInput.

[rashadmad]

alright

On Wed, Oct 16, 2019 at 10:41 PM Dhruv Bhanushali notifications@github.com wrote:

@rashadmad https://github.com/rashadmad make it as close to the -type slider as you can. You can make it another component like RangeInput.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativecommons/cc-vocabulary/issues/7?email_source=notifications&email_token=ABKCOHDHGELPLZIRW6ZFJ5TQO7NGHA5CNFSM4IJDXWPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBOUX4I#issuecomment-542985201, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABKCOHCFDXKBKZ3TWNBKJJTQO7NGHANCNFSM4IJDXWPA .

--

---

Striving to be better every day

[rashadmad]

there is no label for the old one that is less a11y.

On Wed, Oct 16, 2019 at 10:48 PM Rashad Madison rashadmad@gmail.com wrote:

alright

On Wed, Oct 16, 2019 at 10:41 PM Dhruv Bhanushali < notifications@github.com> wrote:

@rashadmad https://github.com/rashadmad make it as close to the -type slider as you can. You can make it another component like RangeInput.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativecommons/cc-vocabulary/issues/7?email_source=notifications&email_token=ABKCOHDHGELPLZIRW6ZFJ5TQO7NGHA5CNFSM4IJDXWPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBOUX4I#issuecomment-542985201, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABKCOHCFDXKBKZ3TWNBKJJTQO7NGHANCNFSM4IJDXWPA .

--

---

Striving to be better every day

--

---

Striving to be better every day

[dhruvkb]

The label has been left to the application to implement. We can only provide the field after all.

[rashadmad]

I am still new to vue. As of right now I am working on the slider in a separate repo and wanted to know if there is a way to view the app in side of the vocabulary app? It want to implement the mixins.

On Thu, Oct 17, 2019 at 1:55 AM Dhruv Bhanushali notifications@github.com wrote:

The label has been left to the application to implement. We can only provide the field after all.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativecommons/cc-vocabulary/issues/7?email_source=notifications&email_token=ABKCOHGTQBKHVUPK7YX74BDQPAD5FA5CNFSM4IJDXWPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBPAVKI#issuecomment-543034025, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABKCOHG3SI23OVAHDY6QAA3QPAD5FANCNFSM4IJDXWPA .

--

---

Striving to be better every day

[hamzanouali]

@rashadmad , I understand that you want to test your component on the browser, you can run: npm run serve:website then import your component and use it inside App.vue.

[rashadmad]

The slider already created does not have any output, does the double range slider need an output.

On Thu, Oct 17, 2019 at 11:05 AM Hamza Nouali notifications@github.com wrote:

@rashadmad https://github.com/rashadmad , I understand that you want to test your component on the browser, you can run: npm run serve:website then import your component and use it inside App.vue.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativecommons/cc-vocabulary/issues/7?email_source=notifications&email_token=ABKCOHC5PXQ2HD4KRQDR7XDQPCEL3A5CNFSM4IJDXWPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBQUPMA#issuecomment-543246256, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABKCOHBHHHNOZGRYESBUE5DQPCEL3ANCNFSM4IJDXWPA .

--

---

Striving to be better every day

[dhruvkb]

@rashadmad the output needs to be provided to the application using it by means of v-model (which is a shorthand for value and @input).

[rashadmad]

Oh yeah I understand that, what I was talking about is for the range slider here already on vocabulary has no number output.

So when it comes to the double range slider will it also not need a number output? When I say number output I mean like in the second image where there are numbers displayed next to the slider. The first image is vocabulary the second is my slider.

On Fri, Oct 18, 2019 at 12:53 PM Dhruv Bhanushali notifications@github.com wrote:

@rashadmad https://github.com/rashadmad the output needs to be provided to the application using it by means of v-model (which is a shorthand for value and @input).

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativecommons/cc-vocabulary/issues/7?email_source=notifications&email_token=ABKCOHEGJOHUID44JP5X67LQPHZZHA5CNFSM4IJDXWPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBVKOMI#issuecomment-543860529, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABKCOHHKX4KGYVC4N53YMTLQPHZZHANCNFSM4IJDXWPA .

--

---

Striving to be better every day

[dhruvkb]

@rashadmad which images are you referring to? I can't seem to find any images in the discussion.

[rashadmad]

I attached them. if you cant see them on github maybe your email.

On Fri, Oct 18, 2019 at 4:57 PM Dhruv Bhanushali notifications@github.com wrote:

@rashadmad https://github.com/rashadmad which images are you referring to? I can't seem to find any images in the discussion.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativecommons/cc-vocabulary/issues/7?email_source=notifications&email_token=ABKCOHCPR3OKXBWJBLWMMJLQPIWM5A5CNFSM4IJDXWPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBWFJLQ#issuecomment-543970478, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABKCOHFF3V6TWQYS6GEWFWLQPIWM5ANCNFSM4IJDXWPA .

--

---

Striving to be better every day

[dhruvkb]

@rashadmad I don't get emails from GitHub, which I assume would be the case for a lot of people. Could you post them on the thread using the web interface?

[rashadmad]

@rashadmad I don't get emails from GitHub, which I assume would be the case for a lot of people. Could you post them on the thread using the web interface?

I had been contacting you totally through my email.

Oh yeah I understand that, what I was talking about is for the range slider here already on vocabulary has no number output. So when it comes to the double range slider will it also not need a number output? When I say number output I mean like in the second image where there are numbers displayed next to the slider. The first image is vocabulary the second is my slider. … On Fri, Oct 18, 2019 at 12:53 PM Dhruv Bhanushali @.***> wrote: @rashadmad https://github.com/rashadmad the output needs to be provided to the application using it by means of v-model (which is a shorthand for value and @input). — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7?email_source=notifications&email_token=ABKCOHEGJOHUID44JP5X67LQPHZZHA5CNFSM4IJDXWPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBVKOMI#issuecomment-543860529>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABKCOHHKX4KGYVC4N53YMTLQPHZZHANCNFSM4IJDXWPA .

___ Striving to be better every day

[dhruvkb]

@rashadmad there is no need for the component to display the output range, returning them programmatically should be enough, letting the users pick their way to output/use the range.

[hamzanouali]

• [ ] File Uploader

Upload file by selecting or dragging, should also allow preview of files such as images before actually uploading to the server.

References:

• Buefy
• Ant Design

[dhruvkb]

Against the time picker because we have

<input type="time">

Examples:

• W3Schools

[hamzanouali]

@dhruvkb , what about the slider we already have it ?

[dhruvkb]

To add to https://github.com/creativecommons/cc-vocabulary/issues/7#issuecomment-544122455 the uploader should also allow preview of files such as images before actually uploading to the server.

[dhruvkb]

@dhruvkb , what about the slider we already have it ?

We have a single input slider using

<input type="range">

but no double input slider for selecting upper and lower bound of range. @rashadmad is currently developing the double input slider.

[hamzanouali]

@dhruvkb , I deleted Time Picker suggestion.

[dhruvkb]

Against the date picker because we have

<input type="date">

[dhruvkb]

These replacements for standard input types do not offer any advantage over their native counterparts.

[hamzanouali]

@dhruvkb , do you have other suggestions or that's enough ?

[dhruvkb]

There will be more components added, which is why this issue is tagged discussion: rfc. If anyone finds a useful component that Vocabulary does not provide, they can post it here.

[dhruvkb]

• [ ] Skeleton

References:

• Geist Design
• Placeholder

[dhruvkb]

• [ ] Spinner

While FontAwesomeIcon components can be made to spin, having a Spinner component ensures consistent colors, sizes and most importantly a constant icon.