elements

What's Changed

• fix: radio button incorrect behavior by @bendera in https://github.com/bendera/vscode-webview-elements/pull/60

Full Changelog: https://github.com/bendera/vscode-webview-elements/compare/v0.13.0...v0.13.1

Added

Sometimes VSCode theme variables are renamed or removed by the VSCode authors. When this happens the appearance
of the components will change unpredictably. To prevent this, every component got a fallback style.
The components will look "good" even if no theme variables are available.

Changed

• Button and ContextMenu styles were updated to follow VSCode changes.
• Customizable header background color and tinted row background color instead of the hard-coded ones in Table.

Full Changelog: https://github.com/bendera/vscode-webview-elements/compare/v0.12.0...v0.13.0

Changed

• Textarea: The default display is inline-block, the default size is 320 x 40. It is automatically resized when rows or cols attributes are set.
• Textarea: Follow the source control input box styles of VSCode more closely:
  • Change the cursor to hand when it is above the scrollbar.
  • Add an unobtrusive drop shadow when the text is scrolled.
  • Add active state to the scrollbar.
• Textarea: Fixed the ugly resize handler when the scrollbar is visible.
• Textfield: Customize the file input button styles.

Full Changelog: https://github.com/bendera/vscode-webview-elements/compare/v0.11.0...v0.12.0

What's Changed

• Add rows and cols attributes to textarea by @chrjorgensen in https://github.com/bendera/vscode-webview-elements/pull/48
• fix(Textarea): default foreground color by @bendera in https://github.com/bendera/vscode-webview-elements/pull/49

New Contributors

• @chrjorgensen made their first contribution in https://github.com/bendera/vscode-webview-elements/pull/48

Full Changelog: https://github.com/bendera/vscode-webview-elements/compare/v0.10.3...v0.11.0

Fixed

• Textfield and Textarea values were not collected in the FormContainer form data.
• The value of the value property was not appropriately synchronized with the value of the inner form widget in Textfield and Textarea.
• Fix top-margin of Textfield and Textarea in FormGroup when its variant is "settings-group".

Changed

• Allow file type in Textfield

Fixed

• Fixed whitespace in Label when the asterisk symbol is visible

Added

• Label Added required attribute

Changed

• SingleSelect, MultiSelect Minor CSS changes to better mimic VSCode styles

Changed

• Adapted latest VSCode design changes on the ContextMenu and the InputBox.

Fixed

• Text inputs could not be edited in tab panels.

The project is still alive!!

Although not all the components are finished yet, much effort has been made to accessibility. The following components are fully accessible and can be controlled by a keyboard: Button, Tabs, Textinput, Textarea, Radio, Checkbox, Icon (in the action-icon mode).

Breaking changes

• Attribute names have been standardized. From now every attribute name uses the kebab-case format.
• selectedIndex attribute was renamed to selected-index in the Tabs component.
• iconAfter attribute was renamed to icon-after in the Button component.
• selectedIndexes attribute is removed from the MultiSelect component. It still accessible as a property.
• scrollPos attribute was renamed to scroll-pos in the Scrollable component.
• scrollMax attribute was renamed to scroll-max in the Scrollable component.
• selectedIndex attribute was renamed to selected-index in the SingleSelect component.
• resetOnDblClick attribute was renamed to reset-on-dbl-click in the SplitLayout component.
• columnLabel attribute was renamed to column-label in the TableCell component.
• The Tabs component markup has been changed. See the documentation page for examples.

Deprecated

• Inputbox has been deprecated. Use the Textarea or Textfield instead.

Added

• Added Textfield and Textarea components.

Changed

• Lit upgraded to 2.4.x.
• Added keyboard navigation to ContextMenu.
• Adapted the latest VSCode button styles (rounded corner).
• Added aria-checked attribute to the radio buttons.
• Icon component accessibility improvements.
• Tabs component is fully accessible.
• Radio and Checkbox are accessible.
• TabHeader and TabPanel were added to interoperate with Tabs.
• addons slot has been added to the Tabs toolbar.
• content-before and content-after slots have been added to the tab headers.
• Label automatically sets the label for radios, checkboxes, and text inputs.

Fixed

• Fixed the active state bug in the ContextMenu
• Fixed the Select height

Fix #32

Fixed

• The label didn't connect to the input widget in the shadow DOM.

Added

• Added @attr jsdoc tag to the "name" attribute to prevent the "unknown attribute" warnings in the supported IDEs.

Fixed

• Tree: focused list item outline offset

Fix: Updated icon colors as in VSCode

• Icon:
  • added proper theme variables
  • added action icon pressed style
  • added focus border style
• Collapsible:
  • keyboard support
  • icon visibility mimics the VSCode behavior: it is visible when the panel is open
• Table: added responsive mode
• SplitLayout: added hover color

Fixed

Inputbox: Type definition fine-tuning

• Flexible table columns
• Small documentation changes in the Inputbox which provides better code completion

Added

• Added Table component
• Added action-icon mode to the Icon

Changed

• Floating scrollbar in the Scrollable component