Describe the bug
Css added in sky-ag-grid.css where in tooltip background is set to transparent when we are upgrading to sky 9 and angular 16, because of which we can see the text behind the tooltip in thread.

Steps to reproduce the behavior

1. Upgrade the application to SKY9 and Angular 16.
2. Tooltip of the columns in grid is overlapping the data because of its transparent background.

Expected behavior
Tooltip of the column should not overlap the data and background should be of white color.

Screenshots
Issue on UI:

Extra CSS:

AB#2718892

Currently the row selector cell renderer does not support disabling a checkbox based on a row's data. For example, if a payment is specified as "Do not print" then I want to disable the checkbox for that row when a user goes to generate a batch of payment receipts.

My proposed solution is to add a cellRendererParam property that takes a function with the cell's params passed in and returns true or false if the checkbox should be disabled or enabled (my thought is that it is called "shouldDisable", hence the boolean mapping)

This would also alleviate other hand-rolled cell renderers that require this functionality

AB#2909596

Hi friends!

Just noticed today that the CDK has their own coerceBooleanProperty function that can replace the custom one we made:

Less code to manage. Winner winner - chicken dinner. 💥

Hi There,

My name is Zane and I'm new to the RedArc Engineering team.

I'm implementing some apps for Raiser Edge NXT and using skyux, interested in possibly contributing to skyux in the future. For now, I wanted to call out a few errors or things needing updating in the skyux documentation.

1. Developer Setup page
   • Angular Version required for skyux 9.X.X is now Angular16.
   • When Installing the @skyux/packages, the angular.json styles have changed to

   "styles": ["@skyux/theme/css/sky.css", "@skyux/theme/css/themes/modern/styles.css"]
   

2. Enable Modern Theme
   • Typo in the SkyThemeSettings where SkyThemeMode.presents.light should be SkyThemeMode.presets.light

That is all for now. Please let me know if there is a better place to raise these types of documentation revisions in the future.

Cheers,
Zane

AB#2767270

Describe the bug
Sky Radio Icon Buttons have a too small of a select area that only covers the top half of the button. This means the clickable area is half of the button and and wrappers (like tooltips oriented at the bottom of the radio button) are oriented too high.

Steps to reproduce the behavior

1. Go to the Radio button example https://developer.blackbaud.com/skyux/components/radio?docs-active-tab=design
2. Open the browser developer tools.
3. Find the <sky-radio ...> tag in the inspector tools.
4. Hover and see that the dimensions for the tag are 35x19px. Whereas the dimensions for the underneath are 35x35px.

Expected behavior
The dimensions of the top level object should match that of the underlying displayed button. In my case it is 35x35px. But could be responsively resized based on browser settings.

Screenshots

Desktop details:

• OS: Mac OS 14.1.2
• Browser: Chrome
• Browser version: 1.63.162

Smartphone details:
NA

Additional context

AB#2843538

Describe the bug

@skyux/ag-grid/css/sky-ag-grid.css contains invalid css that results in compilation errors when included in the app's styles.scss file.

Operators aren't allowed in plain CSS.
     ╷
8797 │   min-height: var(--ag-row-height)-2px;
     │                                   ^
     ╵
  @skyux/ag-grid/css/sky-ag-grid.css 8797:35 

min-height: var(--ag-row-height) - 2px; is attempting to perform a calculation without calc().

Steps to reproduce the behavior

1. Include @use '@skyux/ag-grid/css/sky-ag-grid.css' in the styles.scss file of an angular app
2. Build the app
3. See error

Expected behavior
A clear, concise description of what you expected to happen.

The sky-ag-grid.css should be valid css

Screenshots
If applicable, add screenshots to help explain the bug.

Additional context

The min-height should use a css calc function:

min-height: calc(var(--ag-row-height) - 2px);

Problem Description

Looking at any of our Raiser's Edge NXT Page Addins, the Background colour is showing incorrectly for non modern-theme applicaitons. (which is all of Raiser's Edge at the moment.)

On the Host page there is a CSS for the HTML body element:

body:not(.sky-theme-modern) {
    background-color: #fff;
}

It should be:

body:not(.sky-theme-modern) {
    background-color: #eeeeef;
}

The reason for raising this request is that it causes NXT Page Addins that use SkyUX to appear with a harsh end to the page like this:

To Fix

A quick search through the code repo indicates that the change probably just needs to be made in two places:

1. skyux/libs/components/pages/src/lib/modules/page/page-theme-adapter.service.ts

   Line 27 in de7a443

   'body:not(.sky-theme-modern) { background-color: #fff; }',

2. skyux/libs/components/layout/src/lib/modules/page/page-theme-adapter.service.ts

   Line 27 in de7a443

   'body:not(.sky-theme-modern) { background-color: #fff; }',

AB#2938835

Describe the bug
A for attribute should be set in the label tag created by sky-toggle-switch-label for its parent sky-toggle-switch. Without the for attribute, clicking on the label does not set the focus to the control as it should.

Steps to reproduce the behavior

        <sky-toggle-switch
          class="toggle-padding"
          formControlName="disableAlerts"
          (toggleChange)="toggleDisableAlerts()"
          data-sky-id="disableAlertsToggle"
          #disableAlerts
        >
          <sky-toggle-switch-label>Disable alerts</sky-toggle-switch-label>
        </sky-toggle-switch>

Renders a <label> tag with no for attribute and a <button> tag with no id attribute.

Expected behavior
The <label> tag should have a for attribute with the value of the HTML form control's id attribute, for example, <button id="x"> ... <label for="x">....

Once the label is linked to a control, clicking on the label sets focus to the control, which is important for ease of use, especially when the control is small, like a checkbox.

Desktop details:

• Browser: any

Is your feature request related to a problem? Please describe.
The eslint rule no-use-before-define doesn't handle NG_VALUE_ACCESSOR as expected. (It raises an error when there is none.)

Describe your solution
Use @typescript-eslint/no-use-before-define instead

Describe alternative solutions
Disable the rule on a line-by-line basis or at spa level

Additional context
This problem has been noted when using the new lint ruleset on a couple different skyux spas

Describe the bug

The instructions for sky-ag-grid include that the css should be added to the styles array of the angular app. This results in a compilation error that the css is not exported from the @skyux/ag-grid package:

Error: Package path ./css/sky-ag-grid.css is not exported from package <projectdir>/node_modules/@skyux/ag-grid (see exports field in <projectdir>/node_modules/@skyux/ag-grid/package.json)

Note that this is the alternative method I tried since the sky-ag-grid.css is not able to included with scss @use due to invalid css.

Steps to reproduce the behavior

1. Include the sky-ag-grid.css as indicated in the instructions into the angular project.json styles array
2. Compile the app
3. See error

Expected behavior

The documented method of including sky-ag-grid.css should work.

Additional context
Any other details that may relate to the problem.

AB#2719682