Bauhaus Design System

Changelog ​

7.6.2 ​

  • remove all Icon svg inline style rules, since they are injected globally in consuming project and therefore are applied to all svg / path elements (not only DS ones) due to new scss global module handling

7.6.1 ​

  • set new prop in Combobox to suppress transformation of user input before storing to value prop

7.6.0 ​

  • in Multiselect fix required FormLabel binding + suppress option action when checkbox position is trailing
  • in NumberInput added fractionDigits prop to control the allowed number of those and rework component to use the help slot of FormLabel
  • Added to the Icon list: forward, add_home_work, circle, door, dropdown, home_work, rectangle, preview, villa, and windows.

7.5.4 ​

  • change approach of fixing icons to work in the deployed package

7.5.3 ​

  • reworked Multiselect to have checkboxPositions and selectionBehavior options according to new design
  • remove box-shadow from open Combobox, Multiselect, Select
  • add vue general data binding section
  • Fix placement of apps, apps_arrow and construction icons

7.5.0 ​

  • update project dependencies including bootstrap-grid module to new scss syntax
  • update TreeBar Items to have hideButton property

7.4.10 ​

7.4.8 ​

  • Updates on the VitePress UI, Added a search bar on the side bar.
  • TreeBar provide misusage fix + unnecessary inject in TreeItem selectedLeaf property changed to plain ref
  • Added the purple background on the playground and created the section Playground Theme for the playground theme switches
  • Added new category to the TreeBar
  • Add new Icons send, cloud_upload, image_arrow_up, bug.

7.4.7 ​

  • Combobox built-in input type restriction based on generic modelValue type caused mismatch when passing numeric values since the input is always treated as a string. Input type checking is now optional via restrictInputTypeToNumber property

7.4.6 ​

  • Icon added icons cube, cube_group and excel
  • Select added property icon to SelectOptions to ease showing icons in the select options

7.4.5 ​

  • Fixed Accordion alignment issues in nested structures, added transitions and the label and title prop to ease usability . Updated documentation to reflect changes.
  • Add custom width to Chips component and update documentation
  • Refactored MenuBar components for improved readability and maintainability by formatting button elements and removing console logs

7.4.4 ​

  • Combobox icon color now matches the disabled state of the component
  • Added Section component to visually separate different sections of the UI with titles and separators
  • [Accordion] (./8.Templates/Accordion/Accordion_docs.md) updates and changes in documentation, added type custom and generic.
  • [RadioSelect] (./6.Molecules/RadioSelect/RadioSelect_docs.md) fix to be able to lock only one item.

7.4.3 ​

  • Changed color of Link secondary to a lighter one
  • Refactor Breadcrumb component to improve path handling and remove unused click function. Updated paths in documentation for consistency.
  • Updated IconButton color secondary
  • Code refactor on [Banner]
  • update MenuBar styles, and modified MenuItem max-width to handle text better

7.4.2 ​

  • removed unused teleportTo property from BugReport
  • changed mail of userData to be optional

7.4.0 ​

  • change BugReport data passing logic
  • add dev notes for BugReport

7.3.1 ​

7.2.0 ​

  • small TheLanguageSelector align fix of separator
  • Add Accordion component
  • Added new new_tab Icon and updated Icon's documentation table.
  • Updated the Breadcrumb component to use Link and added truncation support
  • fix font url definitions in bundle to point to package shipped fonts in the corresponding node_modules package
  • removed all @pohlcon/typescript imports from component library

7.1.0 ​

7.0.5 ​

7.0.4 ​

  • removed i18n context from Combobox component and added a canNotAddHint property to dynamically pass a corresponding hint

7.0.3 ​

  • Combobox adding a new option when generic type is number will add the input as the new option's value property as is

7.0.2 ​

  • added locale message keys for the actions object login, logout, send, submit

7.0.1 ​

  • TextArea placeholder color's now match the TextInput placeholder color's + made labelCategory default to compact
  • Combobox complete refactor to adapt to keyboard navigation techniques

6.9.2 ​

6.9.1 ​

  • added cypress attributes handling to left components

6.9.0 ​

  • change component attribute passing logic

6.8.0 ​

  • attributes cypress-id & cypressId are being passed to the corresponding input html elements for proper element targeting in cypress tests (for now only for all Molecules)

6.7.0 ​

6.6.0 ​

6.5.1 ​

  • MenuItem fix change color and focus state
  • fix Icon's Tooltip integration
  • Modal's stylings are now scoped to the component

