Merge pull request #340 from otto-de/beta

Beta

Author: AnnaHoege

ADRs/007_Table_component.md

@@ -1,6 +1,6 @@
 # 007. Table component
 
-Last update: 19.09.2022
+Last update: 29.11.2023
 
 ## Background
 
@@ -36,6 +36,7 @@ Advantages
 - Passing other components as children is straight forward using slots
 
 Challenges
+- We cannot make use of native table features such as col- or rowspans
 - We could not use html semantic table elements as the host web component breaks the 
   semantic structure:
 
@@ -46,18 +47,31 @@ Challenges
       <header>
       ...
 ```
+#### 3. Using components that semantically resemble the html table structure but use flexbox
+
+Advantages
+- Most table features to date can be displayed using flexbox
+- Gives the freedom to add colspans for headers and cells
+
+Challenges
+- Having a table that expands columns to fit the largest content of all cells in that column is not possible
+- Only fixed width or equal width can be achieved
+- Text truncation and overflow are harder to handle
 
 ### Decision
 
 We decided for option two as the ability to pass children components is a must-have. Hopefully if that can be solved 
 in the future we may be able to have a table-data component that encapsulates better the table.
 
+The flexbox model is only adapted for tables that require the colspan feature as not all existing features (text truncation and expansion on hover, expanding column sizes) can be realized while applying flexbox. This also saves performance as dynamic
+calculation of cell width via JavaScript could be a performance issue in larger tables. 
+
 ### Note
 We implemented the table using shadow dom for consistency and to support slots, but most of the classes are 
 declared in the host elements meaning they live still in the light-dom and can be overwritten.
 
 This was necessary because of how the elements are structured, where all children are passed in slots but are still 
-part of the light-dom. For any `dysplay` styles to work it needs to be declared in the light-dom as well.
+part of the light-dom. For any `display` styles to work it needs to be declared in the light-dom as well.
 
 ### Links
 Examples of table-data implementations (option1)

CHANGELOG.md

@@ -1,10 +1,23 @@
-## [1.8.2](https://github.com/otto-de/b2b-design-system/compare/v1.8.1...v1.8.2) (2023-12-01)
+# [1.9.0-beta.2](https://github.com/otto-de/b2b-design-system/compare/v1.9.0-beta.1...v1.9.0-beta.2) (2023-11-28)
+
+### Bug Fixes
 
+* **Icon:** added inheritable color for warning hint icon ([dfebdfc](https://github.com/otto-de/b2b-design-system/commit/dfebdfcbecc4f453b2cd4a83f93b9cfacfb81139))
+
+# [1.9.0-beta.1](https://github.com/otto-de/b2b-design-system/compare/v1.8.1...v1.9.0-beta.1) (2023-11-27)
+
+
+### Features
+
+* **Icon:** added warning-hint icon ([a1823b5](https://github.com/otto-de/b2b-design-system/commit/a1823b5a7f7fa7399bb6f3f46f5e17aaf8292431))
+
+## [1.8.2](https://github.com/otto-de/b2b-design-system/compare/v1.8.1...v1.8.2) (2023-12-01)
 
 ### Bug Fixes
 
 * **Anchor:** [B2BDS-237] added forced stacking context to avoid host element hiding anchor ([35d235c](https://github.com/otto-de/b2b-design-system/commit/35d235cce239afbac761db403669a77dcea289ba))
 
+
 ## [1.8.1](https://github.com/otto-de/b2b-design-system/compare/v1.8.0...v1.8.1) (2023-11-22)
 
 

package-lock.json

@@ -9,4 +9,5 @@ document.head.appendChild(link);
 
 addons.setConfig({
   theme: customTheme,
+  enableShortcuts: false,
 });

packages/core-components/.storybook/manager.js

@@ -11,3 +11,12 @@
     margin-bottom: 8px !important;
   }
 }
+
+.docs-button-obc-overwrite {
+  appearance: none;
+  -webkit-appearance: none !important;
+  button, a, [type=button] {
+    appearance: none;
+    -webkit-appearance: none !important;
+  }
+}

packages/core-components/.storybook/storybook.scss

@@ -9,9 +9,9 @@ const ignoredStories = [
   'components-interaction-tooltip--story-010-hover',
   'components-interaction-tooltip--story-020-focus',
   'components-interaction-tooltip--story-030-custom',
-  'designtokens-color--story-010-color-tokens',
-  'designtokens-font--story-010-font-tokens',
-  'designtokens-size--story-010-size-tokens',
+  'design-tokens-color--story-010-color-tokens',
+  'design-tokens-font--story-010-font-tokens',
+  'design-tokens-size--story-010-size-tokens',
 ];
 
 module.exports = {

packages/core-components/.storybook/test-runner.ts

@@ -8,4 +8,4 @@
   "es2015": "./index.es2017.js",
   "es2017": "./index.es2017.js",
   "unpkg": "./cdn.js"
-}
+}

packages/core-components/__snapshots__/components-content-headline--story-030-size-200.png

@@ -1,6 +1,6 @@
 {
   "name": "@otto-de/b2b-core-components",
-  "version": "1.8.2",
+  "version": "1.9.0-beta.2",
   "description": "Core components defined with Stencil",
   "author": "Otto GmbH",
   "license": "Apache-2.0",
@@ -39,7 +39,7 @@
     "build:storybook": "npm run copy-md-files && storybook build -o docs-build/design-system"
   },
   "dependencies": {
-    "@otto-de/b2b-tokens": "1.8.2",
+    "@otto-de/b2b-tokens": "1.9.0-beta.2",
     "@stencil-community/eslint-plugin": "^0.5.0",
     "@stencil/core": "^4.7.0"
   },