chore: chat widget polish fixes (#37124)

- [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"

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## 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.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11571964148>
> Commit: 29bac9b
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11571964148&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Tue, 29 Oct 2024 10:51:44 UTC
<!-- end of auto-generated comment: Cypress test results  -->

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;

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);
 }
 

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<HTMLElement> &
   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) => {
       </SyntaxHighlighter>
     </div>
   ) : (
-    <code {...rest} className={className}>
-      {children}
-    </code>
+    <code className={className}>{children}</code>
   );
 };
 

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);

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
 

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;
   }
 `;
 

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);
   }

app/client/src/modules/ui-builder/ui/wds/Container.tsx

@@ -29,6 +29,7 @@ export function ContainerComponent(props: ContainerComponentProps) {
     <StyledContainerComponent
       className={`${generateClassName(props.widgetId)}`}
       data-elevation={props.elevatedBackground}
+      data-no-padding={props.noPadding}
       elevatedBackground={props.elevatedBackground}
       elevation={props.elevation}
     >
@@ -42,4 +43,5 @@ export interface ContainerComponentProps {
   children?: ReactNode;
   elevation: Elevations;
   elevatedBackground: boolean;
+  noPadding?: boolean;
 }