Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bugfix: Table "no rows to show" - text alignment fixed + continued enhancements for advanced table #988

Open
wants to merge 86 commits into
base: master
Choose a base branch
from
Open

Bugfix: Table "no rows to show" - text alignment fixed + continued enhancements for advanced table #988

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
86 commits
Select commit Hold shift + click to select a range
6ba6255
no rows to show text alignment fixed
Feb 6, 2024
18963af
adv table + basic table no rows text fixed alignment; adv table added…
Feb 11, 2024
b926801
button cell renderer fixed for advanced table
Feb 12, 2024
d651ada
added to react example, refactored table code
Feb 13, 2024
c81815f
added to example apps
Feb 13, 2024
b9a5be7
incl check for cols and rows to be undefined
Feb 13, 2024
760dd52
set-filter component added and tested within table on storybook
Feb 16, 2024
68240dc
wd cleaned
Feb 16, 2024
f6e4696
wd cleaned
Feb 18, 2024
32f2605
wd cleaned
Feb 18, 2024
83b05b9
wd cleaned
Feb 18, 2024
50080cf
wd cleaned
Feb 18, 2024
40d2b1b
rm node_modules in react wrapper
Feb 18, 2024
cae38b0
rm node_modules in wrapper packes before deployment
Feb 18, 2024
635ef9b
reverted the last change
Feb 18, 2024
653f8d6
reverted the last change
Feb 18, 2024
52f6711
shipit_PR yml update
Feb 19, 2024
9e36d7a
set-filter added to table; development.mdx for table story updated
Feb 19, 2024
3c0a940
renamed css class within table component
Feb 23, 2024
9b3c1bd
adv-table filter orientation added
Mar 19, 2024
469ec0b
basic filtering logic and switching between filter views working
Mar 21, 2024
1f1c785
added ifx button as show/hide button for sidebar orientation of filters
Mar 26, 2024
eaa6e25
Merge branch 'master' into 987-text-inside-table-collides-with-table-…
Apr 25, 2024
a41eb1b
set-filter styling update
Apr 25, 2024
698ae68
Merge branch 'master' into 987-text-inside-table-collides-with-table-…
Apr 25, 2024
8f7c043
regenerated readme files for components
Apr 25, 2024
1f711da
filter-search component created
May 2, 2024
5bf8e80
e2e test added
May 2, 2024
7cdcdb7
removed story file, cause it is not designed to be used as a standalo…
May 2, 2024
694a055
filter-accordion
May 2, 2024
4891683
filter-type-group component created
May 2, 2024
682b8ab
filter-group-type component done
May 3, 2024
91d822f
props added
May 3, 2024
28ee5e0
actions added to storybook for the filter-group-type
May 3, 2024
33708ab
number indicator inside filter-accordion fix
May 3, 2024
1130168
cursor appears when hovering over the + icon of the filter-accordion
May 3, 2024
ebc0367
border fixed
May 3, 2024
05035bc
restructuring and improved output for filter type group
May 6, 2024
3e30242
filter type group story updated
May 6, 2024
a57e62e
restructured filter component + created new list component to be used…
May 6, 2024
cc24e77
restructured filter component + created new list component to be used…
May 6, 2024
e3653bd
filter-type-group story bugfix
May 6, 2024
5242482
added list to example apps
May 7, 2024
14afaaa
bugfix angular deployment
May 7, 2024
9d40f3a
Merge branch '1209-component-filter-accordion' into 987-text-inside-t…
May 7, 2024
4e9679a
show-delete-icon set to true
May 24, 2024
f3a47e4
Merge branch '1209-component-filter-accordion' into 987-text-inside-t…
May 24, 2024
602fb22
table test-using filter-type-group component
May 24, 2024
c3fe22b
renamed property of list component updated in filter-type-group stories
May 24, 2024
5968152
Merge branch '1209-component-filter-accordion' into 987-text-inside-t…
May 24, 2024
7cd3c92
merged latest changes from filter-accordion branch into this branch
May 27, 2024
bd3dd92
Fixed remaining issues commented in the PR
May 27, 2024
002dcfa
Merge branch 'master' into 1209-component-filter-accordion
verena-ifx Jun 11, 2024
c9ad687
rm console msg
verena-ifx Jun 11, 2024
13a865f
added to example apps - issues with list not showing as hydrated in v…
verena-ifx Jun 12, 2024
b347c63
list working now on vanilla as well
verena-ifx Jun 12, 2024
3f1527a
Merge branch 'master' into 1209-component-filter-accordion
verena-ifx Jun 12, 2024
dc2949b
react filtertypegroup component imported correctly
verena-ifx Jun 12, 2024
1a8a9e9
removed list from sidebar story list; fixed moving border of filter-a…
verena-ifx Jun 13, 2024
436f412
reverted the change of where to set selectedItems + count
verena-ifx Jun 13, 2024
9a6ede1
bugfix of number indicator not showing correct amount of included items
verena-ifx Jun 14, 2024
4f5b21c
Merge branch '1209-component-filter-accordion' into 987-text-inside-t…
verena-ifx Jun 17, 2024
eba332f
filter-type-group story cleaned up
verena-ifx Jun 17, 2024
81c3ed5
Merge branch '1209-component-filter-accordion' into 987-text-inside-t…
verena-ifx Jun 17, 2024
7e8a90c
Merge branch 'master' into 1209-component-filter-accordion
verena-ifx Jul 5, 2024
72fe20f
filter-type-component now working with plain js
verena-ifx Jul 8, 2024
0eb443d
Merge branch '1209-component-filter-accordion' into 987-text-inside-t…
verena-ifx Jul 8, 2024
b46b74c
table now showing on vanilla example app
verena-ifx Jul 8, 2024
82f4fe6
table component updated with revised filter component
verena-ifx Jul 9, 2024
7a2cec5
reset filter logic incorporated
verena-ifx Jul 10, 2024
100f8ca
reset filters implemented, improvements to table sidebar filter view
verena-ifx Jul 10, 2024
c77aaad
Merge branch '1209-component-filter-accordion' into 987-text-inside-t…
verena-ifx Jul 10, 2024
da40f87
topbar filtering + sidebar filtering template
verena-ifx Jul 11, 2024
cbea629
topbar filtering with more filters button
verena-ifx Jul 11, 2024
140ca32
Merge branch 'master' into 987-text-inside-table-collides-with-table-…
verena-ifx Jul 26, 2024
a16b16c
Merge 140ca32b78a6f4ce0778c34a04e45154f83ddc4c into a6a0b7595ae15b123…
verena-ifx Jul 26, 2024
82012c2
Update Stencil library version to 24.1.1--canary.988.5a8dd2928cf90e50…
invalid-email-address Jul 26, 2024
16dbd11
Merge branch 'master' into 987-text-inside-table-collides-with-table-…
verena-ifx Jul 29, 2024
ca8a781
Merge remote-tracking branch 'origin/987-text-inside-table-collides-w…
verena-ifx Jul 29, 2024
848c1dd
merged master into feature branch
verena-ifx Aug 6, 2024
823afe8
Merge 848c1dd96d3b09c46aa4db2dbc00de5cb6887e5e into d0cdcfe8984261373…
verena-ifx Aug 6, 2024
ee1266a
Update Stencil library version to 24.3.2--canary.988.41dbb5e256fc8604…
invalid-email-address Aug 6, 2024
854c17a
Merge branch 'master' into 987-text-inside-table-collides-with-table-…
verena-ifx Aug 23, 2024
2180225
merging remote branch into local branch
verena-ifx Aug 23, 2024
71edf24
Merge 2180225468a915821e8ed190562427a69367cfa3 into cffa139ed72679499…
verena-ifx Aug 23, 2024
88de7a8
Update Stencil library version to 24.6.1--canary.988.71edf246d3750bed…
invalid-email-address Aug 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
207 changes: 157 additions & 50 deletions examples/stencil-components/vanilla-cdn/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,9 @@
<body>

