The panel is a container for grouping and displaying information. It(act as accordion) can be expanded and collapsed to save space on the screen.

 <fdp-panel 
         [id]="panelID"
         [height]="auto"
         [width]="100%"
         [expanded]="true|false" 
         [expandable]="true|false"
         [background]="Solid"|"Translucent"|"Transparent"
         (click)="onPanelClick($event)">
<ng-content></ng-content>
</fdp-panel>

The unique panel Item id.

The Panel height. By setting the height of the content area will automatically be adjusted to match the height of its content. When the height of the panel is set to a fixed size, the content area can be scrolled through.

The Panel width.

Indicates whether the Panel is expanded or not. If expanded="true", panel body content can be rendered. If expanded="false", then onlyheaderText is rendered body won't be.

Indicates whether the control is expandable. This allows for collapsing or expanding the content of the Panel. If expandable is set to false, the Panel will always be rendered expanded.

There are 2 types of panels: fixed and expandable.

• Fixed(not an accordion) panels are useful for grouping custom content. which include panel details.
• Expandable(accordion) panels are much like fixed panels, except their content can be expanded and collapsed.

• The "button Clicked" event binding emits an event whenever the user clicks on button.

N/A

N/A

The following components and/or directives from @fundamental-ngx/core will be used:

• buttonModule

• Does button label should be truncated and appended with an ellipsis? Or it should be responsive based on the content entered and user should be taking care from when on they can have truncation.

example:

<fdp-button width='30px'.........

then css will be: width: 30px; (user input value) overflow: hidden; white-space: nowrap; display: block; text-overflow: ellipsis;

*According to spec tooltips should have a black background color. Whereas fundamentals do not have it. Should behave the black background in @ariba-pi/platform as specs are more specific to Ariba? or I can have the same in @fundamental-ngx/platform which will be used by non Ariba products as well?

Frank

• There should be one specs aligned with fiori 3
• We are not really making things specifics to Ariba more Fiori3, we take things from ariba to enhance existing requirements, but in terms of colors, it should stay Fiori3. We will be using theming that will be defined once using css variables and with custom colors we woudl mess it up. @ariba-pi/platform needs to follow also Fiori 3 scheme. Here might have some some Ariba specific components but it does not mean we will not inherit Fiori 3 styling.

Kit and Manju* need your confirmation on this as well.

Frank:

• Button size: Current behavior have two sizes that pre-sets the width and height, if the text is larger I think it will take up full available width and button gets wider. Is there a requirement to truncate ? ==>_truncation requirement I got yesterday in FRD, tho design is not yet available on this._

• Since fd is directive you are free to specific your own width, so maybe we should keep this behavior. => _I agree more flexibility to user in this case_

• when we introduce width we need to also create some kind of content wrapping strategy, that by default do full width like it is now or truncate.

• User shoudl have a choice, truncate yes /no => possible, in this case we need the limitation of expected width

<fdp-button [truncate]='on' [width]='30px'

then in my ts will be: if(turncate && width!=0) { elementref._addClass......(truncation); }

.truncation{ width: 30px; (user input value) overflow: hidden; white-space: nowrap; display: block; text-overflow: ellipsis; }

• Now default width is taken from --fd-form-height in fundamental-ngx/core. As per my understanding width is set based on the real estate available.

• We should not forget also about Anchors (so maybe make option) to render it as button or hyperlink

*@Frank: for Grouped buttons we have an attribute called size which handles the size of small, xs, and largely based on the form where it is placed, hence to have a compact mode in button, placing an attribute called compressed to avoid ambiguity when fdp button is used along with grouped-buttons.

• ??? What is the relation between size (xs,s,m) and size of the button. Developer gets confused, can we maybe do some mapping and combine them together with buttons sizes?

• Need confirmation on the same from Frank

/from Group button review call -1st oct 2019/

Button Component.

1).fdp-button will not be used for group button, remove the code placed for grouped button.-->by Kevin 2). Do not use size for compact as it is used in group button-->By Kevin and Frank 3). Rename compress to compact, the core has the same, it makes the user to understand it in better way.--> By Frank and Kevin. 4). We will be having only disabled properties do not add state, it will be used while grouping button==> by Kevin 5). Create properties for [truncate] the text when it is long, share the approach in wikki==>By Frank and Kevin