From 29bac9bcdc0b95d4a6a4da2b4f503aa9494d7bcb Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 29 Oct 2024 15:33:18 +0530 Subject: [PATCH] polish fixes --- .../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 +- .../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/app/client/packages/design-system/ads/src/SegmentedControl/SegmentedControl.styles.tsx b/app/client/packages/design-system/ads/src/SegmentedControl/SegmentedControl.styles.tsx index 9ab6f42ab00f..d3578c22ba7c 100644 --- a/app/client/packages/design-system/ads/src/SegmentedControl/SegmentedControl.styles.tsx +++ b/app/client/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/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css index 317b00c820ba..95c1532aedfb 100644 --- a/app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css +++ b/app/client/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/app/client/packages/design-system/widgets/src/components/Markdown/src/mdComponents/Code.tsx b/app/client/packages/design-system/widgets/src/components/Markdown/src/mdComponents/Code.tsx index b5683b1e4164..e4f4fb3c3775 100644 --- a/app/client/packages/design-system/widgets/src/components/Markdown/src/mdComponents/Code.tsx +++ b/app/client/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/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css index 9d930398df89..ba0ff15e28f0 100644 --- a/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css +++ b/app/client/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/app/client/packages/design-system/widgets/src/components/Markdown/stories/Markdown.stories.ts b/app/client/packages/design-system/widgets/src/components/Markdown/stories/Markdown.stories.ts index 08eec4fe8bba..4f00c9834fb4 100644 --- a/app/client/packages/design-system/widgets/src/components/Markdown/stories/Markdown.stories.ts +++ b/app/client/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/app/client/src/components/propertyControls/IconTabControl.tsx b/app/client/src/components/propertyControls/IconTabControl.tsx index 9facf3e4cc92..e253941d5234 100644 --- a/app/client/src/components/propertyControls/IconTabControl.tsx +++ b/app/client/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/app/client/src/layoutSystems/anvil/common/styles.module.css b/app/client/src/layoutSystems/anvil/common/styles.module.css index 7a39ba004975..17cb02727103 100644 --- a/app/client/src/layoutSystems/anvil/common/styles.module.css +++ b/app/client/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/app/client/src/modules/ui-builder/ui/wds/Container.tsx b/app/client/src/modules/ui-builder/ui/wds/Container.tsx index 67132176fd4c..5cc6af34e545 100644 --- a/app/client/src/modules/ui-builder/ui/wds/Container.tsx +++ b/app/client/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; }