From fd35d7e611a102af7628374a3936a0708cb03385 Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Wed, 22 Nov 2023 17:37:40 +0530 Subject: [PATCH 1/2] feat: Added new icons and segmented control UI fix --- packages/design-system/src/Icon/Icon.provider.tsx | 15 +++++++++++++++ .../SegmentedControl/SegmentedControl.styles.tsx | 2 +- .../src/__assets__/icons/ads/braces.svg | 3 +++ .../src/__assets__/icons/ads/dashboard-line.svg | 3 +++ .../src/__assets__/icons/ads/queries.svg | 5 +++++ 5 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 packages/design-system/src/__assets__/icons/ads/braces.svg create mode 100644 packages/design-system/src/__assets__/icons/ads/dashboard-line.svg create mode 100644 packages/design-system/src/__assets__/icons/ads/queries.svg diff --git a/packages/design-system/src/Icon/Icon.provider.tsx b/packages/design-system/src/Icon/Icon.provider.tsx index ac3357093..17b2ed55d 100644 --- a/packages/design-system/src/Icon/Icon.provider.tsx +++ b/packages/design-system/src/Icon/Icon.provider.tsx @@ -938,6 +938,18 @@ const Box3LineIcon = importSvg( () => import("../__assets__/icons/ads/box-3-line.svg"), ); +const QueriesLineIcon = importSvg( + () => import("../__assets__/icons/ads/queries.svg"), +); + +const BracesLineIcon = importSvg( + () => import("../__assets__/icons/ads/braces.svg"), +); + +const DashboardLineIcon = importSvg( + () => import("../__assets__/icons/ads/dashboard-line.svg"), +); + import PlayIconPNG from "../__assets__/icons/control/play-icon.png"; function PlayIconPNGWrapper() { @@ -1217,6 +1229,9 @@ const ICON_LOOKUP = { "file-copy-2-line": FileCopy2Line, "box-3-line": Box3LineIcon, "apps-line": AppsLineIcon, + "queries-line": QueriesLineIcon, + "braces-line": BracesLineIcon, + "dashboard-line": DashboardLineIcon, billing: BillingIcon, binding: Binding, book: BookIcon, diff --git a/packages/design-system/src/SegmentedControl/SegmentedControl.styles.tsx b/packages/design-system/src/SegmentedControl/SegmentedControl.styles.tsx index 7716fa3dd..9ab6f42ab 100644 --- a/packages/design-system/src/SegmentedControl/SegmentedControl.styles.tsx +++ b/packages/design-system/src/SegmentedControl/SegmentedControl.styles.tsx @@ -23,7 +23,7 @@ export const StyledSegmentedControl = styled.div<{ border-radius: calc(var(--ads-v2-border-radius) + var(--ads-v2-spaces-1)); box-sizing: border-box; height: 32px; - width: ${({ isFullWidth }) => (isFullWidth ? "auto" : "max-content")}; + width: ${({ isFullWidth }) => (isFullWidth ? "100%" : "max-content")}; `; export const StyledSegment = styled.span` diff --git a/packages/design-system/src/__assets__/icons/ads/braces.svg b/packages/design-system/src/__assets__/icons/ads/braces.svg new file mode 100644 index 000000000..f1f268ff3 --- /dev/null +++ b/packages/design-system/src/__assets__/icons/ads/braces.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/design-system/src/__assets__/icons/ads/dashboard-line.svg b/packages/design-system/src/__assets__/icons/ads/dashboard-line.svg new file mode 100644 index 000000000..c0a187a04 --- /dev/null +++ b/packages/design-system/src/__assets__/icons/ads/dashboard-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/design-system/src/__assets__/icons/ads/queries.svg b/packages/design-system/src/__assets__/icons/ads/queries.svg new file mode 100644 index 000000000..ca5614375 --- /dev/null +++ b/packages/design-system/src/__assets__/icons/ads/queries.svg @@ -0,0 +1,5 @@ + + + + + From 154932d63b392a14ffac0ff22a4953eae61b7348 Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Wed, 22 Nov 2023 17:39:25 +0530 Subject: [PATCH 2/2] Create curly-waves-tease.md --- .changeset/curly-waves-tease.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/curly-waves-tease.md diff --git a/.changeset/curly-waves-tease.md b/.changeset/curly-waves-tease.md new file mode 100644 index 000000000..47770b239 --- /dev/null +++ b/.changeset/curly-waves-tease.md @@ -0,0 +1,5 @@ +--- +"@appsmithorg/design-system": patch +--- + +New icons segmented control width