scania-digital-design-system/tegel

Tegel Design System

tegel's Issues

[Bug report]: TdsHeaderItem ignores slot="end" when *ngIf directive value changes

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel-angular: 1.6.1

Browser

Firefox

Framework

Angular

Version

Angular 16.2.0

Reproduction steps

1. Write a TdsHeader and one or more TdsHeaderItem elements in your html template
2. Set an *ngIf directive on the TdsHeaderItem together with slot="end"
3. Change the value *ngIf directive

Code example

HTML template:

<tds-header *ngIf="vm$ | async as vm">
  <!-- Other items -->
  <tds-header-item slot="end" *ngIf="vm.user" title="Orders">
    <a routerLink="/orders">Orders</a>
  </tds-header-item>
  <!-- Other items -->
</tds-header>

TS component:

export class NavbarComponent {  
  private readonly document: Document = inject(DOCUMENT);

  // KeyPress event to toggle the ngIf directive
  private readonly user$ = fromEvent<KeyboardEvent>(
    this.document,
    'keydown'
  ).pipe(
    filter((e: KeyboardEvent) => e.key === 'x'),
    startWith(undefined),
    scan((acc: boolean) => !acc, false)
  );

  // View model for the html template
  readonly vm$ = combineLatest({
    user: this.user$,
    // Other exposed variables
  }).pipe(
    //concatMap((value) => of(null, value).pipe(delay(0)))
  );
}

Please note that I’ve constructed a basic example to illustrate this issue. You can replicate the behavior by copying and pasting the provided code into your environment. Once you’ve done that, press X in your browser to toggle the value of the *ngIf directive. Initially, you’ll observe that it renders on the right side. However, upon disabling and re-enabling it, the rendering shifts to the left instead of maintaining its position on the right.

I’ve implemented a temporary workaround for this issue by triggering a ‘re-render’ of the entire TdsHeader component whenever the view model vm$ emits. However, this is merely a quick fix as it causes all child components to re-render as well. To illustrate this, please uncomment the concatMap function operator in the pipe. Here’s what happens: when vm$ emits, it first emits a null value. This effectively unrenders the entire TdsHeader component due to its *ngIf directive: <tds-header *ngIf="vm$ | async as vm">. Following this, it emits the actual value, which triggers a re-render of the entire TdsHeader component. As a result, the TdsHeaderItems are correctly positioned.

Screenshots

Expected behaviour

The TdsHeaderItem element should consistently stay anchored to the right side, regardless of whether the element has been re-rendered or not.

Console errors

No response

Contact information

[email protected]

[Bug report]: Table header arrows pointing in the wrong direction

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel-angular: 1.8.0

Browser

Chrome

Framework

Angular

Version

Angular 17

Reproduction steps

There are 2 bugs

• Add a tds table with sortable header
• Add a console log that captures the emitted event when you click to sort by column header
• Bug no 1: All arrows pointing down on hover (even though I have not sorted any column).
• Bug no 2: When the event emits "desc", the arrow ends up pointing upwards. When event emits "asc" the arrow ends up pointing downwards.

Code example

Reproducible on official Tegel Storybook page

Screenshots

No response

Expected behaviour

1. When you have not sorted on any column header, there should be double opposite arrows (pointing up and down) on all columns on hover.
   Actual initial state: All arrows pointing down on hover.

2. When event emits "desc" the arrow should end up pointing downwards. When event emits "asc" the arrow should end up pointing upwards.
   Actual sorted state: When event emits "desc" the arrow ends up pointing upwards. When event emits "asc" the arrow ends up pointing downwards.

Console errors

Add warning/error message

Contact information

[email protected]

[Feature Request]: Add test attributes to intractable elements

Requirements before reporting

• No duplicated issue reported
• I have checked the latest version if the feature exist there

Type of feature request

Testing

What is your feature request?

Add dedicated test attributes for selecting interactable elements inside the Tegel components to improve the stability of the automated test. The test attribute should only be added to Tegel components that have nested interactable elements that don't automatically get selected when the component itself is selected. For example, the Tegel table row contains an interactable checkbox and a button to expand the row, and these cannot be interacted with by just selecting the row itself. These two elements could use a test id to provide the testers a stable way to interact with them when writing automated tests.

Background

Our team is using Playwright for testing our user interfaces and we add a dedicated test id attribute (data-test in our case) to the elements we want our tests to interact with. These are mostly buttons and inputs (elements a user would usually interact with). This makes our tests more stable, since other attributes, such as HTML tag names, CSS classes, and IDs are used for development purposes and can change during the development. Having a dedicated test attribute on an element warns the developer that this element is used in the tests and that they need to be careful not to remove it.

Idea

Introduce a custom data attribute that is meant to be used for test automation (for example data-tds-test or data-test or data-test-id). Apply the custom data attribute to interactable elements within Tegel components that cannot be interacted with by just interacting with the wrapper component (for example the checkbox and the "expand" button in the Tegel table row). The new test attribute does not have to be applied to every element that matches the criteria, but it would be great if the developers were able to request these elements to be added where needed (and where it is deemed sensible by the Tegel team).

Goals and objectives

Improve the reliability of the automated tests by using dedicated test attributes that seldom change during development (and are considered a breaking change if removed). Not every element needs a test attribute at the start, but it would be great to define what the dedicated attribute should be called so the developers can request the attribute to be added to various elements within the Tegel components.

Timeline

No response

Resources

No response

Contact information

No response

[Feature Request]: Make it possible to remove last accordion item bottom border

Requirements before reporting

• No duplicated issue reported
• I have checked the latest version if the feature exist there

Type of feature request

Functionality

What is your feature request?

Make it possible to remove last accordion item bottom border.

Background

In the SSI team I’m building a filter component using an accordion to group the filters. To fulfill the design I need to hide the last accordion item bottom border.

