Merge pull request #479 from appsmithorg/fixes/ads-v2

fix: Adsv2 fixes for release bugs
appsmithorg · May 25, 2023 · 0360b18 · 0360b18
2 parents cffefbc + c2c09b6
commit 0360b18
Show file tree

Hide file tree

Showing 18 changed files with 96 additions and 45 deletions.
diff --git a/.changeset/kind-pugs-dress.md b/.changeset/kind-pugs-dress.md
diff --git a/.changeset/silver-buckets-dress.md b/.changeset/silver-buckets-dress.md
diff --git a/.changeset/spicy-experts-fetch.md b/.changeset/spicy-experts-fetch.md
diff --git a/.changeset/angry-scissors-argue.md → .changeset/tame-donuts-enjoy.md b/.changeset/angry-scissors-argue.md → .changeset/tame-donuts-enjoy.md
@@ -3,4 +3,5 @@
 "@appsmithorg/design-system": patch
 ---
 
-fix: Adding default type for button
+fixes for - old toast, datepicker
+Added new icons for layout and js file
diff --git a/.changeset/tasty-ears-fly.md b/.changeset/tasty-ears-fly.md
diff --git a/packages/design-system-old/CHANGELOG.md b/packages/design-system-old/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @appsmithorg/design-system
 
+## 1.1.7
+
+### Patch Changes
+
+- [#473](https://github.com/appsmithorg/design-system/pull/473) [`6bc83fd4`](https://github.com/appsmithorg/design-system/commit/6bc83fd4b9f813a23ce062459b9761fc27f9be80) Thanks [@ankitakinger](https://github.com/ankitakinger)! - fix: Adding default type for button
+
+* [#452](https://github.com/appsmithorg/design-system/pull/452) [`0db333d2`](https://github.com/appsmithorg/design-system/commit/0db333d2bd1b0aca1f07120f61d77b2ee6b656bd) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix: issues with components
+
+- [#474](https://github.com/appsmithorg/design-system/pull/474) [`292c0168`](https://github.com/appsmithorg/design-system/commit/292c01685aac90a16ab7d95674e1247d3647b59f) Thanks [@ankitakinger](https://github.com/ankitakinger)! - fix: Updating CSS for tooltip to fix position shift issue
+
 ## 1.1.6
 
 ### Patch Changes

diff --git a/packages/design-system-old/package.json b/packages/design-system-old/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appsmithorg/design-system-old",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "This is the package for the Appsmith design system components",
   "module": "build/index.js",
   "types": "build/index.d.ts",

diff --git a/packages/design-system-old/src/Toast/index.tsx b/packages/design-system-old/src/Toast/index.tsx
@@ -71,18 +71,14 @@ const ToastBody = styled.div<{
 }>`
   width: ${(props) => props.width || "fit-content"};
   max-width: ${(props) => props.maxWidth || "264px"};
-  margin-left: auto;
   background: white;
-  padding: var(--ads-spaces-4) var(--ads-spaces-5);
   display: flex;
   align-items: center;
   justify-content: space-between;
   // Using word-break here, as overflow-wrap: anywhere
   // has no effect in safari
   word-break: break-word;
   overflow-wrap: anywhere;
-  border: 1px solid #CDD5DF;
-  border-radius: 4px !important;
 
   div > .${Classes.ICON} {
     cursor: auto;

diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @appsmithorg/design-system
 
+## 2.1.9
+
+### Patch Changes
+
+- [#473](https://github.com/appsmithorg/design-system/pull/473) [`6bc83fd4`](https://github.com/appsmithorg/design-system/commit/6bc83fd4b9f813a23ce062459b9761fc27f9be80) Thanks [@ankitakinger](https://github.com/ankitakinger)! - fix: Adding default type for button
+
+* [#471](https://github.com/appsmithorg/design-system/pull/471) [`41be8cec`](https://github.com/appsmithorg/design-system/commit/41be8cec952199bf116c33f896efd6aec22b1f80) Thanks [@ankitakinger](https://github.com/ankitakinger)! - fix: Updating the click action on input label to remove focus from input box
+
+- [#452](https://github.com/appsmithorg/design-system/pull/452) [`0db333d2`](https://github.com/appsmithorg/design-system/commit/0db333d2bd1b0aca1f07120f61d77b2ee6b656bd) Thanks [@tanvibhakta](https://github.com/tanvibhakta)! - fix: issues with components
+
+* [#476](https://github.com/appsmithorg/design-system/pull/476) [`db5bed71`](https://github.com/appsmithorg/design-system/commit/db5bed711fb2a7e944720bbc965f3a991705cf35) Thanks [@akash-codemonk](https://github.com/akash-codemonk)! - feat: add `overlayClassName` prop to the `Modal` component
+
+- [#474](https://github.com/appsmithorg/design-system/pull/474) [`292c0168`](https://github.com/appsmithorg/design-system/commit/292c01685aac90a16ab7d95674e1247d3647b59f) Thanks [@ankitakinger](https://github.com/ankitakinger)! - fix: Updating CSS for tooltip to fix position shift issue
+
 ## 2.1.7
 
 ### Patch Changes

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@appsmithorg/design-system",
-  "version": "2.1.9-alpha.0",
+  "version": "2.1.9",
   "description": "This is the package for the design system that powers the Appsmith platform",
   "module": "build/index.js",
   "types": "build/index.d.ts",

diff --git a/packages/design-system/src/DatePicker/DatePicker.tsx b/packages/design-system/src/DatePicker/DatePicker.tsx
@@ -155,18 +155,18 @@ function DatePickerHeader(props: DatePickerHeaderProps) {
   const endRange = endYear || getYear(new Date());
   const years = range(startRange, endRange + 1, 1);
   const months = [
-    "January",
-    "February",
-    "March",
-    "April",
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
     "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
   ];
 
   // TODO: Fix this, causing unexpected behavior
@@ -216,6 +216,7 @@ function DatePickerHeader(props: DatePickerHeaderProps) {
                 DatePickerCalenderClassName,
               )[0],
             }}
+            style={{ minWidth: "60px" }}
           >
             {months.map((month) => (
               <MenuItem
@@ -249,6 +250,7 @@ function DatePickerHeader(props: DatePickerHeaderProps) {
                 DatePickerCalenderClassName,
               )[0],
             }}
+            style={{ minWidth: "unset" }}
           >
             {years.map((year) => (
               <MenuItem

diff --git a/packages/design-system/src/Icon/Icon.provider.tsx b/packages/design-system/src/Icon/Icon.provider.tsx
@@ -180,6 +180,9 @@ import GithubFillIcon from "remixicon-react/GithubFillIcon";
 import PlayLineIcon from "remixicon-react/PlayLineIcon";
 import ThumbUpLineIcon from "remixicon-react/ThumbUpLineIcon";
 import ThumbDownLineIcon from "remixicon-react/ThumbDownLineIcon";
+import MenuFoldLineIcon from "remixicon-react/MenuFoldLineIcon";
+import MenuUnfoldLineIcon from "remixicon-react/MenuUnfoldLineIcon";
+import Layout5LineIcon from "remixicon-react/Layout5LineIcon";
 import { ReactComponent as CornerDownLeftLineIcon } from "../__assets__/icons/ads/corner-down-left-line.svg";
 import { ReactComponent as DragHandleIcon } from "../__assets__/icons/ads/app-icons/draghandler.svg";
 import { ReactComponent as BookLineIcon } from "../__assets__/icons/ads/book-open-line.svg";
@@ -323,6 +326,7 @@ import { ReactComponent as SkipLeftLineIcon } from "../__assets__/icons/ads/skip
 import { ReactComponent as WLineIcon } from "../__assets__/icons/ads/w-line.svg";
 import { ReactComponent as HLineIcon } from "../__assets__/icons/ads/h-line.svg";
 import { ReactComponent as ShowModalIcon } from "../__assets__/icons/ads/show-modal.svg";
+import { ReactComponent as JSYellowIcon } from "../__assets__/icons/ads/js-yellow.svg";
 
 function PlayIconPNGWrapper() {
   return (
@@ -589,6 +593,10 @@ const ICON_LOOKUP = {
   "play-line": PlayLineIcon,
   "thumb-up-line": ThumbUpLineIcon,
   "thumb-down-line": ThumbDownLineIcon,
+  "menu-fold": MenuFoldLineIcon,
+  "menu-unfold": MenuUnfoldLineIcon,
+  "layout-5-line": Layout5LineIcon,
+  "js-yellow": JSYellowIcon,
   billing: BillingIcon,
   binding: Binding,
   book: BookIcon,

diff --git a/packages/design-system/src/Link/Link.tsx b/packages/design-system/src/Link/Link.tsx
@@ -92,6 +92,7 @@ function Link(props: LinkProps) {
   ) : isExternal(rest.to) ? (
     // if the url passed is external
     <StyledAnchor
+      {...(linkProps as LinkProps)}
       className={clsx(LinkClassName, className)}
       href={rest.to}
       kind={rest.kind}

diff --git a/packages/design-system/src/Select/Select.stories.tsx b/packages/design-system/src/Select/Select.stories.tsx
@@ -804,7 +804,9 @@ OptionStory.argTypes = {
 const SelectSimpleTemplate: ComponentStory<typeof Select> = ({ ...args }) => {
   return (
     <Select {...args}>
-      <Option value="value 1">Option 1</Option>
+      <Option value="value 1">
+        Option one is a long option that should get ellipsis
+      </Option>
       <Option value="value 2">Option 2</Option>
       <Option value="value 3">Option 3</Option>
       <Option value="value 4">Option 4</Option>

diff --git a/packages/design-system/src/Select/styles.css b/packages/design-system/src/Select/styles.css
@@ -126,12 +126,12 @@
   /* top: ${({ size }) => (size === "sm" ? "" : "0")}; */
   height: 100%;
   width: 100%;
-  display: inline-flex;
-  align-items: center;
+  display: inline-block;
   box-sizing: border-box;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  line-height: 18px;
 }
 
 .ads-v2-select[data-size="sm"] > .rc-select-selector > .rc-select-selection-placeholder,

diff --git a/packages/design-system/src/Tooltip/Tooltip.stories.tsx b/packages/design-system/src/Tooltip/Tooltip.stories.tsx
@@ -120,6 +120,14 @@ const Template: ComponentStory<typeof Tooltip> = (args) => {
   );
 };
 
+/**
+ * TODO: Add this to documentation
+ * A disabled button will not trigger a tooltip because it doesn't recognise any actions, including a hover.
+ * To bypass this, simply wrap the disabled button with a span.
+ * @param args
+ * @constructor
+ */
+
 // eslint-disable-next-line react/function-component-definition
 const TemplateButton: ComponentStory<typeof Tooltip> = (args) => {
   return (