From 20670f65fb36d205638cc316f460df8c47a218ce Mon Sep 17 00:00:00 2001
From: smoti123 <mathis.michel@outlook.de>
Date: Tue, 25 Dec 2018 21:18:02 +0100
Subject: [PATCH 1/6] add basic TextField: SingleLine, disable, focus

---
 src/components/TextField/OfficeTextField.vue | 105 +++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 src/components/TextField/OfficeTextField.vue

diff --git a/src/components/TextField/OfficeTextField.vue b/src/components/TextField/OfficeTextField.vue
new file mode 100644
index 0000000..9ee844f
--- /dev/null
+++ b/src/components/TextField/OfficeTextField.vue
@@ -0,0 +1,105 @@
+<template>
+    <div :style="textFieldStyle" class="ms-TextField">
+        <div class="ms-TextField-wrapper">
+            <OfficeLabel>
+                {{label}}
+            </OfficeLabel>
+            <div :style="textFieldFieldGroupStyle" class="ms-TextField-fieldGroup">
+                <input
+                        :style="textFieldFieldStyle"
+                        @focus="focused = true"
+                        @blur="focused = false"
+                        @input="$emit('input', $event.target.value)"
+                        type="text"
+                        id="TextField"
+                        class="ms-TextField-field"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import {Component, Vue, Model, Prop} from "vue-property-decorator";
+    import OfficeLabel from "@/components/Label/OfficeLabel.vue";
+    @Component({
+        components: {OfficeLabel}
+    })
+    export default class OfficeTextField extends Vue {
+        @Model("input", {type: String}) private text!: string;
+
+        @Prop({type: Boolean}) private disabled!: boolean;
+        @Prop({type: String}) private label!: string;
+        private focused: boolean = false;
+
+        get textFieldStyle() {
+            const styles: any = {};
+
+            if (this.focused) {
+                styles.borderColor = "#0078d4";
+            }
+
+            return styles;
+        }
+
+        get textFieldFieldGroupStyle() {
+            const styles: any = {};
+
+            if (this.focused) {
+                styles.borderColor = "#0078d4";
+            }
+            if (this.disabled) {
+                styles.backgroundColor = "#f4f4f4";
+                styles.borderColor = "#f4f4f4";
+            }
+
+            return styles;
+        }
+
+        get textFieldFieldStyle() {
+            const styles: any = {};
+
+            if (this.disabled) {
+                styles.backgroundColor = "transparent";
+                styles.borderColor = "transparent";
+            }
+
+            return styles;
+        }
+    }
+</script>
+
+<style>
+    .ms-TextField {
+        position: relative;
+    }
+
+    /*
+    Only depends on underlined flag prop
+     */
+    .ms-TextField-wrapper {
+    }
+
+    .ms-TextField-fieldGroup {
+        border: 1px solid #a6a6a6;
+        background: #ffffff;
+        height: 32px;
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        position: relative;
+    }
+
+    .ms-TextField-field {
+        font-size: 14px;
+        border-radius: 0;
+        border: none;
+        background: transparent none;
+        color: #333333;
+        padding: 0 12px;
+        width: 100%;
+        min-width: 0;
+        text-overflow: ellipsis;
+        outline: 0;
+    }
+
+</style>

From 8790bd0fdcb1927247caa49fd42a26e1823ef077 Mon Sep 17 00:00:00 2001
From: smoti123 <mathis.michel@outlook.de>
Date: Tue, 25 Dec 2018 21:44:14 +0100
Subject: [PATCH 2/6] Update OfficeTextField.vue

only render label if set
---
 src/components/TextField/OfficeTextField.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TextField/OfficeTextField.vue b/src/components/TextField/OfficeTextField.vue
index 9ee844f..4cddb59 100644
--- a/src/components/TextField/OfficeTextField.vue
+++ b/src/components/TextField/OfficeTextField.vue
@@ -1,7 +1,7 @@
 <template>
     <div :style="textFieldStyle" class="ms-TextField">
         <div class="ms-TextField-wrapper">
-            <OfficeLabel>
+            <OfficeLabel v-if="!!label">
                 {{label}}
             </OfficeLabel>
             <div :style="textFieldFieldGroupStyle" class="ms-TextField-fieldGroup">