Idea

Add prop for removing the last accordion item bottom border.

Goals and objectives

The outcome should look like this:

Pull request

#626

Contact information

[email protected]

[Bug report]: Disabled dropdown (filter) can still be opened

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/[email protected]

Browser

Chrome

Framework

Plain HTML

Version

No response

Reproduction steps

1. Go to storybook
2. Go to Dropdown
3. Set it to filter using the controls
4. Disable it using the controls
5. Click the arrow icon
6. The dropdown still opens.

Code example

Screenshots

Screen.Recording.2024-01-18.at.12.33.02.mov

Expected behaviour

The dropdown should never open when it is disabled, no matter the variant/type.

Console errors

Contact information

No response

[Bug report]: tds-breadcrumbs shows an extra icon (Angle bracket) after the last element

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel: 1.6.1, @scania/tegel-angular: 1.6.1

Browser

Chrome

Framework

Angular

Version

Angular 16

Reproduction steps

1. Go to Tegel Angular Demo https://angular-demo.tegel.scania.com/
2. Navigate to Text page and then Subpage
3. You will see the extra angle bracket
4. If the access the page directly the angle bracket is not shown

Code example

{{ segment.title }}

Screenshots

Expected behaviour

No angle bracket to be shown after the last item

Console errors

N/A

Contact information

[email protected]

[Feature Request]: Move the border of the tds-table-body-row-expandable below the expandable area.

Requirements before reporting

• No duplicated issue reported
• I have checked the latest version if the feature exist there

Type of feature request

Design

What is your feature request?

Currently, the border of the expandable table row is applied to the bottom of the main row rather than to the bottom of the expanded section. Here is an example:

This makes it look like the expanded section is a separate row. It looks even more confusing if you also expand one row below so the two rows have the same background color. The dividers on the screenshot below make it seem like the first row does not have an expanded section, the second row has an expanded section above the main row and that the last expanded section is standalone:

Here is how the rows are actually grouped:

Here is how my eyes group the rows above:

Background

We tried building a table with expandable sections using Tegel and we got complaints from the users that we demoed the table to that it was difficult to understand which expanded section belongs to which row.

Idea

If the row is expanded make sure that the main row (<tr class="tds-table__row">) does not have a border-bottom, but the expanded row (<tr class="tds-table__row-expand">) has the border. Here is an image of the expected result:

Goals and objectives

No response

Timeline

No response

Resources

No response

Contact information

No response

[Feature Request]: Utility class for outline options

Requirements before reporting

• No duplicated issue reported
• I have read the contribution guidelines
• I have checked the lastest version if the feature exist there

Type of feature request

Functionality

What is your feature request?

One utility class that would be really nice to add is outline: none !important; (maybe more outline options)

Background

Instead of adding outline: none on a

button { outline: none !improtant }

Idea

sdds-outline-rm {
outline: none;
}

Should be easy to add in the utility classes https://tegel.scania.com/development/utility-classes

Goals and objectives

Easy way for maintaining a outline option in CSS

Timeline

No response

Resources

No response

Contact information

No response

[Bug report]: Eventlistener bug

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel 0.0.8

Browser

Edge (Chromium)

Framework

Angular

Version

Angular 15

Reproduction steps

Added the sdds-toggle component in the html. Tried adding an eventlistener in the .ts ngOnInit(). Got a compile time error "property does not exist on type 'Event" on the event.detail.toggleid and on event.detail.checked. Property detail.

Code example

  const toggleElement = document.querySelector("sdds-toggle");

  toggleElement.addEventListener("sddsToggle", (event) => {
    console.log("Toggle with id: ", event.detail.toggleId, " is ", event.detail.checked);
  });

Screenshots

Add/Copy screenshot here

Expected behaviour

detail should be recognized.

Console errors

error TS2339: Property 'detail' does not exist on type 'Event'.

143 console.log("Toggle with id: ", event.detail.toggleId, " is ", event.detail.checked);

Contact information

[email protected]

[Bug report]: tds-step added after initial render of tds-stepper not rendered correctly

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel-angular: 1.8.0

Browser

Chrome

Framework

Angular

Version

Angular 17

Reproduction steps

1. Create a tds-stepper with a few tds-step child elements
2. After the initial render add more tds-step child elements

Code example

<tds-stepper>
  <tds-step [index]="1">
    <span slot="label">I appear instantly</span>
  </tds-step>
  @defer (on timer(200ms)) {
    <tds-step [index]="2">
      <span slot="label">I appear later</span>
    </tds-step>
  }
</tds-stepper>

Screenshots

Expected result (when both items are rendered on the initial render):

Actual result (when the second item is rendered after the initial render):

Expected behaviour

I expect the lines between the steps to be rendered correctly no matter if new steps are added after the initial render.

Console errors

No console errors.

Contact information

[email protected]

[Feature Request]: Programmatically expand table rows

Requirements before reporting

• No duplicated issue reported
• I have checked the latest version if the feature exist there

Type of feature request

Functionality

What is your feature request?

Currently, the tds-table-body-row-expandable component can only be expanded by clicking on the arrow button to the left of the row, but it cannot be expanded programmatically.
The tds-table-body-row-expandable should be expandable programmatically.

Background

I have a use case where the first row in the table should be automatically expanded by default. Currently, I am unable to achieve this since the tds-table-body-row-expandable does not allow me to expand it programmatically.

Idea

An isExpanded prop could be added that would control whether or not the table is expanded. The expanded state should be ignored if the user expands the row on their own.

Goals and objectives

No response

Timeline

No response

Resources

No response

Contact information

No response

[Bug report]: Console error when drag and drop from one table to another.

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel-angular: 1.6.1

Browser

Chrome

Framework

Angular

Version

Angular 15.2.0

