mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-01-30 11:00:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Change BlockLabel element to use <label> (#5864)

Browse Source 
* refactor: change to label tag where label property is accepted by component

BlockLabel is being used as the main component for labels and should address the issue reported in Chat and File component

closes issue 5454

* add changeset

* fix: A form label must be associated with a control.

* Update js/atoms/src/BlockLabel.svelte

Co-authored-by: Hannah <hannahblair@users.noreply.github.com>

* add changeset

* add changeset

* fix: refactor use label tag instead of div tag
Change CSS styles from div to label selector in BlockLabel

* fix: A form label must be associated with a control

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Hannah <hannahblair@users.noreply.github.com>
This commit is contained in:
Aileen Villanueva Lecuona 2023-10-12 05:13:03 -06:00 committed by GitHub
parent ead265c1b9
commit e70805d54c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/salty-donuts-hear.md Normal file
View File

@ -0,0 +1,6 @@
---
"@gradio/atoms": minor
"gradio": minor
---
feat:Change `BlockLabel` element to use `<label>`

14
js/atoms/src/BlockLabel.svelte
View File

@ -6,7 +6,8 @@
export let float = true;
</script>
<div
<label
for=""
class:hide={!show_label}
class:sr-only={!show_label}
class:float
@ -16,12 +17,11 @@
<span>
<Icon />
</span>
{label}
</div>
</label>
<style>
div {
label {
display: inline-flex;
align-items: center;
z-index: var(--layer-2);
@ -38,16 +38,16 @@
font-size: var(--block-label-text-size);
line-height: var(--line-sm);
}
:global(.gr-group) div {
:global(.gr-group) label {
border-top-left-radius: 0;
}
div.float {
label.float {
position: absolute;
top: var(--block-label-margin);
left: var(--block-label-margin);
}
div:not(.float) {
label:not(.float) {
position: static;
margin-top: var(--block-label-margin);
margin-left: var(--block-label-margin);