6.4.0 ​

6.3.3 ​

6.2.5 ​

  • fix issue with attributes binding for AppButton
  • redefining (component) refs

6.2.3 ​

  • FIX useTemplateRef's declaration names differ from ref names, so no console warning is thrown
  • added locale key actions.go

6.2.1 ​

6.2.0 ​

  • update on the Combobox to take the label position options, also refactored the component code and updated documentation.
  • rework keyboard logic of Select and optimize its focus / blur event handling
  • fix Select with search focusing searchInput when clicking / pressing Enter once
  • fixed Tooltip and its implementations in the following components via FormLabel general implementation:
    • Checkbox
    • Combobox
    • Multiselect
    • NumberInput
    • RadioSelect
    • Select
    • Switch
    • TextInput
  • And in the following components via dedicated implementations:
    • AppButton
    • AvatarCompact
    • FAB
    • FilterGroup
    • Icon
    • IconButton
    • Link
  • Modal size fixes
  • added locale key actions.confirm

6.1.0 ​

6.0.2 ​

  • update vue version to 3.5 to make templateRef syntax available

6.0.1 ​

6.0.0 ​

  • change Chips choice variant to not have a delete button, have a trailing icon + have the whole component as clickable area
  • updates on TabBar to make the component functionality simple
  • updates on MenuBar, fixed errors on alignment.
  • added a title attribute to Combobox and Select components to improve readability of contents
  • updated Icons: jva_n and ai. Added jva_f. Changed name of old jva icon to jva_n differentiate from new variants.
  • updated MenuBar : menu elements now have the category of : menuElementsTop, menuElementsCenter, menuElementsBottom ans each correspond to the position of the elements in the bar.
  • added Icons: calendar , save, export_file, apps.
  • update Select to use new templateRef syntax and typing

5.5.2 ​

5.5.0 ​

  • Chips choice variant redesigned. Property chosen should receive the id of the currently selected Chip

5.4.0 ​

  • remove console.logs from TreeItem
  • lowercase placeholder for NumberInput when being a string
  • add directive v-capitalize for <input> elements

5.3.0 ​

  • TreeItem now accepts all IconNames as leafIcon

5.2.1 ​

  • TreeBar can be unselected (so modelValue can be set to an empty string '')

5.2.0 ​

  • fix Tooltip z-index assignment when used as wrapper component
  • TreeBar now emits itemClicked event that passes the id of the clicked TreeItem

5.1.0 ​

  • refactor ProgressSteps to have no routing capability anymore and therefore not interfering with the overall app management
  • fix AvatarCompact light and dark mode where not working <a>
  • fix MenuBar buttons in the bottom where not being selected, error fixed.
  • fix [TheLanguageSelector] (./10.Utilities/TheLanguageSelector/TheLanguageSelector_docs) secondary colors where not implemented and required by other projects

5.0.4 ​

  • fix Link tertiary hover state when being an <a>

5.0.3 ​

  • Link now holds the target property
  • added locale keys for states: loading, empty, error

5.0.2 ​

  • fix Tooltip overflow behavior with tooltip__tail
  • adapt Link usage of Tooltip

5.0.1 ​

  • fix ProgressSteps last item was not set on when component was mounted
  • added locales for actions.save

5.0.0 ​

  • refactored ProgressSteps component and eased its routing behavior from outside via model definition currentStepName

4.6.2 ​

  • add changes to Chips, now emits on delete and on clicking the text of the component. Updated documentation.
  • update color of IconButton on Select and Multiselect.
  • make the whole element for an option on Select component clickable.

4.6.1 ​

  • fix Modal content width
  • add Modal documentation
  • fix Modal closing behavior

4.6.0 ​

  • added locale messages for actions.cancel + actions.create
  • improved Modal setup
  • fixed IconButton background-color + border issues

4.5.4 ​

  • no default color for IconProp color, due to incompatibilities with components Icon is used in, i.e. AppButton

4.5.3 ​

  • allow string as unit for NumberInput

4.5.0 ​

  • fixed FormLabel issue in Firefox
  • refactor of the [MenuBar] component to be used on JVA. Deleted the slot to show information and incorporated the [MenuItem] component into the [MenuBar]. Allowed the incorporation of other components into the bar, simplified styles and improved documentation.