Reproduction steps

1. I have two Tegel table (For Eg: Source Table(which has 3 columns) and Target Table(which has more columns than Source Table))
2. Try to drag and drop Source table row to target table using angular CDK.
3. Getting console error related to few of the properties 'Can not read properties of null' for reading 'tableId', 'multiselect', 'verticalDividers'

Code example

<tds-table
table-id="target-table"
compact-design="false"
responsive="false"
style="margin-left: 20px"
cdkDropList
[cdkDropListData]="targetTable"
(cdkDropListDropped)="drop($event)"

<tds-table-header>
  <tds-header-cell cell-key="truck" cell-value="Truck Id"></tds-header-cell>
  <tds-header-cell
    cell-key="driver"
    cell-value="Driver name"
  ></tds-header-cell>
  <tds-header-cell
    cell-key="description"
    cell-value="Description"
  ></tds-header-cell>
  <tds-header-cell
    cell-key="department"
    cell-value="Department"
  ></tds-header-cell>
</tds-table-header>
<tds-table-body>
  <tds-table-body-row
    *ngFor="let target of targetTable"
    cdkDropList
    cdkDrag
    [cdkDragData]="target"
  >
    <tds-body-cell
      cellValue="{{ target.id }}"
      cellKey="{{ target.id }}"
      disable-padding="false"
    ></tds-body-cell>
    <tds-body-cell
      cellValue="{{ target.name }}"
      cellKey="{{ target.name }}"
      disable-padding="false"
    ></tds-body-cell>
    <tds-body-cell
      cellValue="{{ target.description }}"
      cellKey="{{ target.description }}"
      disable-padding="false"
    ></tds-body-cell>
    <tds-body-cell>
        <app-drop-down
          [options]="earnCodeOptions"
          [placeholder]="earnCodePlaceHolder"
          name="earnCodeSelect"
          (selectionChange)="earnCodeSelectionChanged($event)"
        ></app-drop-down>
    </tds-body-cell>
  </tds-table-body-row>
</tds-table-body>

Screenshots

Expected behaviour

There should not be any console error while drag row from one table to another.

Console errors

Contact information

[email protected]

[Bug report]: Cannot read properties of null (reading 'getBoundingClientRect') - tds-slider

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/[email protected]

Browser

Chrome

Framework

Angular

Version

Angular 16

Reproduction steps

1. Add tds-slider on your page
2. visit page where is your slider component (no error here logged)
3. then visit another page
4. come back to page where is your tds-slider( now you will see error)
   ...

Code example

<tds-slider min="0" max="500" step="1" value="50" ticks="4" show-tick-numbers snap label="Range" tooltip ngDefaultControl #rangeSlider [(ngModel)]="radius" controls thumb-size="sm" ></tds-slider>

Screenshots

Add/Copy screenshot here

Expected behaviour

Component "tds-slider" should not log any errors.

Console errors

cpoi.component.html:72 TypeError: Cannot read properties of null (reading 'getBoundingClientRect')

Contact information

No response

[Bug report]: Cannot set properties of undefined (setting 'value')

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

"@scania/tegel-angular": "^1.6.0"

Browser

Chrome

Framework

Angular

Version

No response

Reproduction steps

1. Add tds dropdown to your page
2. use angular reactive form
3. bind dropdown options dynamically using a list created/initialized in typescript
   4: assign default value

Code example

<ng-container *ngFor="let market of configuratorService.markets; let idx = index">
<tds-dropdown-option [value]="market.code">
{{ market.name }}

Screenshots

1: set default value is not working..

2: drop down select event is throwing error

Expected behaviour

1: The tds dropdown should work with the default value.
2: The tds dropdown shouldn't throw any errors on dropdown select

Console errors

ERROR Error: Uncaught (in promise): TypeError: Cannot set properties of undefined (setting 'value')

Contact information

No response

[Feature Request]: Allow passing offset values as props to tds-tooltip

Requirements before reporting

• No duplicated issue reported
• I have checked the latest version if the feature exist there

Type of feature request

Functionality

What is your feature request?

We want to be able to position the tegel tooltip component to a different space in relation to its associated reference element,

Background

Currently the tooltip has the offsets predefined, it opens up with a space of 8 between the tooltip and the reference element and it considers the vertical top position 0 of the browser bar when calculating if the content of the tooltip fits in the viewport

Idea

allow developers to pass different numbers to the offset properties of the popover core through teh tds-tooltip component's props

Goals and objectives

We would like the tooltip to appear with a narrower space between it and the reference element (4 instead of 8) and set the top position to be the height of the navbar in order for the tooltip to consider it when calculating if the content fits between the reference element and the navbar and not appear on top or under the navigation element

Timeline

No response

Resources

No response

Contact information

[email protected]

[Bug report]: tds-table, console error on rerender

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel-angular: "^1.6.0"

Browser

Chrome

Framework

Angular

Version

Angular 17

Reproduction steps

1. Add component tds-table
2. Table renders ok without error.
3. Table rerenders the error is logged,
   ...

Code example

....

Screenshots

Expected behaviour

Validate that the header is found before getting the children.

componentWillRender() {
const headerColumnsNo = this.host.parentElement.querySelector('tds-table-header').children.length;
// multiselect and expended features requires one extra column for controls...
if (this.multiselect || this.expandableRows) {
this.columnsNumber = headerColumnsNo + 1;
}
else {
this.columnsNumber = headerColumnsNo;
}
}

Console errors

Contact information

[email protected]

[Bug report]: sddsTextArea scrolling z-index conflict with label when label-position = inside

Requirements before reporting

• No duplicated issue reported.
• I have read the contribution guidelines.
• I have checked the lastest version if the bug exist there. See all avaliable packages at npmJS.com
• I have made sure that the issue comes from SDDS packages by removing SDDS from my project as a test.
• I have followed the installation guide.

