{"_path":"/guidelines-internal/design-ui-component-naming","_draft":false,"_partial":false,"_empty":false,"title":"Design: UI Component Naming","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"design-ui-component-naming"},"children":[{"type":"text","value":"Design: UI Component Naming"}]},{"type":"element","tag":"h2","props":{"id":"grundprinzip"},"children":[{"type":"text","value":"Grundprinzip"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Prinzipien der Namenskonventionen"}]},{"type":"text","value":"\nDie Namen von Komponenten sollten funktional und für jeden Stakeholder verständlich sein. Das wird erreicht, indem die gewählten Namen"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"logisch"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"skalierbar"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"einfach"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"und standardisiert sind."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Hinweis:"}]},{"type":"text","value":" Namen sollten lieber länger und dadurch besser zuzuordnen sein, als zu kurz und nicht aussagekräftig."}]}]},{"type":"element","tag":"h2","props":{"id":"zusammensetzung"},"children":[{"type":"text","value":"Zusammensetzung"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Zusammensetzung des Namens einer Komponente"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Zugehörigkeit bzw. Art der Komponente (damit diese in den Assets in entsprechende Ordner sortiert werden)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"inhaltlicher Bezug"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Typ der Komponente (siehe "},{"type":"element","tag":"a","props":{"href":"ui-component-types"},"children":[{"type":"text","value":"Typen-Übersicht"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"falls keine anderweitige Unterscheidung möglich: Aussehen der Komponente (Größe + Styleguide)"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Beispiele:"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\ncontent/recipeTeaserCardS"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\ncontent/recipeTeaserCardM"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\ninput/buttonPrimary"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\ncontent/recipeTeaserCardCarousel"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\ninput/search"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Hinweis:"}]},{"type":"text","value":" Die Art der Komponente sollte immer im Singular angegeben werden (nicht “Inputs” sondern “Input”)."}]}]},{"type":"element","tag":"h2","props":{"id":"worttrennung"},"children":[{"type":"text","value":"Worttrennung"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Trennung von Wörtern im Namen:\nIn den Namen von Komponenten werden die verschiedenen Bestandteile zusammengeschrieben."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beispiele: buttonPrimary, recipeCard, filterTag"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Do"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"alle Wörter im Namen zusammen schreiben"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"erstes Wort im Namen in Kleinbuchstaben"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"alle darauffolgenden Wörter beginnen mit einem Großbuchstaben"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Don’t"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Trennung von Wörtern anhand eines Leerzeichen, Bindestrichs, etc."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"alle Wörter im Lower-/Uppercase"}]}]},{"type":"element","tag":"h2","props":{"id":"größenangaben"},"children":[{"type":"text","value":"Größenangaben"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"xxs\txs\ts\tm (default)\tl\txl\txxl"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Die Größe wird im Namen angegeben, sobald eine Komponente in mehreren Größen mit demselben Inhalt erstellt wird. Der Zusatz im Namen wird anhand von T-Shirtgrößen angegeben (xxs-xxl)."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Hinweis:"}]},{"type":"text","value":" Es sollte berücksichtigt werden, dass nachträglich eine weitere Größe hinzukommen kann. Damit eine Zwischenstufe eingefügt werden kann, sollten die Größenbezeichnungen vorausschauend gewählt werden."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Do"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"T-Shirtgrößen verwenden"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Abkürzungen nutzen"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Don’t"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Größe ausschreiben (z.B. small)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"eine Größe mehrfach verwenden"}]}]},{"type":"element","tag":"h2","props":{"id":"stateszustände"},"children":[{"type":"text","value":"States/Zustände"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"State"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Bedeutung"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Enabled"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Default State"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Disabled"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Deaktiviert (nicht klickbar)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Active"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Aktiviert"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Hover"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Wenn der Zeiger über das Element bewegt wird. Wird nur bei Desktop Geräten benötigt."}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Focus"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Wenn das Element mithilfe der Tastaturnavigation angesteuert wird."}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Pressed"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Wenn das Element angeklickt/-tippt wird."}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Checked"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Wenn ein Radio oder eine Checkbox ausgewählt bzw. angekreuzt ist."}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Collapsed"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Wenn ein Dropdown/ein Accordion/ein Collapse zusammengeklappt und der Inhalt nicht sichtbar ist."}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Expanded"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Wenn ein Dropdown/ein Accordion/ein Collapse ausgeklappt und der Inhalt sichtbar ist."}]}]}]}]}]},"public":true,"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"design-ui-component-naming"},"children":[{"type":"text","value":"Design: UI Component Naming"}]},{"type":"element","tag":"h2","props":{"id":"grundprinzip"},"children":[{"type":"text","value":"Grundprinzip"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Prinzipien der Namenskonventionen"}]},{"type":"text","value":"\nDie Namen von Komponenten sollten funktional und für jeden Stakeholder verständlich sein. Das wird erreicht, indem die gewählten Namen"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"logisch"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"skalierbar"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"einfach"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"und standardisiert sind."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Hinweis:"}]},{"type":"text","value":" Namen sollten lieber länger und dadurch besser zuzuordnen sein, als zu kurz und nicht aussagekräftig."}]}]},{"type":"element","tag":"h2","props":{"id":"zusammensetzung"},"children":[{"type":"text","value":"Zusammensetzung"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Zusammensetzung des Namens einer Komponente"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Zugehörigkeit bzw. Art der Komponente (damit diese in den Assets in entsprechende Ordner sortiert werden)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"inhaltlicher Bezug"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Typ der Komponente (siehe "},{"type":"element","tag":"a","props":{"href":"ui-component-types"},"children":[{"type":"text","value":"Typen-Übersicht"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"falls keine anderweitige Unterscheidung möglich: Aussehen der Komponente (Größe + Styleguide)"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Beispiele:"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\ncontent/recipeTeaserCardS"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\ncontent/recipeTeaserCardM"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\ninput/buttonPrimary"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\ncontent/recipeTeaserCardCarousel"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\ninput/search"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Hinweis:"}]},{"type":"text","value":" Die Art der Komponente sollte immer im Singular angegeben werden (nicht “Inputs” sondern “Input”)."}]}]},{"type":"element","tag":"h2","props":{"id":"worttrennung"},"children":[{"type":"text","value":"Worttrennung"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Trennung von Wörtern im Namen:\nIn den Namen von Komponenten werden die verschiedenen Bestandteile zusammengeschrieben."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beispiele: buttonPrimary, recipeCard, filterTag"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Do"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"alle Wörter im Namen zusammen schreiben"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"erstes Wort im Namen in Kleinbuchstaben"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"alle darauffolgenden Wörter beginnen mit einem Großbuchstaben"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Don’t"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Trennung von Wörtern anhand eines Leerzeichen, Bindestrichs, etc."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"alle Wörter im Lower-/Uppercase"}]}]},{"type":"element","tag":"h2","props":{"id":"größenangaben"},"children":[{"type":"text","value":"Größenangaben"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"xxs\txs\ts\tm (default)\tl\txl\txxl"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Die Größe wird im Namen angegeben, sobald eine Komponente in mehreren Größen mit demselben Inhalt erstellt wird. Der Zusatz im Namen wird anhand von T-Shirtgrößen angegeben (xxs-xxl)."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Hinweis:"}]},{"type":"text","value":" Es sollte berücksichtigt werden, dass nachträglich eine weitere Größe hinzukommen kann. Damit eine Zwischenstufe eingefügt werden kann, sollten die Größenbezeichnungen vorausschauend gewählt werden."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Do"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"T-Shirtgrößen verwenden"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Abkürzungen nutzen"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Don’t"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Größe ausschreiben (z.B. small)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"eine Größe mehrfach verwenden"}]}]},{"type":"element","tag":"h2","props":{"id":"stateszustände"},"children":[{"type":"text","value":"States/Zustände"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"State"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Bedeutung"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Enabled"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Default State"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Disabled"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Deaktiviert (nicht klickbar)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Active"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Aktiviert"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Hover"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Wenn der Zeiger über das Element bewegt wird. Wird nur bei Desktop Geräten benötigt."}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Focus"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Wenn das Element mithilfe der Tastaturnavigation angesteuert wird."}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Pressed"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Wenn das Element angeklickt/-tippt wird."}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Checked"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Wenn ein Radio oder eine Checkbox ausgewählt bzw. angekreuzt ist."}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Collapsed"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Wenn ein Dropdown/ein Accordion/ein Collapse zusammengeklappt und der Inhalt nicht sichtbar ist."}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Expanded"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Wenn ein Dropdown/ein Accordion/ein Collapse ausgeklappt und der Inhalt sichtbar ist."}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"grundprinzip","depth":2,"text":"Grundprinzip"},{"id":"zusammensetzung","depth":2,"text":"Zusammensetzung"},{"id":"worttrennung","depth":2,"text":"Worttrennung"},{"id":"größenangaben","depth":2,"text":"Größenangaben"},{"id":"stateszustände","depth":2,"text":"States/Zustände"}]}},"_type":"markdown","_id":"content:06.guidelines-internal:design-ui-component-naming.md","_source":"content","_file":"06.guidelines-internal/design-ui-component-naming.md","_extension":"md"}