Fix button and text widgets.

app/client/src/components/designSystems/blueprint/ButtonComponent.tsx

@@ -42,6 +42,11 @@ const ButtonWrapper = styled((props: ButtonStyleProps & IButtonProps) => (
     font-weight: ${props => props.theme.fontWeights[2]};
     font-family: "DM Sans";
     outline: none;
+    && .bp3-button-text {
+      max-width: 90%;
+      max-height: 90%;
+      overflow: hidden;
+    }
     &&:hover,
     &&:focus {
       ${ButtonColorStyles};
@@ -127,7 +132,7 @@ const ButtonContainer = (props: ButtonContainerProps & ButtonStyleProps) => {
       className={props.isLoading ? "bp3-skeleton" : ""}
       icon={props.icon}
       text={props.text}
-      filled={props.buttonStyle === "PRIMARY_BUTTON"}
+      filled={props.buttonStyle !== "SECONDARY_BUTTON"}
       accent={mapButtonStyleToStyleName(props.buttonStyle)}
       onClick={props.onClick}
       disabled={props.disabled}

app/client/src/components/designSystems/blueprint/TextComponent.tsx

@@ -12,22 +12,41 @@ type TextStyleProps = {
 
 export const BaseText = styled(Text)<TextStyleProps>``;
 
+/*
+  Note:
+  -webkit-line-clamp may seem like a wierd way to doing this
+  however, it is getting more and more useful with more browser support.
+  It suffices for our target browsers
+  More info: https://css-tricks.com/line-clampin/
+*/
+export const StyledText = styled(Text)<{ lines: number }>`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: ${props => props.lines};
+  overflow: hidden;
+`;
+
 export interface TextComponentProps extends ComponentProps {
   text?: string;
   ellipsize?: boolean;
   textStyle?: TextStyle;
   isLoading: boolean;
+  lines: number;
 }
 
 class TextComponent extends React.Component<TextComponentProps> {
   getTextClass(textStyle?: TextStyle) {
-    let className = this.props.isLoading ? "bp3-skeleton " : "";
+    const className = [];
+
+    if (this.props.isLoading) {
+      className.push("bp3-skeleton");
+    }
     switch (textStyle) {
       case "HEADING":
-        className += Classes.TEXT_LARGE;
+        className.push(Classes.TEXT_LARGE);
         break;
       case "BODY":
-        className += Classes.TEXT_SMALL;
+        className.push(Classes.RUNNING_TEXT);
         break;
       case "LABEL":
         break;
@@ -35,18 +54,22 @@ class TextComponent extends React.Component<TextComponentProps> {
         break;
     }
 
-    return className;
+    return className.join(" ");
   }
 
   render() {
     const { textStyle, text, ellipsize } = this.props;
     return (
-      <Text className={this.getTextClass(textStyle)} ellipsize={ellipsize}>
+      <StyledText
+        className={this.getTextClass(textStyle)}
+        ellipsize={ellipsize}
+        lines={this.props.lines}
+      >
         <Interweave
           content={text}
           matchers={[new UrlMatcher("url"), new EmailMatcher("email")]}
         />
-      </Text>
+      </StyledText>
     );
   }
 }

app/client/src/widgets/TextWidget.tsx

@@ -5,6 +5,14 @@ import TextComponent from "components/designSystems/blueprint/TextComponent";
 import { VALIDATION_TYPES } from "constants/WidgetValidation";
 import { WidgetPropertyValidationType } from "utils/ValidationFactory";
 
+const LINE_HEIGHTS: { [key in TextStyle]: number } = {
+  // The following values are arrived at by multiplying line-height with font-size
+  BODY: 1.5 * 14,
+  HEADING: 1.28581 * 16,
+  LABEL: 1.28581 * 14,
+  SUB_TEXT: 1.28581 * 12,
+};
+
 class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
   static getPropertyValidationMap(): WidgetPropertyValidationType {
     return {
@@ -13,7 +21,14 @@ class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
     };
   }
 
+  getNumberOfLines() {
+    const height = (this.props.bottomRow - this.props.topRow) * 40;
+    const lineHeight = LINE_HEIGHTS[this.props.textStyle];
+    return Math.floor(height / lineHeight);
+  }
+
   getPageView() {
+    const lines = this.getNumberOfLines();
     return (
       <TextComponent
         widgetId={this.props.widgetId}
@@ -21,6 +36,7 @@ class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
         textStyle={this.props.textStyle}
         text={this.props.text}
         isLoading={this.props.isLoading}
+        lines={lines}
       />
     );
   }