Package

@scania/components

Package versions

@scania/[email protected]

Browser

Chrome

Framework

Angular

Version

Angular 15

Reproduction steps

1. Add a sdds_textarea
2. Set label inside property
3. Type enough text so there is a vertical scroll bar. (both normal & read-only mode)

Code example

....

Screenshots

Expected behaviour

The text should not conflict with the label inside z-index

Console errors

Add warning/error message

Contact information

[email protected]

[Bug report]: Wrong release title in Github releases.

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/[email protected]

Browser

Chrome

Framework

Angular

Version

No response

Reproduction steps

Should be 1.7.0.

Code example

No response

Screenshots

No response

Expected behaviour

Release should be 1.7.0.

Console errors

No response

Contact information

No response

[Feature Request]: tds-inline-tab

Requirements before reporting

• No duplicated issue reported
• I have checked the latest version if the feature exist there

Type of feature request

Functionality

What is your feature request?

Hello Development support - Tegel,

I want to report two issues when trying to implementing tds-inline-tabs in our Angular project:

Dynamic Indexing Support: I am facing issues with dynamically handling the active TabIndex, especially when tabs may not always be visible due to different conditions (if-statements). This hinders us to create dynamic tabs that adapts to our application's changing data.
The event provided when the tab changes is limited to selectedTabIndex. For a more flexible handling of tab changes, events, such as the selectedTabName, would be beneficial as well. This would improve the flexibility of tab components.
selected-index property binding: I've identified that the selected-index property binding in Angular components within the Tegel library doesn't work. The property binding does not seem to update the selected tab based on the bound property value.

These changes would be a great benefit for us, not just now but for other components as well.
Thanks a lot!

Background

By supporting dynamic indexing and event handling (like selectedTabName), our application can offer scenarios where the visibility and relevance of tabs can change based on user actions or data conditions.

Idea

For a more flexible handling of tab changes, events, such as the selectedTabName, would be beneficial as well.

Goals and objectives

No response

Timeline

No response

Resources

No response

Contact information

[email protected]

[Feature Request]: Single Row Selection in Data Tables

Requirements before reporting

• No duplicated issue reported
• I have checked the latest version if the feature exist there

Type of feature request

Functionality

What is your feature request?

Currently there only exists multi row select, however, it would be nice to also have single row selection in line with the Tegel docs: https://tegel.scania.com/components/table

Background

In my case I have a data table with 3-4 actions a user can perform. Each action triggers a unique flow, so multi select doesn't make sense in this regard. Being able to single select one row and then select the correct action to take from the data table toolbar is the flow that is desired.

Idea

See https://tegel.scania.com/components/table (Single row selection)

Goals and objectives

See https://tegel.scania.com/components/table (Single row selection)

Timeline

No response

Resources

https://tegel.scania.com/components/table

Contact information

[email protected]

[Feature Request]: support for selecting few rows of sdds-table-body could be selected initially when using multi select

Requirements before reporting

• No duplicated issue reported
• I have read the contribution guidelines
• I have checked the lastest version if the feature exist there

Type of feature request

Functionality

What is your feature request?

In sdds-table-body we currently load the table information using the 'body-data' attribute. This allows with a multiselect a way to the end user that the value can be selected.

Using an API, we save this information, and when the next time the user is tries to fetch the selected rows we can populate the table and mark their previously selected choices as a clicked checkbox.

We could have a 'selected-body-data' where I can pass the rows which are selected

Background

We currently do this already by using shadowRoot to mark the selected rows, but on low CPU/slow internet situations it fails to work as the shadowRoot for the individual rows are not ready and we try to mark them as selected. Only possible means is to keep a long enough timeout which seems to be a bad solution going forward as the customer may have to wait a lot of time.

Idea

I would like an attribute like 'data-selected-rows' or 'selected-body-data' which could allow me to tell the rows which are selected out of all the rows on the table.

Goals and objectives

As this issue happened on slow internet/slow CPU and i have a custom solution using shadowRoot which is not so good a programmer experience as it could be functionality which could be entirely in the web component.

Timeline

No response

Resources

No response

Contact information

[email protected]

[Bug report]: missing padding in Table header in compact mode

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel: ^1.6.0

Browser

Chrome

Framework

Angular

Version

Angular 16

Reproduction steps

1. Create a Tegel Table with a header
2. Set it to use compact mode
3. Write a long text in one of the columns
4. Shrink the window until the line breaks into multiple rows
5. Observe how there is no padding over or under the text

Code example

   <tds-table
        [responsive]="true"
        [compactDesign]="true"
        [noMinWidth]="true"
    >
                <tds-table-header>
                        <tds-header-cell
                            [cellValue]="A very very long text that keeps going and going and never ends and just keeeps going until the bitter end and never stops because it just keeps going and going and just continues through time and space into eternity and just continues after that too..."
                            sortable="true"
                       >
                </tds-table-header>

                <tds-table-body>
                     <tds-table-body-row></tds-table-body-row>
                 </tds-table-body>                 
</tds-table>

Screenshots

Expected behaviour

There should be padding at the top and bottom even when the text breaks into multiple rows and when it is in compact mode

Console errors

Add warning/error message

Contact information

[email protected]

[Bug report]: sdds-textfield read only icon and icon slot conflict

Requirements before reporting

• No duplicated issue reported.
• I have read the contribution guidelines.
• I have checked the lastest version if the bug exist there. See all avaliable packages at npmJS.com
• I have made sure that the issue comes from SDDS packages by removing SDDS from my project as a test.
• I have followed the installation guide.

Package

@scania/components

Package versions

@latest

Browser

Chrome

Framework

Angular

Version

No response

Reproduction steps