From eb24bc4dd9aa868f0f49e970ce8cf57126d15120 Mon Sep 17 00:00:00 2001
From: smoti123 <mathis.michel@outlook.de>
Date: Wed, 26 Dec 2018 20:51:51 +0100
Subject: [PATCH 3/6] Use new style format

---
 .../TextField/OfficeTextField.style.ts        | 137 ++++++++++++++++++
 src/components/TextField/OfficeTextField.vue  |  84 ++---------
 2 files changed, 146 insertions(+), 75 deletions(-)
 create mode 100644 src/components/TextField/OfficeTextField.style.ts

diff --git a/src/components/TextField/OfficeTextField.style.ts b/src/components/TextField/OfficeTextField.style.ts
new file mode 100644
index 0000000..6101500
--- /dev/null
+++ b/src/components/TextField/OfficeTextField.style.ts
@@ -0,0 +1,137 @@
+/*
+Taken from https://github.com/OfficeDev/office-ui-fabric-react on 26.12.2018 and slightly modified
+
+License:
+    Office UI Fabric React
+    Copyright (c) Microsoft Corporation
+    All rights reserved.
+    MIT License
+    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+    THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+    Note: Usage of the fonts and icons referenced in Office UI Fabric is subject to the terms listed at http://aka.ms/fabric-assets-license
+
+ */
+
+
+import {IStyle} from "@uifabric/merge-styles";
+
+export function getStyles(props: ITextFieldStylesProps): ITextFieldStyles {
+    const {disabled, focused} = props;
+    return {
+        root: [
+            "ms-TextField",
+            disabled && "is-disabled",
+            focused && "is-active",
+            {
+                position: 'relative',
+                selectors: {
+                    /*[HighContrastSelector]: {
+                        borderWidth: 2
+                    }*/
+                }
+            },
+            focused && {
+                borderColor: "#0078d4"
+            }
+        ],
+        wrapper: [
+            "ms-TextField-wrapper",
+        ],
+        fieldGroup: [
+            "ms-TextField-fieldGroup",
+            {
+                border: `1px solid #a6a6a6`,
+                background: "#ffffff",
+                height: 32,
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'stretch',
+                position: 'relative',
+                selectors: {
+                    ':hover': {
+                        selectors: {
+                           /* [HighContrastSelector]: {
+                                borderColor: 'Highlight'
+                            }*/
+                        }
+                    }
+                }
+            },
+            !focused &&
+            !disabled && {
+                selectors: {
+                    ':hover': {
+                        borderColor: "#333333"
+                    }
+                }
+            },
+            focused && {
+                borderColor: "#0078d4",
+                selectors: {
+                   /* [HighContrastSelector]: {
+                        borderWidth: 2,
+                        borderColor: 'Highlight'
+                    }*/
+                }
+            },
+            disabled && {
+                backgroundColor: "#f4f4f4",
+                borderColor: "#f4f4f4"
+            }
+        ],
+        field: [
+            "ms-TextField-wrapper",
+            {
+                fontSize: 14,
+                borderRadius: 0,
+                border: 'none',
+                background: 'none',
+                backgroundColor: 'transparent',
+                color: "#333333",
+                padding: '0 12px',
+                width: '100%',
+                minWidth: 0,
+                textOverflow: 'ellipsis',
+                outline: 0,
+                selectors: {
+                    '&:active, &:focus, &:hover': { outline: 0 },
+                    '::-ms-clear': {
+                        display: 'none'
+                    },
+                    '::placeholder': {
+                        color: "#666666",
+                        opacity: 1
+                    },
+                    ':-ms-input-placeholder': {
+                        color: "#666666",
+                        opacity: 1
+                    }
+                }
+            },
+            disabled && {
+                backgroundColor: 'transparent',
+                borderColor: 'transparent'
+            },
+            focused && {
+               /* selectors: {
+                    [HighContrastSelector]: {
+                        padding: '0 11px 0 11px'
+                    }
+                }*/
+            },
+        ]
+    };
+}
+
+export interface ITextFieldStyles {
+    root?: IStyle;
+    wrapper?: IStyle;
+    fieldGroup?: IStyle;
+    field?: IStyle;
+}
+
+export interface ITextFieldStylesProps {
+    disabled: boolean;
+    focused: boolean;
+}
diff --git a/src/components/TextField/OfficeTextField.vue b/src/components/TextField/OfficeTextField.vue
index 4cddb59..ff77aaf 100644
--- a/src/components/TextField/OfficeTextField.vue
+++ b/src/components/TextField/OfficeTextField.vue
@@ -1,18 +1,18 @@
 <template>