<div>
<ifx-navbar show-logo-and-appname="true" application-name="App name" fixed="false" logo-href="http://google.com" logo-href-target="_self">
<ifx-navbar-item icon="calendar16" slot="left-item" target="" href="" >
<ifx-navbar show-logo-and-appname="true" application-name="App name" fixed="false" logo-href="http://google.com"
logo-href-target="_self">
<ifx-navbar-item icon="calendar16" slot="left-item" target="" href="">
Menu Item 1
<ifx-navbar-item icon="calendar16">
Layer 1 Nested Item 1
Expand All @@ -27,40 +28,41 @@
<ifx-navbar-item>Layer 3 Nested Item 3</ifx-navbar-item>
<ifx-navbar-item>Layer 3 Nested Item 4</ifx-navbar-item>
</ifx-navbar-item>
<ifx-navbar-item >Layer 2 Nested Item 3</ifx-navbar-item>
<ifx-navbar-item>Layer 2 Nested Item 3</ifx-navbar-item>
<ifx-navbar-item>Layer 2 Nested Item 4</ifx-navbar-item>
<ifx-navbar-item>Layer 2 Nested Item 5</ifx-navbar-item>
</ifx-navbar-item>

<ifx-navbar-item>
Layer 1 Nested Item 2
<ifx-navbar-item>Layer 2 Item 1</ifx-navbar-item>
<ifx-navbar-item>Layer 2 Item 2</ifx-navbar-item>
<ifx-navbar-item>Layer 2 Item 3</ifx-navbar-item>
</ifx-navbar-item>