Add an sdds-textfield with an icon in the sdds-suffix slot.
Set this textfield to read only state.
See as both icons overlap.

My suggestion would be adding a prop to disable the read only icon if needed.

Code example

....

Screenshots

Add/Copy screenshot here

Expected behaviour

Icons shouldn't overlap.

Console errors

Add warning/error message

Contact information

No response

[Bug report]: TdsTextField not marked as 'touched' after unfocusing

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel-angular: 1.6.1

Browser

Firefox

Framework

Angular

Version

Angular 16.2.0

Reproduction steps

1. Add <tds-text-field> to html template
2. Add formControl property to it
3. Log or render the touched property
4. Click inside the textbox
5. Click outside the textbox

Code example

<form [formGroup]="testForm">
  <tds-text-field
    ngDefaultControl
    [formControl]="testForm.controls.text"
    type="text"
    size="lg"
    label="Bugreport"
    label-position="inside"
    placeholder="Bugreport" />

  <p>Touched: {{ testForm.controls.text.touched }}</p>
</form>

interface TestForm {
  text: FormControl<string | null>;
}

@Component({...})
export class TestComponent {
  readonly testForm = this.fb.group<TestForm>({
    text: this.fb.control(''),
  });
}

Now I have temporarily solved this issue by creating a directive for the tds-text-field. I manually mark the control as dirty and subsequently mark the view as changed in the tdsBlur() handle:

@Directive({ selector: 'tds-text-field[tdsExt]' })
export class TdsTextFieldExtDirective implements OnDestroy {
  private readonly tdsTextField = inject(TdsTextField);
  private readonly cdr = inject(ChangeDetectorRef);

  @Input({ alias: 'formControl', required: true }) control!: FormControl;

  private readonly tdsBlurSub = this.tdsTextField.tdsBlur
    .pipe(
      tap(() => {
        this.control.markAsTouched();
        this.cdr.markForCheck();
      })
    )
    .subscribe();

  ngOnDestroy(): void {
    this.tdsBlurSub.unsubscribe();
  }

  // ...
}

Screenshots

Current:

Expected:

Expected behaviour

When a user focuses on a text field and subsequently unfocuses, the field should be marked as touched.

Console errors

No response

Contact information

[email protected]

[Bug report]: `tds-breadcrumbs` wrongfully sets class `last` to first element

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel: 1.6.1, @scania/tegel-angular: 1.6.1

Browser

Chrome

Framework

Angular

Version

Angular 16

Reproduction steps

...

Code example

<tds-breadcrumbs>
  <tds-breadcrumb *ngFor="let crumb of breadcrumbs; index as i">
    <tds-link>
      <label (click)="navigate(crumbPath(i, breadcrumbs))">{{ crumb }}</label>
    </tds-link>
  </tds-breadcrumb>
</tds-breadcrumbs>

Screenshots

Expected behaviour

last class should be added to the last tds-breadcrumb and not the first.

Console errors

No errors are shown in the console.

Contact information

[email protected], [email protected]

[Bug report]: Margin between text and icon in button not always applied

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel-angular: ^1.7.0

Browser

Chrome

Framework

Angular

Version

Angular 17

Reproduction steps

1. Add a tds-button
2. Add a tds-icon through the slot="icon"
3. Add a text attribute to the button.
4. Reload the page showing the component

Code example

<tds-button type="button" variant="primary" size="sm" text="button text">
    <tds-icon slot="icon" name="plus"></tds-icon>
</tds-button>

Screenshots

Expected behaviour

The margin between text and icon should always be applied, now it seems that it triggers sometimes but not always. Not sure as to why but it seems like the class "tds-button :not(.only-icon).sm.sc-tds-button-s>[slot=icon]" is not applied when the margin is missing.

Working Workaround : If I use the label slot for my button text it's working as expected.

Console errors

none

Contact information

[email protected]

[Feature Request]: Expose event and method/action for open/close expandable-row in tables

Requirements before reporting

• No duplicated issue reported
• I have checked the latest version if the feature exist there

Type of feature request

Functionality

What is your feature request?

I would like to be able to programmatically react to and to trigger opening and closing of tds-expandable-rows in tds-tables. So that it works more like the tds-accordion does.

1. Expose an event that triggers when user opens/closes a tds-expandable-row, with data telling whether the row is in opened or closed state.
2. Allow for a function to trigger a specific row to be opened or closed programmatically.

Background

I added a table with expandable-rows and I would like to possibility to both be able to open or close rows from code, and to be able to react to

Idea

Expose event for open/close expandable-row
Add input to force open/close expandable-row, or expose method that can be called to open/close expandable row.

Goals and objectives

Able to listen to when an expandable row opens/closes
Able to trigger opening/closing of an expandable-row

Timeline

No response

Resources

No response

Contact information

[email protected]

[Bug report]: TdsDropdown multiselect does not emit selected values

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel-angular: 1.6.1

Browser

Firefox

Framework

Angular

Version

Angular 16.2.0

Reproduction steps

1. Add TdsDropdown html element with the 'multiselect' property
2. Bind a formControl to it
3. Subscribe to the formControl.valueChanges observable and log the emitted value
4. On the webpage, (de)select one or multiple values

Code example

<tds-dropdown
  ngDefaultControl
  [formControl]="form.controls.groups"
  label="Groups"
  label-position="inside"
  placeholder="None"
  size="lg"
  open-direction="auto"
  multiselect>
  <tds-dropdown-option
    *ngFor="let group of groups$ | async"
    [value]="group.id">
    {{ group.name }}
  </tds-dropdown-option>
</tds-dropdown>

export class MyComponent {
  private readonly fb = inject(FormBuilder);

  readonly groups$ = of([
    { id: 1, name: 'Group 1' },
    { id: 2, name: 'Group 2' },
    { id: 3, name: 'Group 3' },
  ] satisfies GroupModel[]);

