Fix empty classname resulting in undefined class of result element

src/Button.tsx

@@ -5,7 +5,7 @@ export enum ButtonFormats {
    PRIMARY,
    SECONDARY,
    ERROR,
-   SUCCESS
+   SUCCESS,
 }
 
 export interface IButtonProps extends JSX.HTMLAttributes<HTMLButtonElement> {
@@ -20,7 +20,7 @@ export default function Button({
 }: IButtonProps) {
    let cl = "ht-btn";
 
-   if (className) cl += " " + className;
+   if (className) cl += " " + (className || "");
 
    switch (format) {
       case ButtonFormats.DEFAULT:

src/Card.tsx

@@ -5,7 +5,7 @@ export default function Card({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-card " + className} {...props}>
+      <div className={"ht-card " + (className || "")} {...props}>
          {children}
       </div>
    );

src/Container.tsx

@@ -5,7 +5,7 @@ export default function Container({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-container " + className} {...props}>
+      <div className={"ht-container " + (className || "")} {...props}>
          {children}
       </div>
    );

src/Fab.tsx

@@ -9,7 +9,7 @@ export default function Fab({
    let cl = "ht-fab " + (alignLeft ? "ht-fab-left " : "");
 
    return (
-      <button className={cl + className} {...props}>
+      <button className={cl + (className || "")} {...props}>
          {children}
       </button>
    );

src/Header.tsx

@@ -8,7 +8,7 @@ export default function Header({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <header className={"ht-header " + className} {...props}>
+      <header className={"ht-header " + (className || "")} {...props}>
          {children}
       </header>
    );

src/IconButton.tsx

@@ -5,7 +5,7 @@ export default function IconButton({
    ...props
 }: JSX.HTMLAttributes<HTMLButtonElement>) {
    return (
-      <button className={"ht-btn ht-btn-icon " + className} {...props}>
+      <button className={"ht-btn ht-btn-icon " + (className || "")} {...props}>
          {children}
       </button>
    );

src/Input.tsx

@@ -6,7 +6,7 @@ export function Input({
    ...props
 }: JSX.HTMLAttributes<HTMLInputElement>) {
    return (
-      <input className={"ht-inp " + className} {...props}>
+      <input className={"ht-inp " + (className || "")} {...props}>
          {children}
       </input>
    );
@@ -18,7 +18,7 @@ export function TextArea({
    ...props
 }: JSX.HTMLAttributes<HTMLTextAreaElement>) {
    return (
-      <textarea className={"ht-inp " + className} {...props}>
+      <textarea className={"ht-inp " + (className || "")} {...props}>
          {children}
       </textarea>
    );
@@ -30,7 +30,7 @@ export function InputGroup({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-input-group " + className} {...props}>
+      <div className={"ht-input-group " + (className || "")} {...props}>
          {children}
       </div>
    );
@@ -74,7 +74,7 @@ export function InputSelect({
    ...props
 }: JSX.HTMLAttributes<HTMLSelectElement>) {
    return (
-      <select className={"ht-inp " + className} {...props}>
+      <select className={"ht-inp " + (className || "")} {...props}>
          {children}
       </select>
    );

src/List.tsx

@@ -17,10 +17,10 @@ export default function List({
 
    if (divider) cl += "ht-list-divider ";
 
-   cl += className;
+   cl += className || "";
 
    return (
-      <ul className={className} {...props}>
+      <ul className={cl} {...props}>
          {children}
       </ul>
    );

src/Modal.tsx

@@ -8,7 +8,9 @@ export function Modal({
 }: JSX.HTMLAttributes<HTMLDivElement> & { hidden?: boolean }) {
    return (
       <div
-         className={"ht-modal " + className + (hidden ? "ht-modal-hidden" : "")}
+         className={
+            "ht-modal " + (className || "") + (hidden ? "ht-modal-hidden" : "")
+         }
          {...props}
       >
          {children}
@@ -22,7 +24,7 @@ export function ModalTitle({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-modal-title " + className} {...props}>
+      <div className={"ht-modal-title " + (className || "")} {...props}>
          {children}
       </div>
    );
@@ -34,7 +36,7 @@ export function ModalContent({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-modal-content " + className} {...props}>
+      <div className={"ht-modal-content " + (className || "")} {...props}>
          {children}
       </div>
    );
@@ -46,7 +48,7 @@ export function ModalActions({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-modal-action " + className} {...props}>
+      <div className={"ht-modal-action " + (className || "")} {...props}>
          {children}
       </div>
    );

src/Table.tsx

@@ -6,7 +6,7 @@ export default function Table({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-table " + className} {...props}>
+      <div className={"ht-table " + (className || "")} {...props}>
          {children}
       </div>
    );