-    <div :style="textFieldStyle" class="ms-TextField">
-        <div class="ms-TextField-wrapper">
+    <div :class="classNames.root">
+        <div :class="classNames.wrapper">
             <OfficeLabel v-if="!!label">
                 {{label}}
             </OfficeLabel>
-            <div :style="textFieldFieldGroupStyle" class="ms-TextField-fieldGroup">
+            <div :class="classNames.fieldGroup">
                 <input
-                        :style="textFieldFieldStyle"
+
                         @focus="focused = true"
                         @blur="focused = false"
                         @input="$emit('input', $event.target.value)"
                         type="text"
                         id="TextField"
-                        class="ms-TextField-field"/>
+                        :class="classNames.field"/>
             </div>
         </div>
     </div>
@@ -21,6 +21,8 @@
 <script lang="ts">
     import {Component, Vue, Model, Prop} from "vue-property-decorator";
     import OfficeLabel from "@/components/Label/OfficeLabel.vue";
+    import {mergeStyleSets} from "@uifabric/merge-styles";
+    import {getStyles} from "@/components/TextField/OfficeTextField.style";
     @Component({
         components: {OfficeLabel}
     })
@@ -30,76 +32,8 @@
         @Prop({type: Boolean}) private disabled!: boolean;
         @Prop({type: String}) private label!: string;
         private focused: boolean = false;
-
-        get textFieldStyle() {
-            const styles: any = {};
-
-            if (this.focused) {
-                styles.borderColor = "#0078d4";
-            }
-
-            return styles;
-        }
-
-        get textFieldFieldGroupStyle() {
-            const styles: any = {};
-
-            if (this.focused) {
-                styles.borderColor = "#0078d4";
-            }
-            if (this.disabled) {
-                styles.backgroundColor = "#f4f4f4";
-                styles.borderColor = "#f4f4f4";
-            }
-
-            return styles;
-        }
-
-        get textFieldFieldStyle() {
-            const styles: any = {};
-
-            if (this.disabled) {
-                styles.backgroundColor = "transparent";
-                styles.borderColor = "transparent";
-            }
-
-            return styles;
+        private get classNames() {
+            return mergeStyleSets(getStyles({focused: this.focused, disabled: this.disabled}));
         }
     }
 </script>
-
-<style>
-    .ms-TextField {
-        position: relative;
-    }
-
-    /*
-    Only depends on underlined flag prop
-     */
-    .ms-TextField-wrapper {
-    }
-
-    .ms-TextField-fieldGroup {
-        border: 1px solid #a6a6a6;
-        background: #ffffff;
-        height: 32px;
-        display: flex;
-        flex-direction: row;
-        align-items: stretch;
-        position: relative;
-    }
-
-    .ms-TextField-field {
-        font-size: 14px;
-        border-radius: 0;
-        border: none;
-        background: transparent none;
-        color: #333333;
-        padding: 0 12px;
-        width: 100%;
-        min-width: 0;
-        text-overflow: ellipsis;
-        outline: 0;
-    }
-
-</style>

From 2ec22e54b79c9856602cb4c49c419d306b7df386 Mon Sep 17 00:00:00 2001
From: smoti123 <mathis.michel@outlook.de>
Date: Thu, 27 Dec 2018 18:46:14 +0100
Subject: [PATCH 4/6] Merge branch 'master' of
 git://github.com/s-bauer/office-ui-fabric-vue

# Conflicts:
#	src/components/Overview.vue
---
 src/components/Overview.vue                   |   3 +
 .../TextField/OfficeTextField.style.ts        | 384 +++++++++++++++---
 src/components/TextField/OfficeTextField.vue  |  49 ++-
 3 files changed, 364 insertions(+), 72 deletions(-)