  readonly form = this.fb.group({
    // Other form properties
    groups: this.fb.control<number[]>([]),
  });
}

The problem is that when you (de)select something, it emits the value of the item that was clicked, not the entire array of selected values. This means that my form control is invalid.

Screenshots

No response

Expected behaviour

Component TdsDropdown with multiselect should emit all selected values as array on (de)selection of an item.

Example of what it should emit (order of the items in the array does not matter):
Initial state: []
Click 1: [1]
Click 3: [1, 3]
Click 2: [1, 3, 2]
Click 3: [1, 2]
Click 1: [2]
Click 2: []

Console errors

No response

Contact information

[email protected]

[Bug report]: TdsModal does not respect the "show" property

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

"@scania/tegel-react": "1.8.1"

Browser

Chrome

Framework

React

Version

React 18.3.1

Reproduction steps

1. Add TdsModal with property "show" set to true.
2. Click close button or backdrop

Code example

Demo:
https://quaspar.github.io/tegel-modal-bug-report/

Code:
https://github.com/quaspar/tegel-modal-bug-report/blob/main/src/App.js

Screenshots

Add/Copy screenshot here

Expected behaviour

Modal should not close as long as the show prop is true.

Console errors

Add warning/error message

Contact information

[email protected]

[Feature Request]: Time format control in Datetime component

Requirements before reporting

• No duplicated issue reported
• I have checked the latest version if the feature exist there

Type of feature request

Functionality

What is your feature request?

Datetime component is missing the control where we can set it to 24h format or 12h format

Background

To access the 24h format within our web app, windows users seem to need to change regional settings on their system. This isnt ideal for them because we have users in various regions. We want to be able to set the format from within our web app so that it is not tied up with the user's personal system settings

Idea

No response

Goals and objectives

Ideally a simple control in the component where we set 12h or 24h format

Alternatively, it would work for us if it were 24h at all times because this is the format of all other times we display throughout our web app

Timeline

As soon as possible because our UI is being used on a daily basis by scania troubleshooters

Resources

No response

Contact information

[email protected]

[Bug report]: Cannot use the Angular TegelModule in tests using jest

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel-angular: 1.7.0

Browser

Chrome

Framework

Angular

Version

Angular 16

Reproduction steps

1. Have an Angular 16 repo with a component using a tegel component.
2. Write a test for that component.

Result: The test will fail saying "Cannot find module 'components'".

Code example

Component:

@Component({
  selector: 'my-component',
  template: `<tds-button
      type="button"
      variant="ghost"
      size="sm">
      Click me
    </tds-button>`,
  standalone: true,
  imports: [TegelModule],
})
export class MyComponent{}

Tests:

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [MyComponent],
    });
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Screenshots

Expected behaviour

It should be possible to test a component using Tegel with Jest.

Console errors

Add warning/error message

Contact information

[email protected]

[Bug report]: Text field read only with icon suffix

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/[email protected]

Browser

Chrome

Framework

Angular

Version

Angular 16

Reproduction steps

1. Copy and paste the code example

Code example

<tds-text-field type="text" size="lg" state="default" label="Label" label-position="no label" read-only no-min-width placeholder="Placeholder">
    <tds-icon slot="suffix" name="truck" size="20px"></tds-icon>
  </tds-text-field>

Screenshots

No response

Expected behaviour

Not override the icons or text

Console errors

No response

Contact information

No response

[Feature Request]: Add button dropdown (similar to the one in bootstrap)

Requirements before reporting

• No duplicated issue reported
• I have read the contribution guidelines
• I have checked the lastest version if the feature exist there

Type of feature request

Functionality

What is your feature request?

As we have a limited ammount of types of buttons, when we have components that work as a dashboard and allow the user to take many actions, with just primary/secondary/ghost options, the experience is very poor.

Background

The need for organizing similar actions into groups and simplify the user interface.

Idea

No response

Goals and objectives

No response

Timeline

No response

Resources

No response

Contact information

No response

AB#2320

[Feature Request]: Remove Dotenv from the dependencies

Requirements before reporting

• No duplicated issue reported
• I have checked the latest version if the feature exist there

Type of feature request

Functionality

What is your feature request?

Hi guys, not a big issue but I saw you updated the node version.

with the node 20 you no longer need dotenv as dependencies.

Background

you can read a bit more here: https://dev.to/cjreads665/nodejs-2060-say-goodbye-to-dotenv-2ijl

Idea

make dependency array as clean as possible :)

Goals and objectives

No response

Timeline

No response

Resources

No response

Contact information

No response

[Feature Request]: Angular reactive forms integration

Requirements before reporting

• No duplicated issue reported
• I have checked the latest version if the feature exist there

Type of feature request

Functionality

What is your feature request?

Implement integration with the angular reactive forms for the Tegel Angular components.

It is enough to ensure that all components serving as inputs are compatible with reactive forms.

Background

Currently, the components TegelAngular module do not support integration with the angular reactive forms module, which makes them cumbersome to use in forms.

Idea

According to the Stencil documentation, some additional configuration is needed to make this work.
I managed to implement the forms integration on a smaller project.

Goals and objectives

Implement the angular reactive forms integration for the Tegel Angular components that serve as inputs.
Here is the list of components that should integrate with angular forms in my opinion:

• Checkbox
• Chip
• Date picker
• Dropdown
• Radio button
• Slider
• Text field
• Toggle

Timeline

No response

Resources

No response

Contact information

No response

Tasks

Beta Give feedback

No tasks being tracked yet.

[Bug report]: Missing controls

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel-react 1.4.0

Browser

Chrome

Framework

React

Version

React

Reproduction steps

1. Add the component
2. Go the http://tds-storybook.tegel.scania.com/?path=/story/patterns-navigation--few-navigation-items
3. Try to add the det component