<ifx-navbar-item>Nested Item 3</ifx-navbar-item>

<ifx-navbar-item>
Layer 1 Nested Item 4
<ifx-navbar-item>Nested Item 4</ifx-navbar-item>
</ifx-navbar-item>

</ifx-navbar-item>

<ifx-navbar-item href="http://google.com" target="_blank" slot="left-item" icon="calendar16" show-label="true">
Menu Item 2
</ifx-navbar-item>

<ifx-navbar-item slot="left-item">
More
<ifx-navbar-item>Item1</ifx-navbar-item>
<ifx-navbar-item>Item2</ifx-navbar-item>
</ifx-navbar-item>

<ifx-search-bar slot="search-bar-left" is-open="false"></ifx-search-bar>

<ifx-navbar-item slot="right-item" target="_blank" href="http://google.com" hide-on-mobile="false" show-label="false" icon="cartf16">Right Item</ifx-navbar-item>

<ifx-navbar-item slot="right-item" target="_blank" href="http://google.com" hide-on-mobile="false"
show-label="false" icon="cartf16">Right Item</ifx-navbar-item>
<ifx-navbar-item slot="right-item" hide-on-mobile="true" show-label='true' icon="airplane16">
Right Item
<ifx-navbar-item>
Expand All @@ -74,8 +76,10 @@
</ifx-navbar-item>
</ifx-navbar-item>
</ifx-navbar-item>

<ifx-navbar-profile slot="right-item" image-url="https://i.pinimg.com/originals/82/d4/92/82d4926dcf09dd4c73eb1a6c0300c135.jpg" show-label="true" href="" target="_blank">

<ifx-navbar-profile slot="right-item"
image-url="https://i.pinimg.com/originals/82/d4/92/82d4926dcf09dd4c73eb1a6c0300c135.jpg" show-label="true"
href="" target="_blank">
User
<ifx-navbar-item>
Item
Expand Down Expand Up @@ -237,7 +241,39 @@ <h2>Dropdown</h2>
</ifx-dropdown-menu>
</ifx-dropdown>
<br />
<br />

<h2>FilterTypeGroup</h2>
<div><ifx-filter-type-group id="filter-type-group">
<div slot="filter-search">
<ifx-filter-search filter-name="Your filter name"></ifx-filter-search>
</div>
<div slot="filter-accordion">
<ifx-filter-accordion filter-group-name="Filter group 1">
<ifx-list slot="list" type="checkbox" name="Filter group 1" max-visible-items="10">
<ifx-list-entry slot="slot0" label="Filter 1" value="true"></ifx-list-entry>
<ifx-list-entry slot="slot1" label="Filter 2" value="false"></ifx-list-entry>

