scania-digital-design-system/tegel

Tegel Design System

tegel's Issues

[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]: 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

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]

[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]: 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]

[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]: 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]

[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]: 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]: 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]: 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]

[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

[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]: 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]: 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]

[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]: 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

[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