I have developed a button component for an Angular Component Library that I am currently working on. The button functions correctly, and its implementation is as follows:
<sio-button
[buttonLabel]="'Button Text'"
[buttonFormat]="'fluid'"
[buttonStyle]="'1L'"
(buttonClicked)="outputButtonClick()" >
</sio-button>
Through the Input() decorator, I pass various values and set the button style using a short-hand string. The template includes a method to output the desired CSS classes as a string:
<sio-button _ngcontent-c0="" _nghost-c2="" ng-reflect-button-label="Button Text" ng-reflect-button-format="compact"
ng-reflect-button-style="primary-line">
<button _ngcontent-c2="" class="sio-btn sio-btn--primary-line sio-btn--compact" ng-reflect-klass="sio-btn"
ng-reflect-ng-class="sio-btn--primary-line sio-btn-"> Button Text
</button>
</sio-button>
I want the users of the UI components library to use my buttons as a button group. This is achieved by wrapping a DIV with a specific CSS class to customize the button styles within. For example, to remove the border-right and border-left on the first and last button in a button group:
<div class="sio-btn-group">
<sio-button [buttonLabel]="'Button Left'" [buttonFormat]="'compact'" [buttonStyle]="'1L'">
</sio-button> <!-- border-right should be removed for this button -->
<sio-button [buttonLabel]="'Button Middle'" [buttonFormat]="'compact'" [buttonStyle]="'1L'">
</sio-button>
<sio-button [buttonLabel]="'Button Right'" [buttonFormat]="'compact'" [buttonStyle]="'1L'">
</sio-button> <!-- border-left should be removed for this button -->
</div>
In my sio-button SCSS file, I attempted to write a CSS rule to override the borders for the first and last child buttons within the button group. However, my initial attempts did not yield the desired result. I tried changing the CSS selector to target the first and last child buttons without success. Any guidance on correcting my CSS selector would be greatly appreciated.
If further clarification is needed or if providing a code pen would be beneficial, please let me know. I am open to suggestions for improvement in explaining my issue.