add inline option to label

Author: haschek

CHANGELOG.md

@@ -19,7 +19,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   implemented support for `disabled` state in code editor
     -   implemented support for `intent` states in code editor
 -   `Label` component
-    -   added `additionalElements` property to display elements at the end of the label
+    -   `additionalElements` property to display elements at the end of the label
+    -   `inline` property to display the label component as inline block
 -   `<NodeContent />`
     -   `resizeDirections` to specifiy the axis that can be used to resize the node
     -   `resizeMaxDimensions` to add maximum values for resizing height/width

src/components/Label/Label.tsx

@@ -39,6 +39,8 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
      * Add other elements to the end of the label content
      */
     additionalElements?: React.ReactNode | React.ReactNode[];
+    /** Force label to get displayed as inline block element. */
+    inline?: boolean;
 }
 
 export const Label = ({
@@ -52,6 +54,7 @@ export const Label = ({
     isLayoutForElement = "label",
     emphasis = "normal",
     additionalElements,
+    inline,
     ...otherLabelProps
 }: LabelProps) => {
     let htmlElementstring = isLayoutForElement;
@@ -85,6 +88,7 @@ export const Label = ({
                 className:
                     `${eccgui}-label ${eccgui}-label--${emphasis}` +
                     (className ? " " + className : "") +
+                    (inline ? ` ${eccgui}-label--inline` : "") +
                     (disabled ? ` ${eccgui}-label--disabled` : ""),
                 ...otherLabelProps,
             },

src/components/Label/label.scss

@@ -8,7 +8,6 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
     font-size: $eccgui-size-typo-label;
     line-height: $eccgui-size-typo-label-lineheight;
     color: $eccgui-color-label-text;
-    vertical-align: middle;
 
     .#{$eccgui}-typography__overflowtext--passdown > & {
         display: flex;
@@ -17,6 +16,11 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
     }
 }
 
+.#{$eccgui}-label--inline {
+    display: inline-block;
+    vertical-align: middle;
+}
+
 .#{$eccgui}-label--disabled {
     opacity: $eccgui-opacity-disabled;
 }