From 890c6df82e8a2b01e9fc882807b732d030e1d400 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 29 Oct 2024 16:21:54 +0530 Subject: [PATCH] chore: chat widget polish fixes (#37124) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - [x] Fix button variant control in the property pane #37005 - [x] elevatedBackground for chat should work the same as for statbox - [x] Markdown polishing. We need to fix lists, inline code, etc. Check how it works with a table. /ok-to-test tags="@tag.Anvil" ## Summary by CodeRabbit ## Release Notes - **New Features** - Introduced a new `noPadding` property for the `ContainerComponent`, allowing for conditional styling. - Enhanced styling for segmented controls and input components for improved visual clarity and responsiveness. - **Bug Fixes** - Refined CSS selectors for separators in segmented controls to improve visual representation. - **Style** - Adjusted styles for input groups and inline code elements for better alignment and visual feedback. - **Documentation** - Updated Storybook configuration for the `Markdown` component to reflect new formatting changes. > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 29bac9bcdc0b95d4a6a4da2b4f503aa9494d7bcb > Cypress dashboard. > Tags: `@tag.Anvil` > Spec: >
Tue, 29 Oct 2024 10:51:44 UTC --- .../src/SegmentedControl/SegmentedControl.styles.tsx | 4 +++- .../src/components/Input/src/styles.module.css | 2 +- .../components/Markdown/src/mdComponents/Code.tsx | 8 +++----- .../src/components/Markdown/src/styles.module.css | 6 ++++++ .../components/Markdown/stories/Markdown.stories.ts | 2 +- src/components/propertyControls/IconTabControl.tsx | 10 +++++++++- src/layoutSystems/anvil/common/styles.module.css | 12 ++++++------ src/modules/ui-builder/ui/wds/Container.tsx | 2 ++ 8 files changed, 31 insertions(+), 15 deletions(-) diff --git a/packages/design-system/ads/src/SegmentedControl/SegmentedControl.styles.tsx b/packages/design-system/ads/src/SegmentedControl/SegmentedControl.styles.tsx index 9ab6f42ab00f..d3578c22ba7c 100644 --- a/packages/design-system/ads/src/SegmentedControl/SegmentedControl.styles.tsx +++ b/packages/design-system/ads/src/SegmentedControl/SegmentedControl.styles.tsx @@ -77,7 +77,9 @@ export const StyledControlContainer = styled.div` /* Select all segments which is not a selected and last child */ /* seperator */ - &:not(:last-child):not([data-selected="true"]):after { + &:not(:last-child):not([data-selected="true"]):not( + :has(+ [data-selected="true"]) + ):after { content: ""; position: absolute; right: 0; diff --git a/packages/design-system/widgets/src/components/Input/src/styles.module.css b/packages/design-system/widgets/src/components/Input/src/styles.module.css index 317b00c820ba..95c1532aedfb 100644 --- a/packages/design-system/widgets/src/components/Input/src/styles.module.css +++ b/packages/design-system/widgets/src/components/Input/src/styles.module.css @@ -101,7 +101,7 @@ ); --icon-offset: calc((var(--input-height) - var(--icon-size)) / 2); - bottom: var(--icon-offset); + bottom: round(up, var(--icon-offset), 0.5px); right: var(--icon-offset); } diff --git a/packages/design-system/widgets/src/components/Markdown/src/mdComponents/Code.tsx b/packages/design-system/widgets/src/components/Markdown/src/mdComponents/Code.tsx index b5683b1e4164..e4f4fb3c3775 100644 --- a/packages/design-system/widgets/src/components/Markdown/src/mdComponents/Code.tsx +++ b/packages/design-system/widgets/src/components/Markdown/src/mdComponents/Code.tsx @@ -1,5 +1,5 @@ -import { Button, Flex, Text } from "@appsmith/wds"; import type { ExtraProps } from "react-markdown"; +import { Button, Flex, Text } from "@appsmith/wds"; import React, { useState, useCallback } from "react"; import { useThemeContext } from "@appsmith/wds-theming"; import { @@ -13,7 +13,7 @@ type CodeProps = React.ClassAttributes & ExtraProps; export const Code = (props: CodeProps) => { - const { children, className, ...rest } = props; + const { children, className } = props; const match = /language-(\w+)/.exec(className ?? ""); const theme = useThemeContext(); const [copied, setCopied] = useState(false); @@ -50,9 +50,7 @@ export const Code = (props: CodeProps) => { ) : ( - - {children} - + {children} ); }; diff --git a/packages/design-system/widgets/src/components/Markdown/src/styles.module.css b/packages/design-system/widgets/src/components/Markdown/src/styles.module.css index 9d930398df89..ba0ff15e28f0 100644 --- a/packages/design-system/widgets/src/components/Markdown/src/styles.module.css +++ b/packages/design-system/widgets/src/components/Markdown/src/styles.module.css @@ -95,6 +95,12 @@ overflow: auto; } + code:not(pre code) { + padding-inline: var(--inner-spacing-1); + background: var(--color-bg-accent-subtle); + border-radius: var(--border-radius-elevation-3); + } + pre { margin-top: var(--inner-spacing-4); margin-bottom: var(--inner-spacing-4); diff --git a/packages/design-system/widgets/src/components/Markdown/stories/Markdown.stories.ts b/packages/design-system/widgets/src/components/Markdown/stories/Markdown.stories.ts index 08eec4fe8bba..4f00c9834fb4 100644 --- a/packages/design-system/widgets/src/components/Markdown/stories/Markdown.stories.ts +++ b/packages/design-system/widgets/src/components/Markdown/stories/Markdown.stories.ts @@ -13,7 +13,7 @@ export const Default: Story = { args: { children: `# Hello, Markdown! -This is a paragraph with **bold** and *italic* text. +This is a \`paragraph\` with **bold** and *italic* text. ## Code Example diff --git a/src/components/propertyControls/IconTabControl.tsx b/src/components/propertyControls/IconTabControl.tsx index 9facf3e4cc92..e253941d5234 100644 --- a/src/components/propertyControls/IconTabControl.tsx +++ b/src/components/propertyControls/IconTabControl.tsx @@ -12,8 +12,16 @@ import { } from "utils/AppsmithUtils"; const StyledSegmentedControl = styled(SegmentedControl)` + &.ads-v2-segmented-control { + gap: 0; + } + > .ads-v2-segmented-control__segments-container { - flex: 1 1 0%; + flex: 1 1 auto; + } + + > .ads-v2-segmented-control__segments-container:has(.ads-v2-text) span { + padding: 0; } `; diff --git a/src/layoutSystems/anvil/common/styles.module.css b/src/layoutSystems/anvil/common/styles.module.css index 7a39ba004975..17cb02727103 100644 --- a/src/layoutSystems/anvil/common/styles.module.css +++ b/src/layoutSystems/anvil/common/styles.module.css @@ -7,15 +7,15 @@ */ .anvilWidgetWrapper { /** If a section,zone and card have elevation, then add padding */ - [data-elevation="true"][elevation="1"], - [data-elevation="true"][elevation="2"], - [data-elevation="true"][elevation="3"], + [data-elevation="true"][elevation="1"]:not([data-no-padding]), + [data-elevation="true"][elevation="2"]:not([data-no-padding]), + [data-elevation="true"][elevation="3"]:not([data-no-padding]), /** If a section has any zone with elevation, then add padding to all the zones that don't have elevation */ - [elevation="1"]:has([elevation="2"][data-elevation="true"]) [elevation="2"][data-elevation="false"], + [elevation="1"]:has([elevation="2"][data-elevation="true"]) [elevation="2"][data-elevation="false"]:not([data-no-padding]), /** If a section has any card with elevation, then add padding to all the cards that don't have elevation */ - [elevation="1"]:has([elevation="3"][data-elevation="true"]) [elevation="3"][data-elevation="false"], + [elevation="1"]:has([elevation="3"][data-elevation="true"]) [elevation="3"][data-elevation="false"]:not([data-no-padding]), /** If a zone has any card with elevation, then add padding to all the cards that don't have elevation,*/ - [elevation="2"]:has([elevation="3"][data-elevation="true"]) [elevation="3"][data-elevation="false"] { + [elevation="2"]:has([elevation="3"][data-elevation="true"]) [elevation="3"][data-elevation="false"]:not([data-no-padding]) { padding-block: var(--outer-spacing-3); padding-inline: var(--outer-spacing-3); } diff --git a/src/modules/ui-builder/ui/wds/Container.tsx b/src/modules/ui-builder/ui/wds/Container.tsx index 67132176fd4c..5cc6af34e545 100644 --- a/src/modules/ui-builder/ui/wds/Container.tsx +++ b/src/modules/ui-builder/ui/wds/Container.tsx @@ -29,6 +29,7 @@ export function ContainerComponent(props: ContainerComponentProps) { @@ -42,4 +43,5 @@ export interface ContainerComponentProps { children?: ReactNode; elevation: Elevations; elevatedBackground: boolean; + noPadding?: boolean; }