</ifx-list>
</ifx-filter-accordion>
<ifx-filter-accordion filter-group-name="Filter group 2">
<ifx-list slot="list" type="radio-button" name="Filter group 2" max-visible-items="6">
<ifx-list-entry slot="slot0" label="Filter 1" value="true"></ifx-list-entry>

<ifx-list-entry slot="slot1" label="Filter 2" value="false"></ifx-list-entry>

<ifx-list-entry slot="slot2" label="Filter 3" value="true"></ifx-list-entry>

<ifx-list-entry slot="slot3" label="Filter 4" value="false"></ifx-list-entry>

</ifx-list>
</ifx-filter-accordion>
</div>
</ifx-filter-type-group>
</div>

<br />
<br />

<h2>Icon Button</h2>
<ifx-icon-button shape="round" variant="primary" icon="calendar16" href="http://google.com" target="" size="s"
Expand All @@ -251,7 +287,6 @@ <h2>Link</h2>
<br />
<br />


<h2>Modal</h2>
<div><ifx-modal id="modal" caption="Modal Title" variant="default" close-on-overlay-click="false">
<div slot="content">
Expand Down Expand Up @@ -302,7 +337,7 @@ <h2>Spinner</h2>

<h2>Sidebar</h2>

<ifx-sidebar application-name="Application Name" initial-collapse = false >
<ifx-sidebar application-name="Application Name" initial-collapse=false>
<ifx-sidebar-title>Item Header</ifx-sidebar-title>
<ifx-sidebar-item>
Header Section
Expand Down Expand Up @@ -392,46 +427,92 @@ <h2>Tabs</h2>
<br />

<h2>Stepper</h2>
<ifx-stepper id = "stepper" showNumber=false activeStep=2 variant = 'default' >
<ifx-stepper id="stepper" showNumber=false activeStep=2 variant='default'>
<ifx-step> Step 1 </ifx-step>
<ifx-step> Step 2 </ifx-step>
<ifx-step error = true> Step 3 </ifx-step>
<ifx-step error=true> Step 3 </ifx-step>
<ifx-step> Step 4 </ifx-step>
<ifx-step> Step 5 </ifx-step>
</ifx-stepper>
<ifx-button variant="secondary" onClick="prevStep()"> Previous Step</ifx-button>
<ifx-button variant="primary" onClick="toggleShowNumber()"> Toggle Show Number </ifx-button>
<ifx-button variant="primary" onClick="toggleVariant()"> Toggle Variant </ifx-button>
<ifx-button variant="secondary" onClick="nextStep()"> Next Step</ifx-button>
<br/>
<br/>

<h2>Status</h2>
<ifx-status label="Status with border" color="orange" border="true" />
<ifx-status label="Status without border" color="orange" border="false" />
<br />
<br />





<h2>Tag</h2>
<ifx-tag>tag</ifx-tag>
<br />
<br />

<h2>
Table
Table (Basic)
</h2>
<ifx-basic-table row-height='default'
cols='[{"headerName":"Make","field":"make","sortable":true,"sort":"desc","unSortIcon":true},{"headerName":"Model","field":"model","sortable":true,"unSortIcon":true},{"headerName":"Price","field":"price"},{"headerName":"Age","field":"age"}]'
rows='[{"make":"Toyota","model":"Celica","price":35000,"age":10},{"make":"Ford","model":"Mondeo","price":32000,"age":12},{"make":"Porsche","model":"Boxster","price":72000}]'
table-height='auto'>
<ifx-basic-table id="basic-table" row-height='default' cols="" rows="" table-height='auto'>
</ifx-basic-table>
<br />
<br />