Code example

No response

Screenshots

No response

Expected behaviour

Component x should be titled with controls.

Console errors

Add warning/error message

Contact information

[email protected]

[Feature Request]: Possibility to click on a specific day on the datepicker

Requirements before reporting

• No duplicated issue reported
• I have checked the latest version if the feature exist there

Type of feature request

Functionality

What is your feature request?

When using datepicker ,right now, there is an event called tdsonchange, so when clicking and switch date it will trigger on change.

In the picture we want to trigger on change only when click within the green square, not the arrows also

Background

We have a scenario when you switch date it will load data, for example from 8 jan to 9 jan, which does work with current solution.

But the problem is that when you lets say switch month with the arrows on top. That also triggers on change event which will load the date for next month. We only want to trigger on change when clicking a picked date(day), not when switch between month.

In the picture we want to trigger on change only when click within the green square, not the arrows also

Idea

Maybe add a seperate event, TdsOnChangeDay, that we can listen to, instead of regular on change event.

Another solution would be that you send in the current event, what is being clicked, so if you click a day or the arrows on the top it will send in the event that data, and we can build a condition around it at least.

Goals and objectives

We would like only to trigger change on when the user clicks on the dates not on any of the buttons around the datepicker for loading data

Timeline

Prefer soon :)

Resources

No response

Contact information

No response

[Feature Request]: programmatically toggle the state of tds-side-menu-dropdown

Requirements before reporting

• No duplicated issue reported
• I have checked the latest version if the feature exist there

Type of feature request

Functionality

What is your feature request?

Expose an api to expand and collapse tds-side-menu-dropdown programmatically

Background

we have a search functionality within the side menu items and it would enhance user experience to show the nested search results if they match what they're looking for

Idea

expose the collapsed property or expose a toggleCollapseState function

Goals and objectives

No response

Timeline

No response

Resources

No response

Contact information

[email protected]

[Bug report]: `text-align` attribute for `tds-header-cell` doesn't work initially

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel: 1.6.1, @scania/tegel-angular: 1.6.1

Browser

Chrome

Framework

Angular

Version

Angular 16

Reproduction steps

1. Create tds-table element.
2. Add tdsSort event listener for sorting.
3. Create tds-table-toolbar element inside tds-table element.
4. Create tds-table-header element inside tds-table element.
5. Create tds-header-cell element inside tds-table-header element.
6. Add text-align attribute to tds-header-cell element.
7. Populate table body.
8. Sort by column.

Code example

  <tds-table
    ...
    (tdsSort)="sort($event)">
    <tds-table-toolbar
      filter
      (tdsFilter)="handleFilter($event)"></tds-table-toolbar>
    <tds-table-header>
      ...
      <tds-header-cell
        cell-key="actions"
        cell-value=""
        text-align="right">
      </tds-header-cell>
    </tds-table-header>
    <tds-table-body>
      ...
    </tds-table-body>
    <tds-table-footer
      pagination
      cols="7"
      [pages]="pages"
      [paginationValue]="pagingValue"
      (tdsPagination)="handlePagination($event)">
    </tds-table-footer>
  </tds-table>

Screenshots

Expected behaviour

Contents in column should be aligned correctly initially if text-align attribute is entered for tds-header-cell element

Console errors

Contact information

[email protected], [email protected]

[Feature Request]: Progress bar

Requirements before reporting

• No duplicated issue reported
• I have read the contribution guidelines
• I have checked the lastest version if the feature exist there

Type of feature request

Design

What is your feature request?

A standard progress bar that can be used to indicate to the users as they work on step-by-step task based on the instruction received from a system function. Good to have percentage as an option.

Background

We have a picking solution for line feeding where user needs to pick articles based on the instructions from the application. Would be good to have a progress indicator to encourage and have the user informed of the overall progress.

Idea

No response

Goals and objectives

No response

Timeline

No response

Resources

https://carbondesignsystem.com/components/progress-bar/usage/

Contact information

[email protected]

[Feature Request]: Handling loading states

Requirements before reporting

• No duplicated issue reported
• I have read the contribution guidelines
• I have checked the lastest version if the feature exist there

Type of feature request

Functionality

What is your feature request?

The components such as cards/tooltip/loaders don't have a loading state, thus they appear from nothing; sometimes some of the data which needs to be populated in these is awaited from the backend or is received asynchronously.

There should be a way to have a loading state while the data is getting populated. Examples shimmer effect used by facebook or pulsing animation by linkedin for example.

Background

This is a modern UX pattern which if available in our design system will be great for Scania's own platforms plus other external developers who intend to use this design system. This will be a good UX where network data is slow.

Idea

Corporate UI had a generic loader which could be installed in the places, but modern UXs have the skeletal content of the expected data ad not a generic loader. This could be a good start.

Goals and objectives

A better UX

Timeline

No response

Resources

https://pencilandpaper.io/articles/ux-pattern-analysis-loading-feedback/#:~:text=Loading%20states%20are%20just%20that,is%20effectively%20being%20worked%20on.

Contact information

[email protected]

AB#2322

[Bug report]: Padding left not removed from first tds-step

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel-angular: 1.8.0

Browser

Chrome

Framework

Angular

Version

Angular 17

Reproduction steps

1. Add the tds-stepper with tds-step children.

Code example

First Middle Last

Screenshots

The first item has padding to the left:

The last item has padding to the right:

Expected behaviour

The first tds-step should not have padding to the left, so it can be left-aligned with other items.
The last tds-step should not have padding to the right, so it can be right-aligned with other items.

Console errors

No console errors

Contact information

[email protected]

[Bug report]: ``

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel: 1.6.1

Browser

Chrome

Framework

Angular

Version

Angular 16

Reproduction steps