4.4.0 ​

  • decreased font weights in VP
  • added dev Notes for ScrollbarTiny
  • Checkbox has new property clickableIndeterminate that controls whether or not indeterminate state of component should be clickable --> adapted also FormLabel to work with clickableLabel accordingly
  • no Action for FilterGroup available anymore
  • sorting now available for FilterGroup
  • sorting will be based on options value type (either alphabetically or numerically)
  • add tertiary and tertiaryDark button styles to AppButton
  • update styling in TabBar.vue and TabItem.vue to remove unused CSS and add padding to ul element
  • update Combobox.Playground.vue and TabBar.vue components
  • Select SearchOptions accept an optional searchFunction
  • css updates on TabBar, Input element, FormLabel
  • Combobox qa corrections
  • Added LoadingProgressBar component, still needs documentation
  • Update IconButton documentation
  • Added icons: jva console, ai, duplicate, calendary, save
  • Select search text input placeholder width fix (take icon into account)
  • Update combobox to add a delete option, general style updates
  • TheLanguageSelector has a new property deriveLangFromClient that lets DEVs control whether or not TheLanguageSelector should set the user's browser language as the initial locale when loading an app (context: when doing so, the passed defaultLocale property when installing Vue-i18n will be overridden by the browser's language)
  • our vue-18n plugin wrapper function configureI18n now also accepts an options object with the corresponding keys
ts
export function configureI18n (
  projectLocales?: I18nOptions['messages'],
  defaultLanguage?: 'en' | 'de',
  warnHtmlMessage?: boolean,
  fallbackLocale?: 'en' | 'de'
): I18n
export function configureI18n (options: ConfigureI18nOptions): I18n
export function configureI18n (
  projectLocalesOrOptions: I18nOptions['messages'] | ConfigureI18nOptions,
  defaultLanguageFunc?: 'en' | 'de',
  warnHtmlMessageFunc?: boolean,
  fallbackLocaleFunc?: 'en' | 'de'
): I18n

export interface ConfigureI18nOptions {
  projectLocales?: I18nOptions['messages'];
  defaultLanguage?: 'en' | 'de';
  warnHtmlMessage?: boolean;
  fallbackLocale?: 'en' | 'de';
}

4.1.0 ​

  • Fix TextArea font was updated
  • Increase width of scrollbar thumb and add right margin The width was updated in the ::-webkit-scrollbar and ::-webkit-scrollbar-thumb CSS selectors.
  • deprecated NumberSelect and TextSelect in favor for the new generic Select component
  • same adaptations for Multiselect

Key differences in usage between Number-/TextSelect and Select (same-wise valid for Multiselect differences) ​

  • Select holds a v-model:search property for the search string
  • Select action property now only accepts Promise<void> as return type

4.0.0 ​

  • reworked ProgessSteps component in terms of completedSteps property
  • added Company definition to DS
  • adapted Logo props definition to meet new Company type
  • added Combobox component
  • Update colors and sizes of Icon Button
  • Improve color customization of Icon component

3.9.1 ​

  • fix FilterGroup alignment issue

3.9.0 ​

  • fix FilterGroup width calculation

3.8.6 ​

  • FilterGroup component in docs was called NumberFilterGroup by accident --> fixed
  • FilterGroup prop types get exported

3.8.5 ​

  • TabBar onMounted does not set active tab initially to prevent overriding what gets passed from outside

3.8.4 ​

  • ProgressSteps labels are now clickable, too
  • Icon jva_console added
  • FilterGroup divider color changed + alignment docs added
  • MultiSelect + Select fix click on ArrowButton when optionsList is opened does not close the list properly
  • MultiSelect fittingOptions will now search for any selected Options that might fit into the left space, instead of checking the following only
  • hovering a MultiSelect action button will not hover the whole option anymore
  • TreeBar bug fix update and provide values

FilterGroup ​

  • docs fixed
  • action button bg color transparent
  • deleted name property since obsolete
  • improved playground segment controls

3.7.0 ​

  • fixed missing export on TabItem component
  • rename TabItem props, and refactor of component
  • changed Component tab on TabItem that was causing errors
  • TheLanguageSelector now translates meta information of the page optionally
  • added new component FilterGroup

3.6.0 ​

  • fix missing export of Multiselect components
  • quote typography size change

3.5.0 ​

  • Fixed bug in the chips component delete button is now working
  • implemented modelValue for TreeItem and TabItem components