<h2>
Table (Advanced)
</h2>
<div>
<ifx-table id="adv-table" row-height="default" cols="" rows="" table-height="auto" pagination="false"
pagination-page-size="10" enable-filtering="true" filter-orientation="sidebar">
<ifx-filter-type-group slot="sidebar-filter">
<div slot="filter-search">
<ifx-filter-search filter-name="Your filter name"></ifx-filter-search>
</div>

<ifx-filter-accordion slot="filter-accordion" filter-group-name="make">
<ifx-list slot="list" type="radio-button" name="make" max-visible-items="6">
<ifx-list-entry slot="slot0" label="Toyota" value="false"></ifx-list-entry><ifx-list-entry slot="slot1"
label="Ford" value="false"></ifx-list-entry><ifx-list-entry slot="slot2" label="Porsche"
value="false"></ifx-list-entry>
</ifx-list>
</ifx-filter-accordion>

<ifx-filter-accordion slot="filter-accordion" filter-group-name="model">
<ifx-list slot="list" type="checkbox" name="model" max-visible-items="6">
<ifx-list-entry slot="slot0" label="Celica" value="false"></ifx-list-entry><ifx-list-entry slot="slot1"
label="Mondeo" value="false"></ifx-list-entry><ifx-list-entry slot="slot2" label="Boxster"
value="false"></ifx-list-entry>
</ifx-list>
</ifx-filter-accordion>

<ifx-filter-accordion slot="filter-accordion" filter-group-name="price">
<ifx-list slot="list" type="radio-button" name="price" max-visible-items="6">
<ifx-list-entry slot="slot0" label="35000" value="false"></ifx-list-entry><ifx-list-entry slot="slot1"
label="32000" value="false"></ifx-list-entry><ifx-list-entry slot="slot2" label="72000"
value="false"></ifx-list-entry>
</ifx-list>
</ifx-filter-accordion>

<ifx-filter-accordion slot="filter-accordion" filter-group-name="age">
<ifx-list slot="list" type="radio-button" name="age" max-visible-items="6">
<ifx-list-entry slot="slot0" label="10" value="false"></ifx-list-entry><ifx-list-entry slot="slot1"
label="12" value="false"></ifx-list-entry>
</ifx-list>
</ifx-filter-accordion>

<ifx-filter-accordion slot="filter-accordion" filter-group-name="button">
<ifx-list slot="list" type="radio-button" name="button" max-visible-items="6">
<ifx-list-entry slot="slot0" label="something about Toyota"
value="something about Toyota"></ifx-list-entry><ifx-list-entry slot="slot0"
label="something about Ford" value="something about Ford"></ifx-list-entry><ifx-list-entry slot="slot0"
label="[object Object]" value="[object Object]"></ifx-list-entry>
</ifx-list>
</ifx-filter-accordion>

</ifx-filter-type-group>
</ifx-table>
</div>
<br />
<br />



<form id="another-form">
<h2>Text Field</h2>
Expand Down Expand Up @@ -566,6 +647,9 @@ <h5 slot="title">Title</h5>
const textInputSpan = document.querySelector("#textInputSpan");
const sidebarItem = document.querySelector('#sidebarItemClickable');

const basicTable = document.querySelector('#basic-table');
const advancedTable = document.querySelector('#adv-table');