1. Add ``
2. Click y
3. Do z
   ...

Code example

....

Screenshots

Add/Copy screenshot here

Expected behaviour

Component x should be able to...

Console errors

Add warning/error message

Contact information

No response

[Design Request]: Full-width option for tabs

Requirements before reporting

• No duplicated issue reported
• I have checked the latest version if the feature exist there

Type of feature request

Design

What is your feature request?

Full-width option for all tabs variants (inline, folder, navigation).

Background

I am currently developing a tablet front-end and require tabs for navigation purposes. However, the existing tabs are too small, especially when users need to press them. Additionally, integrating larger tabs would enhance the aesthetic appeal of the page, making them a more prominent and integral component of the user interface.

Idea

I have tried setting the width to 100%, but this results in a button flickering on the right side of the screen (the button that enables you to scroll through the tabs if the width exceeds the parent width).

Goals and objectives

Something that looks like the following (Angular Material modified with Tegel theme):

Timeline

No response

Resources

https://material.angular.io/components/tabs/examples#tab-group-stretched

Contact information

[email protected]

[Bug report]: Unwanted extra space appears to the right of an collapsed side menu item in desktop

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel 1.8.2

Browser

Chrome

Framework

React

Version

React 18.2.0

Reproduction steps

1. Add component Side Menu.
2. Set collapsed and persistent to true.
3. Look at it in desktop.
4. An unwanted space of 1px appears to the right of the menu items.

Code example

<tds-side-menu collapsed persistent aria-label="Side menu" id="demo-side-menu"><tds-side-menu-item> <button> <tds-icon name="star" size="24px"></tds-icon> Values </button> </tds-side-menu-item></tds-side-menu>

Screenshots

Expected behaviour

That extra space of 1px should be removed.

Console errors

No response

Contact information

[email protected]

Issue with Cell Single in Figma

Requirements before reporting

• No duplicated issue reported
• I have read the contribution guidelines
• I have checked the lastest version if the feature exist there

Type of feature request

Design

What is your feature request?

There is an issue with the Cell Single component in Figma, when you select Size as "Compact" and Col divider as "Left & right". The right "Divider Vertical" doesn't change it's position when changing the cell width.

Background

To make it work I have to detach the component and make the changes myself. Then I lose the ability to easily change the state of the component.

Idea

For "Divider Vertical" (the one in the right side of the cell) the following needs to be done:

• Set Constraints to "Right" for "Divider Vertical".
• Change the order of the two Divider Verticals in the Layers panel.

Goals and objectives

No response

Timeline

No response

Resources

No response

Contact information

[email protected]

[Bug report]: Angular with esbuild fails

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel-angular: 1.7.0

Framework

Angular

Version

Angular 16+

Reproduction steps

1. Create or use an angular project that uses esbuild. This is default in Angular 17.
2. Import @scania/tegel-angular and use a tegel component.
3. Build the project, ng build --verbose

Then we get the following error
Could not resolve "@scania/tegel-angular"

Reproduction repo exists here: https://github.com/adarean5/tegel-angular-esbuild-issue-repro

Code example

....

Screenshots

Expected behaviour

It should be possible to use @scania/tegel-angular with esbuild.

Contact information

[email protected]

[Feature Request]: Label-positon for the datetime

Requirements before reporting

• No duplicated issue reported
• I have checked the latest version if the feature exist there

Type of feature request

Functionality

What is your feature request?

I would like the Datetime component to have a labelPosition propetry so you can position the label as how you want it. There exists a label but it seems to be positioned outside.

Background

We are replacing Angular Material components with the Tegel ones and the angular material datetime has a labelPosition property.

Idea

No response

Goals and objectives

labelPosition as exists in eg textfield or dropdown

Timeline

Before week 27

Resources

No response

Contact information

[email protected]

[Bug report]: Enabling the compactDesign prop on tds-table overrides the padding from the disablePadding prop on the tds-body-cell.

Requirements before reporting

• No duplicated issue reported.
• I have checked the latest version if the bug exist there. See all available packages at npmJS.com
• I have followed the installation guide.

Package versions

@scania/tegel: 1.3.3

Browser

Chrome

Framework

Angular

Version

Angular 16

Reproduction steps

1. Create a tegel table containing tds-body-cell elements.
2. Set the compactDesign prop on the tds-table component to true.
3. Set the disablePadding prop on the tds-body-cell to true.

Result: The padding is still applied to the cell.

Code example

<tds-table [compactDesign]="true">
    <tds-table-header>
        <tds-header-cell
            cellKey="description"
            cellValue="Description"
        ></tds-header-cell>
    </tds-table-header>
    <tds-table-body>
        <tds-table-body-row>
            <tds-body-cell
                cellKey="description"
                cellValue="Description"
                [disablePadding]="true"
            ></tds-body-cell>
        </tds-table-body-row>
    </tds-table-body>
</tds-table>

Screenshots

In the dev console, it can be observed that the compact styling overrides the no-padding styling.

Expected behaviour

After applying the disablePadding prop to the cell I would expect the cell not to have padding.

Console errors

None

Contact information

[email protected]

[Feature Request]: Upgrade stencil version

Requirements before reporting

• No duplicated issue reported
• I have checked the latest version if the feature exist there

Type of feature request

Other

What is your feature request?

Just to stay up to date on all bug fixes and feature updates.

Latest released version: https://github.com/ionic-team/stencil/releases/tag/v4.12.5

Looks like this one fixes some issues in creating standalone components for Angular, which since Angular 17 is the perfered way of creating components.

Background

Always good to be up to date on dependancies. Feels like we did a lot of work to upgrade stencil and node deps and would be a shame if we'd fall behind again.

Idea

No response

Goals and objectives

No response

Timeline

No response

Resources

No response

Contact information

No response