Skip to content

Commit

Permalink
Use container param in gr.Markdown (#9356)
Browse files Browse the repository at this point in the history
* * add param
* add story

* add changeset

* Use IconButton for copy btn

* fix test

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
  • Loading branch information
hannahblair and gradio-pr-bot authored Sep 16, 2024
1 parent 50c3a7f commit 1daf259
Show file tree
Hide file tree
Showing 5 changed files with 21 additions and 37 deletions.
6 changes: 6 additions & 0 deletions .changeset/chatty-houses-do.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@gradio/markdown": minor
"gradio": minor
---

feat:Use `container` param in `gr.Markdown`
3 changes: 3 additions & 0 deletions gradio/components/markdown.py
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ def __init__(
max_height: int | str | None = None,
min_height: int | str | None = None,
show_copy_button: bool = False,
container: bool = False,
):
"""
Parameters:
Expand All @@ -71,6 +72,7 @@ def __init__(
max_height: The maximum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If markdown content exceeds the height, the component will scroll. If markdown content is shorter than the height, the component will shrink to fit the content. Will not have any effect if `height` is set and is smaller than `max_height`.
min_height: The minimum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If markdown content exceeds the height, the component will expand to fit the content. Will not have any effect if `height` is set and is larger than `min_height`.
show_copy_button: If True, includes a copy button to copy the text in the Markdown component. Default is False.
container: If True, the Markdown component will be displayed in a container. Default is False.
"""
self.rtl = rtl
if latex_delimiters is None:
Expand All @@ -95,6 +97,7 @@ def __init__(
render=render,
key=key,
value=value,
container=container,
)

def preprocess(self, payload: str | None) -> str | None:
Expand Down
3 changes: 2 additions & 1 deletion js/markdown/Index.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
export let min_height: number | string | undefined;
export let max_height: number | string | undefined;
export let show_copy_button = false;
export let container = false;
$: label, gradio.dispatch("change");
</script>
Expand All @@ -43,7 +44,7 @@
{visible}
{elem_id}
{elem_classes}
container={false}
{container}
allow_overflow={true}
overflow_behavior="auto"
{height}
Expand Down
5 changes: 3 additions & 2 deletions js/markdown/Markdown.stories.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,11 @@ in two separate lines.`
/>

<Story
name="Markdown with Copy Button"
name="Markdown with Copy Button and Container"
args={{
value:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.",
show_copy_button: true
show_copy_button: true,
container: true
}}
/>
41 changes: 7 additions & 34 deletions js/markdown/shared/Markdown.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
import { createEventDispatcher } from "svelte";
import { copy } from "@gradio/utils";
import { Copy, Check } from "@gradio/icons";
import { IconButton, IconButtonWrapper } from "@gradio/atoms";
import MarkdownCode from "./MarkdownCode.svelte";
import { fade } from "svelte/transition";
export let elem_classes: string[] = [];
export let visible = true;
Expand Down Expand Up @@ -62,19 +62,13 @@
style={height ? `max-height: ${css_units(height)}; overflow-y: auto;` : ""}
>
{#if show_copy_button}
{#if copied}
<button
in:fade={{ duration: 300 }}
aria-label="Copied"
aria-roledescription="Text copied"><Check /></button
>
{:else}
<button
<IconButtonWrapper>
<IconButton
Icon={copied ? Check : Copy}
on:click={handle_copy}
aria-label="Copy"
aria-roledescription="Copy text"><Copy /></button
>
{/if}
label={copied ? "Copied conversation" : "Copy conversation"}
></IconButton>
</IconButtonWrapper>
{/if}
<MarkdownCode
message={value}
Expand Down Expand Up @@ -111,25 +105,4 @@
.hide {
display: none;
}
button {
display: flex;
position: absolute;
top: -10px;
right: -10px;
align-items: center;
box-shadow: var(--shadow-drop);
border: 1px solid var(--color-border-primary);
border-top: none;
border-right: none;
border-radius: var(--block-label-right-radius);
background: var(--block-label-background-fill);
padding: 5px;
width: 22px;
height: 22px;
overflow: hidden;
color: var(--block-label-color);
font: var(--font-sans);
font-size: var(--button-small-text-size);
}
</style>

0 comments on commit 1daf259

Please sign in to comment.