3.4.0 ​

  • Add toRouter optional prop to TreeItem and TreeBar components
  • Add toRouter prop to TabItem components
  • fixed bug, the button to expand on TabItem only displays the information, not redirecting through the router anymore

3.3.0 ​

  • deprecated colors are not documented anymore
  • SelectOptionGeneric has new property ignoreSearch that will ignore the corresponding option from being searched and therefore will always be shown in the results list
  • fixed bug on TextSelect component, it was opening multiple select elements at the same time when using keyboard actions
  • updated documentation for Select components

3.2.0 ​

  • Icons harmonized
  • FormLabel has been reworked
  • TreeBar uses the vue router, changed the "label" props to "name"
  • Added a subtitle to the TreeItem so now we can display secondary information of the element

v3.1.0 ​

  • Select focus state uses border instead of outline
  • Formula accepts various colors
  • fix variable assignment --bds-tertiaryText-color
  • Icons that have been updated: construction, logout, login. Icons documentation was updated.

v3.0.1 ​

  • fix Select option height
  • fix Select / Multiselect option width when no action available

v3.0.0 ​

  • added Link tertiary type and changed secondary type
  • add horizontal alignment to RadioSelect
  • fix gradient color tokens follow Figma names
  • add dark variant for AvatarCompact
  • Select components now can parse html code
  • added units to NumberInput
  • MultiSelect locked state redesign
  • MultiSelect fix searchInput not working
  • enable html parsing for MultiSelect
  • fix Checkbox with clickable label click on Checkbox didn't trigger click event
  • added action functionality to (Multi-)Select components

v2.4.0 ​

  • TextArea docs fixed
  • TextArea prop validation now only accepts 'invalid'
  • ProgressSteps checked icon size fix
  • ProgressSteps lines don't change when item is locked
  • NumberInput step increment fixed
  • when selecting Select's search input, options menu stays open

v2.3.0 ​

  • fix TabBar / TabItem props
  • TabBar redesign
  • TabBar now has first tab active when mounted
  • fix TextArea component
  • remove dimensioning from TextArea
  • allow NumberSelect & TextSelect

v2.2.0 ​

  • increased Switch clickable area
  • added truncation to Select placeholder
  • in Select no of shown options in dropdown now via property
  • import fractional effect tokens from Figma
  • assign semantic effect tokens to correct (fractional) values
  • allow string type for RadioSelectOption values
  • remove min-width from TextInput

v2.1.0 ​

  • fixing playground tables rendering
  • fixed an issue in NumberInput where the unit misplaced when having a HelpText
  • added units to NumberInput
  • color token renaming
  • the placeholder for the search TextInput in Select and Multiselect components is now editable with fallback value
  • Checkbox form label clickable fix + resizing of component
  • TextArea fixes
  • RadioSelect labelTrailing label cut-off fix
  • Switch clickableLabel click behavior fix
  • Switch effects updated
  • Switch clickable area increased
  • RadioSelect states adapted to current design
  • reworked Checkbox states to meet current design

v2.0.0 ​

  • fixed locked placeholder color in TextInput
  • added truncation to lozenge component
  • added optional restriction to Lozenge of 2 words (enabled by default, otherwise you have to set 'unlimitWordCount: true')!
  • added NumberMultiselect and TextMultiselect components
  • added documentation for ProgressSteps
  • added bootstrap's grid system to our DS via bootstrap-grid-css package

v1.4.0 ​

  • fixed a bug on the TextArea that didn't allow to dynamically change hight and width of the component
  • label optionally clickable for Checkbox
  • label optionally clickable for RadioSelect
  • label clickable for Switch
  • fix gap between Logo and Text for Anagram custom compact variant
  • Select dropdown size changed
  • add sorting feature to Select component
  • add text search feature to Select component

v1.3.1 ​

  • added ProgressSteps component
  • fixed module type export
  • enable to group disabled options in select component
  • changed typography for treeBarItem from h4-key-functionality to %body
  • TabBarItem is no longer exported, since it should not be used by users
  • ProgressSteps module export fixed
  • changed AnagramCustom size
  • add new AnagramCustom type compact
  • fixed i18n messages interface to match current @intlify/unplugin-vue-i18n version
  • on Tooltip component property position got renamed to tooltipPosition to avoid confusion in components that inherit from tooltip
  • add NumberInput component
  • fix TabBar for plugin environment

v1.2.0 ​

  • changed the hex value for color token grey 95 from #F0F0F0 to #EBEBEB
  • added TextArea component