function updateValues() {
checkbox.setAttribute('disabled', disabled);
Expand Down Expand Up @@ -659,24 +743,41 @@ <h5 slot="title">Title</h5>
const singleSelectOptions = '[{ "value": "a", "label": "option a", "selected": true }, { "value": "b", "label": "option b", "selected": false }, { "value": "c", "label": "option c", "selected": false }]';
singleSelect.setAttribute('options', singleSelectOptions);

// Set buttons to update single select
singleSelectDisabledBtn.addEventListener('click', () => {
const disabled = singleSelect.getAttribute('disabled');
singleSelect.setAttribute('disabled', disabled === 'false' ? true : false);
});

singleSelectErrorBtn.addEventListener('click', () => {
const error = singleSelect.getAttribute('error');
singleSelect.setAttribute('error', error === 'false' ? true : false);
})
//set advanced table row values using a json array
const tableRows = `[
{ "make": "Toyota", "model": "Celica", "price": 35000, "age": 10 },
{ "make": "Ford", "model": "Mondeo", "price": 32000, "age": 12 },
{ "make": "Porsche", "model": "Boxster", "price": 72000 },
{ "make": "Bmw", "model": "x", "price": 72000 },
{ "make": "Mercedes", "model": "y", "price": 72000 },
{ "make": "Ferrari", "model": "z", "price": 72000 },
{ "make": "Chrysler", "model": "a", "price": 72000 },
{ "make": "Range rover", "model": "b", "price": 72000 },
{ "make": "Tesla", "model": "x", "price": 72000 },
{ "make": "Audi", "model": "3", "price": 72000 },
{ "make": "Landrover", "model": "x", "price": 72000 }
]`;

basicTable.setAttribute('rows', tableRows);
advancedTable.setAttribute('rows', tableRows);

//set advanced table row values using a json array
const tableColumns = `[
{ "headerName": "Make", "field": "make", "sortable": true, "sort": "desc", "unSortIcon": true },
{ "headerName": "Model", "field": "model", "sortable": true, "unSortIcon": true },
{ "headerName": "Price", "field": "price" },
{ "headerName": "Age", "field": "age" }
]`;
basicTable.setAttribute('cols', tableColumns);
advancedTable.setAttribute('cols', tableColumns);



cardBtn.addEventListener('click', () => {
console.log("card button click event");
});



searchField.addEventListener('ifxInput', (event) => {
console.log("search field value", event.detail);
});
Expand All @@ -689,37 +790,43 @@ <h5 slot="title">Title</h5>
console.log('Sidebar item clicked', event.detail);
});


advancedTable.addEventListener('ifxFilterTypeGroupChange', (event) => {
console.log("table filter value", event.detail);
});

});



function handleModalButton2Click() {
console.log("Modal Button 2 clicked")
modal.opened = false;
}

const stepper = document.querySelector('#stepper');
function nextStep(){
function nextStep() {
stepper.activeStep += 1;
stepper.activeStep = Math.min(stepper.activeStep, 6);
}

function prevStep(){
function prevStep() {
stepper.activeStep -= 1;
stepper.activeStep = Math.max(0, stepper.activeStep);
}

function toggleShowNumber(){
function toggleShowNumber() {
stepper.showNumber = !stepper.showNumber;
}

function toggleVariant(){
if(!stepper.variant || stepper.variant === 'default'){
function toggleVariant() {
if (!stepper.variant || stepper.variant === 'default') {
stepper.variant = 'compact';
}else{
} else {
stepper.variant = 'default';
}
}
stepper.addEventListener('ifxActiveStepChange', (event)=>{
stepper.addEventListener('ifxActiveStepChange', (event) => {
console.log('Stepper active step changed ', event.detail)
})

Expand Down
4 changes: 2 additions & 2 deletions examples/stencil-components/vanilla-cdn/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"update-link": "node update-link.js",
"dev": "vite",
"dev:watch": "run-p build:stencil dev watch",
"build:stencil": "npm i && cd ../../../packages/components && npm run dev:stencil",
"build:stencil": "cd ../../../packages/components && npm run dev:stencil",
"watch": "nodemon --watch ../../../packages/components/dist --exec \"node utils/copy.js\"",
"build": "vite build",
"preview": "vite preview"
Expand All @@ -24,7 +24,7 @@
},
"dependencies": {
"@infineon/design-system-tokens": "3.3.2--canary.35.37fb280e88ed6cac90c421f89ba851375e93e62d.0",
"@infineon/infineon-design-system-stencil": "20.44.1--canary.952.e2740b8e640aa78a0a199512580d52d96004104f.0",
"@infineon/infineon-design-system-stencil": "^20.44.1--canary.952.e2740b8e640aa78a0a199512580d52d96004104f.0",
"typescript": "^4.5.4"
}
}
Loading