diff --git a/src/components/Overview.vue b/src/components/Overview.vue
index f31a190..25bb05d 100644
--- a/src/components/Overview.vue
+++ b/src/components/Overview.vue
@@ -18,6 +18,8 @@ import {ImageFit} from "./Image/OfficeImage.types";
         <OfficeImage src="http://placehold.it/350x150" alt="Example" maximizeFrame/>
         <hr>
         <OfficeIcon iconName="BingLogo"/>
+        <hr>
+        <OfficeTextField label="Test Text" v-model="txt"></OfficeTextField>
     </div>
 </template>
 
@@ -42,6 +44,7 @@ import {ImageFit} from "./Image/OfficeImage.types";
     })
     export default class Overview extends Vue {
         @Prop() private msg!: string;
+        private txt: string = "test";
 
         private currentImageFit: ImageFit = ImageFit.contain;
 
diff --git a/src/components/TextField/OfficeTextField.style.ts b/src/components/TextField/OfficeTextField.style.ts
index 6101500..ae6881e 100644
--- a/src/components/TextField/OfficeTextField.style.ts
+++ b/src/components/TextField/OfficeTextField.style.ts
@@ -14,124 +14,378 @@ License:
  */
 
 
-import {IStyle} from "@uifabric/merge-styles";
+import {AnimationClassNames, FontSizes, HighContrastSelector, ITheme, normalize} from "@/styling";
+import {IStyle, IStyleFunctionOrObject} from "@uifabric/merge-styles";
+import {IOfficeLabelStyles, IOfficeLabelStyleProps} from "../Label/OfficeLabel.types";
+import {getGlobalClassNames} from "@/styling/styles/getGlobalClassNames";
+
+export interface ITextFieldSubComponentStyles {
+    /**
+     * Styling for Label child component.
+     */
+    // TODO: this should be the interface once we"re on TS 2.9.2 but otherwise causes errors in 2.8.4
+    // label: IStyleFunctionOrObject<ILabelStyleProps, ILabelStyles>;
+    label: IStyleFunctionOrObject<any, any>;
+}
+
+export interface ITextFieldStyleProps {
+    theme: ITheme;
+    className?: string;
+    disabled?: boolean;
+    focused?: boolean;
+    underlined?: boolean;
+    required: boolean;
+    multiline: boolean;
+    hasLabel: boolean;
+    borderless: boolean;
+    resizable: boolean;
+    inputClassName: string;
+}
+
+export interface ITextFieldStyles {
+    /**
+     * Style for the root element (a button) of the checkbox component in the default enabled/unchecked state.
+     */
+    root?: IStyle;
+
+    /**
+     * Style for the label part (contains the customized checkbox + text) when enabled.
+     */
+    wrapper?: IStyle;
+
+    /**
+     * Style for checkbox in its default unchecked/enabled state.
+     */
+    fieldGroup?: IStyle;
+/*
+    TODO: Implement prefix and suffix
+    /!**
+     * Style for prefix element.
+     *!/
+    prefix: IStyle;
+
+    /!**
+     * Style for suffix element.
+     *!/
+    suffix: IStyle;
+*/
+
+    /**
+     * Style for the checkmark in the default enabled/unchecked state.
+     */
+    field?: IStyle;
+/*
+    TODO: Implement icon for TextField, (depends on OfficeIcon Component[not created by now])
+    /!**
+     * Style for icon prop element.
+     *!/
+    icon: IStyle;
+*/
+
+    /**
+     * Style for error message element.
+     */
+    errorMessage: IStyle;
+
+    /**
+     * Styling for subcomponents.
+     */
+    subComponentStyles: ITextFieldSubComponentStyles;
+}
+
+
+const globalClassNames = {
+    root: "ms-TextField",
+    description: "ms-TextField-description",
+    errorMessage: "ms-TextField-errorMessage",
+    field: "ms-TextField-field",
+    fieldGroup: "ms-TextField-fieldGroup",
+    prefix: "ms-TextField-prefix",
+    suffix: "ms-TextField-suffix",
+    wrapper: "ms-TextField-wrapper",
+
+    multiline: "ms-TextField--multiline",
+    borderless: "ms-TextField--borderless",
+    underlined: "ms-TextField--underlined",
+    unresizable: "ms-TextField--unresizable",
+
+    required: "is-required",
+    disabled: "is-disabled",
+    active: "is-active"
+};
+
+function getLabelStyles(props: ITextFieldStyleProps): IStyleFunctionOrObject<IOfficeLabelStyleProps, IOfficeLabelStyles> {
+    const {underlined, disabled} = props;
+    return () => ({
+        root: [
+            underlined &&
+            disabled && {
+                color: props.theme.palette.neutralTertiary
+            },
+            underlined && {
+                fontSize: FontSizes.medium,
+                marginRight: 8,
+                paddingLeft: 12,
+                paddingRight: 0,
+                lineHeight: "22px",
+                height: 32
+            }
+        ]
+    });
+}
+
+export function getStyles(props: ITextFieldStyleProps): ITextFieldStyles {
+    const {
+        theme,
+        className,
+        disabled,
+        focused,
+        required,
+        multiline,
+        hasLabel,
+        borderless,
+        underlined,
+        resizable,
+        inputClassName
+    } = props;
+
+    const {semanticColors, palette} = theme;
+
+    const classNames = getGlobalClassNames(globalClassNames, theme);
+
+    const fieldPrefixSuffix: IStyle = {
+        background: palette.neutralLighter,
+        color: palette.neutralSecondary,
+        display: "flex",
+        alignItems: "center",
+        padding: "0 10px",
+        lineHeight: 1,
+        whiteSpace: "nowrap"
+    };
 
-export function getStyles(props: ITextFieldStylesProps): ITextFieldStyles {
-    const {disabled, focused} = props;
     return {
         root: [
-            "ms-TextField",
-            disabled && "is-disabled",
-            focused && "is-active",
+            classNames.root,
+            required && classNames.required,
+            disabled && classNames.disabled,
+            focused && classNames.active,
+            multiline && classNames.multiline,
+            borderless && classNames.borderless,
+            underlined && classNames.underlined,
+            normalize,
             {
-                position: 'relative',
+                position: "relative",
                 selectors: {
-                    /*[HighContrastSelector]: {
+                    [HighContrastSelector]: {
                         borderWidth: 2
-                    }*/
+                    }
                 }
             },
             focused && {
-                borderColor: "#0078d4"
-            }
+                borderColor: semanticColors.inputFocusBorderAlt
+            },
+            underlined &&
+            !focused && {
+                border: `0px solid ${semanticColors.inputBorder}`
+            },
+            underlined &&
+            !disabled &&
+            !focused && {
+                selectors: {
+                    ":hover": {
+                        borderColor: semanticColors.inputBorderHovered
+                    }
+                }
+            },
+            className
         ],
         wrapper: [
-            "ms-TextField-wrapper",
+            classNames.wrapper,
+            underlined && {
+                display: "flex",
+                borderBottomWidth: 1,
+                borderBottomStyle: "solid",
+                borderBottomColor: "inherit",
+                width: "100%"
+            },
+            underlined &&
+            disabled && {
+                borderBottomColor: semanticColors.disabledBackground
+            },
+            underlined &&
+            !disabled && {
+                selectors: {
+                    ":hover": {
+                        selectors: {
+                            [HighContrastSelector]: {
+                                borderColor: "Highlight"
+                            }
+                        }
+                    }
+                }
+            },
+            underlined &&
+            focused && {
+                selectors: {
+                    [HighContrastSelector]: {
+                        borderColor: "Highlight"
+                    }
+                }
+            }
         ],
         fieldGroup: [
-            "ms-TextField-fieldGroup",
+            classNames.fieldGroup,
+            normalize,
             {
-                border: `1px solid #a6a6a6`,
-                background: "#ffffff",
+                border: `1px solid ${semanticColors.inputBorder}`,
+                background: semanticColors.bodyBackground,
                 height: 32,
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'stretch',
-                position: 'relative',
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "stretch",
+                position: "relative",
                 selectors: {
-                    ':hover': {
+                    ":hover": {
                         selectors: {
-                           /* [HighContrastSelector]: {
-                                borderColor: 'Highlight'
-                            }*/
+                            [HighContrastSelector]: {
+                                borderColor: "Highlight"
+                            }
                         }
                     }
                 }
             },
+            multiline && {
+                minHeight: "60px",
+                height: "auto",
+                display: "flex"
+            },
+            borderless && {
+                borderColor: "transparent",
+                borderWidth: 0
+            },
             !focused &&
             !disabled && {
                 selectors: {
-                    ':hover': {
-                        borderColor: "#333333"
+                    ":hover": {
+                        borderColor: semanticColors.inputBorderHovered
                     }
                 }
             },
             focused && {
-                borderColor: "#0078d4",
+                borderColor: semanticColors.inputFocusBorderAlt,
                 selectors: {
-                   /* [HighContrastSelector]: {
+                    [HighContrastSelector]: {
                         borderWidth: 2,
-                        borderColor: 'Highlight'
-                    }*/
+                        borderColor: "Highlight"
+                    }
                 }
             },
             disabled && {
-                backgroundColor: "#f4f4f4",
-                borderColor: "#f4f4f4"
+                backgroundColor: semanticColors.disabledBackground,
+                borderColor: semanticColors.disabledBackground
+            },
+            underlined && {
+                flex: "1 1 0px",
+                borderWidth: 0,
+                textAlign: "left"
+            },
+            underlined &&
+            disabled && {
+                backgroundColor: "transparent"
+            },
+            !hasLabel &&
+            required && {
+                selectors: {
+                    ":after": {
+                        content: `"*"`,
+                        color: semanticColors.errorText,
+                        position: "absolute",
+                        top: -5,
+                        right: -10
+                    }
+                }
             }
         ],
         field: [
-            "ms-TextField-wrapper",
+            classNames.field,
+            normalize,
             {
-                fontSize: 14,
+                fontSize: FontSizes.medium,
                 borderRadius: 0,
-                border: 'none',
-                background: 'none',
-                backgroundColor: 'transparent',
-                color: "#333333",
-                padding: '0 12px',
-                width: '100%',
+                border: "none",
+                background: "none",
+                backgroundColor: "transparent",
+                color: semanticColors.bodyText,
+                padding: "0 12px",
+                width: "100%",
                 minWidth: 0,
-                textOverflow: 'ellipsis',
+                textOverflow: "ellipsis",
                 outline: 0,
                 selectors: {
-                    '&:active, &:focus, &:hover': { outline: 0 },
-                    '::-ms-clear': {
-                        display: 'none'
+                    "&:active, &:focus, &:hover": { outline: 0 },
+                    "::-ms-clear": {
+                        display: "none"
                     },
-                    '::placeholder': {
-                        color: "#666666",
+                    "::placeholder": {
+                        color: semanticColors.inputPlaceholderText,
                         opacity: 1
                     },
-                    ':-ms-input-placeholder': {
-                        color: "#666666",
+                    ":-ms-input-placeholder": {
+                        color: semanticColors.inputPlaceholderText,
                         opacity: 1
                     }
                 }
             },
+            multiline &&
+            !resizable && [
+                classNames.unresizable,
+                {
+                    resize: "none"
+                }
+            ],
+            multiline && {
+                minHeight: "inherit",
+                lineHeight: 17,
+                flexGrow: 1,
+                paddingTop: 6,
+                overflow: "auto",
+                width: "100%"
+            },
+            disabled && {
+                backgroundColor: "transparent",
+                borderColor: "transparent"
+            },
+            underlined && {
+                textAlign: "left"
+            },
+            underlined &&
             disabled && {
-                backgroundColor: 'transparent',
-                borderColor: 'transparent'
+                backgroundColor: "transparent",
+                color: semanticColors.disabledText
             },
             focused && {
-               /* selectors: {
+                selectors: {
                     [HighContrastSelector]: {
-                        padding: '0 11px 0 11px'
+                        padding: "0 11px 0 11px"
                     }
-                }*/
+                }
             },
-        ]
+            inputClassName
+        ],
+        errorMessage: [
+            classNames.errorMessage,
+            AnimationClassNames.slideDownIn20,
+            theme.fonts.small,
+            {
+                color: semanticColors.errorText,
+                margin: 0,
+                paddingTop: 5,
+                display: "flex",
+                alignItems: "center"
+            }
+        ],
+        subComponentStyles: {
+            label: getLabelStyles(props)
+        }
     };
 }
-
-export interface ITextFieldStyles {
-    root?: IStyle;
-    wrapper?: IStyle;
-    fieldGroup?: IStyle;
-    field?: IStyle;
-}
-
-export interface ITextFieldStylesProps {
-    disabled: boolean;
-    focused: boolean;
-}
diff --git a/src/components/TextField/OfficeTextField.vue b/src/components/TextField/OfficeTextField.vue
index ff77aaf..7b0109c 100644
--- a/src/components/TextField/OfficeTextField.vue
+++ b/src/components/TextField/OfficeTextField.vue
@@ -1,18 +1,26 @@
 <template>
     <div :class="classNames.root">
         <div :class="classNames.wrapper">
-            <OfficeLabel v-if="!!label">
+            <OfficeLabel v-if="hasLabel" :required="required">
                 {{label}}
             </OfficeLabel>
             <div :class="classNames.fieldGroup">
                 <input
-
+                        v-if="!multiline"
+                        type="text"
                         @focus="focused = true"
                         @blur="focused = false"
                         @input="$emit('input', $event.target.value)"
-                        type="text"
-                        id="TextField"
+                        :value="text"
                         :class="classNames.field"/>
+                <textarea
+                        v-else
+                        value={this.state.value}
+                        @input="$emit('input', $event.target.value)"
+                        @focus="focused = true"
+                        @blur="focused = false"
+                        :value="text"
+                        :class="classNames.field"></textarea>
             </div>
         </div>
     </div>
@@ -23,17 +31,44 @@
     import OfficeLabel from "@/components/Label/OfficeLabel.vue";
     import {mergeStyleSets} from "@uifabric/merge-styles";
     import {getStyles} from "@/components/TextField/OfficeTextField.style";
+    import {createTheme} from "@/styling";
+
     @Component({
         components: {OfficeLabel}
     })
     export default class OfficeTextField extends Vue {
+        get hasLabel(): boolean {
+            return this.label != null;
+        }
+
         @Model("input", {type: String}) private text!: string;
 
-        @Prop({type: Boolean}) private disabled!: boolean;
-        @Prop({type: String}) private label!: string;
+        @Prop({type: Boolean, default: false}) private disabled!: boolean;
+        @Prop({type: Boolean, default: false}) private multiline!: boolean;
+        @Prop({type: Boolean, default: false}) private borderless!: boolean;
+        @Prop({type: String, default: ""}) private className!: string;
+        @Prop({type: String, default: ""}) private inputClassName!: string;
+        @Prop({type: String, default: ""}) private label!: string;
+        @Prop({type: Boolean, default: false}) private required!: boolean;
+        @Prop({type: Boolean, default: false}) private resizable!: boolean;
+        @Prop({type: Boolean, default: false}) private underlined!: boolean;
+
         private focused: boolean = false;
+
         private get classNames() {
-            return mergeStyleSets(getStyles({focused: this.focused, disabled: this.disabled}));
+            return mergeStyleSets(getStyles({
+                focused: this.focused,
+                disabled: this.disabled,
+                multiline: this.multiline,
+                borderless: this.borderless,
+                className: this.className,
+                hasLabel: this.hasLabel,
+                inputClassName: this.inputClassName,
+                required: this.required,
+                resizable: this.resizable,
+                underlined: this.underlined,
+                theme: createTheme({})
+            }));
         }
     }
 </script>

From a87177308c904419b4600e5d2c55c1d1261853f2 Mon Sep 17 00:00:00 2001
From: smoti123 <mathis.michel@outlook.de>
Date: Thu, 27 Dec 2018 18:58:00 +0100
Subject: [PATCH 5/6] add id

---
 src/components/Overview.vue                  | 5 ++++-
 src/components/TextField/OfficeTextField.vue | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Overview.vue b/src/components/Overview.vue
index 25bb05d..511f508 100644
--- a/src/components/Overview.vue
+++ b/src/components/Overview.vue
@@ -20,6 +20,7 @@ import {ImageFit} from "./Image/OfficeImage.types";
         <OfficeIcon iconName="BingLogo"/>
         <hr>
         <OfficeTextField label="Test Text" v-model="txt"></OfficeTextField>
+        <OfficeTextField label="Test Text" underlined required v-model="txt"></OfficeTextField>
     </div>
 </template>
 
@@ -32,6 +33,7 @@ import {ImageFit} from "./Image/OfficeImage.types";
     import {Component, Prop, Vue} from "vue-property-decorator";
     import OfficeButton from "./Button/OfficeButton.vue";
     import OfficeCheckbox from "./Checkbox/OfficeCheckbox.vue";
+    import OfficeTextField from "@/components/TextField/OfficeTextField.vue";
 
     @Component({
         components: {
@@ -39,7 +41,8 @@ import {ImageFit} from "./Image/OfficeImage.types";
             OfficeImage,
             OfficeLabel,
             OfficeCheckbox,
-            OfficeButton
+            OfficeButton,
+            OfficeTextField
         },
     })
     export default class Overview extends Vue {
diff --git a/src/components/TextField/OfficeTextField.vue b/src/components/TextField/OfficeTextField.vue
index 7b0109c..92d7b33 100644
--- a/src/components/TextField/OfficeTextField.vue
+++ b/src/components/TextField/OfficeTextField.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="classNames.root">
         <div :class="classNames.wrapper">
-            <OfficeLabel v-if="hasLabel" :required="required">
+            <OfficeLabel :for="id" v-if="hasLabel" :required="required">
                 {{label}}
             </OfficeLabel>
             <div :class="classNames.fieldGroup">
@@ -11,6 +11,7 @@
                         @focus="focused = true"
                         @blur="focused = false"
                         @input="$emit('input', $event.target.value)"
+                        :id="id"
                         :value="text"
                         :class="classNames.field"/>
                 <textarea
@@ -19,6 +20,7 @@
                         @input="$emit('input', $event.target.value)"
                         @focus="focused = true"
                         @blur="focused = false"
+                        :id="id"
                         :value="text"
                         :class="classNames.field"></textarea>
             </div>
@@ -54,6 +56,7 @@
         @Prop({type: Boolean, default: false}) private underlined!: boolean;
 
         private focused: boolean = false;
+        private id: number = (Math.random() * 100000) + 1;
 
         private get classNames() {
             return mergeStyleSets(getStyles({

From 405bb201506876307639a8e42426c553ee467de1 Mon Sep 17 00:00:00 2001
From: smoti123 <mathis.michel@outlook.de>
Date: Thu, 27 Dec 2018 19:11:16 +0100
Subject: [PATCH 6/6] update readme remove vue prop "className"

---
 README.md                                    | 7 ++++---
 src/components/TextField/OfficeTextField.vue | 3 +--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 7385238..4caf701 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ This library is in early alpha stage. The list of supported components is pretty
 ## Supported Components
 
 - Checkbox
-    - Model: checked
+    - Model: :checked / @change
     - Props: disabled, label
 - Button
     - Props: disabled, checked, primary
@@ -35,12 +35,13 @@ This library is in early alpha stage. The list of supported components is pretty
     - Props: iconName
 - Image
     - Info: Take a look at the [Official Documentation](https://developer.microsoft.com/en-us/fabric#/components/image). I implemented all features and the syntax is very similar!
+- TextField
+    - Model: :text / @input
+    - Props: label, disabled, multiline, borderless, required, resizable, underlined, inputClassName
 
 ## In-Progress Components
 
-- TextField
 - ChoiceGroup
-- Icon
 
 ## Contribution
 
diff --git a/src/components/TextField/OfficeTextField.vue b/src/components/TextField/OfficeTextField.vue
index 92d7b33..6b802fd 100644
--- a/src/components/TextField/OfficeTextField.vue
+++ b/src/components/TextField/OfficeTextField.vue
@@ -48,7 +48,6 @@
         @Prop({type: Boolean, default: false}) private disabled!: boolean;
         @Prop({type: Boolean, default: false}) private multiline!: boolean;
         @Prop({type: Boolean, default: false}) private borderless!: boolean;
-        @Prop({type: String, default: ""}) private className!: string;
         @Prop({type: String, default: ""}) private inputClassName!: string;
         @Prop({type: String, default: ""}) private label!: string;
         @Prop({type: Boolean, default: false}) private required!: boolean;
@@ -64,7 +63,7 @@
                 disabled: this.disabled,
                 multiline: this.multiline,
                 borderless: this.borderless,
-                className: this.className,
+                className: '',
                 hasLabel: this.hasLabel,
                 inputClassName: this.inputClassName,
                 required: this.required,