feat: remove borderedRows prop and rename stripedRows prop to rowStriped

Author: dreamerblue

.changeset/few-sites-design.md

@@ -0,0 +1,9 @@
+---
+'@algoux/standard-ranklist-renderer-component-angular': patch
+'@algoux/standard-ranklist-renderer-component-svelte': patch
+'@algoux/standard-ranklist-renderer-component-react': patch
+'@algoux/standard-ranklist-renderer-component-solid': patch
+'@algoux/standard-ranklist-renderer-component-vue': patch
+---
+
+Remove `borderedRows` prop and rename `stripedRows` prop to `rowStriped`

docs/agents/ranklist-renderer-props.md

@@ -24,6 +24,7 @@ showProblemStatisticsFooter?: boolean;
 showDirtColumn?: boolean;
 showSEColumn?: boolean;
 rowBordered?: boolean;
+rowStriped?: boolean;
 columnBordered?: boolean;
 emptyStatusPlaceholder?: string | null;
 userAvatarPlacement?: 'user' | 'organization';
@@ -58,7 +59,8 @@ Default labels are: series title from SRK, `Name`, `Organization`, `Score`,
 | `showProblemStatisticsFooter` | `false` | Renders the multi-row problem statistics footer plus the final problem alias row. |
 | `showDirtColumn` | `false` | Appends the row Dirt percentage column after problem columns. |
 | `showSEColumn` | `false` | Appends the row SE column after problems and after Dirt when both are enabled. |
-| `rowBordered` | `false` | Enables row separators via shared CSS variables. Existing `borderedRows` remains a React alias. |
+| `rowBordered` | `false` | Enables row separators via shared CSS variables. |
+| `rowStriped` | `false` | Enables striped body rows. |
 | `columnBordered` | `false` | Enables column separators via shared CSS variables. |
 | `emptyStatusPlaceholder` | `null` | Replaces no-submission status cell blank content with a custom string. |
 | `userAvatarPlacement` | `user` | Moves the default avatar into the split Organization column only when set to `organization` and `splitOrganization` is enabled. |
@@ -153,10 +155,11 @@ Default labels are: series title from SRK, `Name`, `Organization`, `Score`,
 - If the footer and appended extra columns are both enabled, the footer gets
   one empty alignment cell for each enabled extra column, in column order
   (`Dirt`, then `SE`).
-- `rowBordered` enables a light horizontal separator between body rows.
-  `borderedRows` remains supported as the existing React alias. The color is
-  controlled by `--srk-table-row-border-color`, which defaults to
+- `rowBordered` enables a light horizontal separator between body rows. The
+  color is controlled by `--srk-table-row-border-color`, which defaults to
   `--srk-table-border` only when row borders are enabled.
+- `rowStriped` enables the existing `.srk-table-row-striped` body-row
+  background treatment.
 - `columnBordered` enables light vertical separators between columns. The color
   is controlled by `--srk-table-column-border-color`, which defaults to
   `--srk-table-border` only when column borders are enabled. Column separator

packages/angular/README.md

@@ -52,7 +52,7 @@ import '@algoux/standard-ranklist-renderer-component-styles';
     ></srk-progress-bar>
     <srk-ranklist
       [data]="staticRanklist"
-      [stripedRows]="true"
+      [rowStriped]="true"
       (userClick)="handleUserClick($event)"
       (solutionClick)="handleSolutionClick($event)"
     ></srk-ranklist>
@@ -111,6 +111,7 @@ Use `ModalComponent` directly when you want custom modal content. `SrkUserCellTe
 - `showDirtColumn`: appends a Dirt percentage column after problem columns.
 - `showSEColumn`: appends a contestant SE column after problem columns, placed after Dirt when both are enabled.
 - `rowBordered`: adds row separators controlled by CSS variables.
+- `rowStriped`: adds striped body rows.
 - `columnBordered`: adds column separators controlled by CSS variables.
 - `emptyStatusPlaceholder`: renders a custom string in no-submission status cells.
 - `userAvatarPlacement`: chooses whether the default user avatar renders in the user column or, when `splitOrganization` is enabled, in the organization column.
@@ -140,6 +141,7 @@ export class BoardComponent {
   [statusCellPreset]="'compact'"
   [statusColorAsText]="true"
   [rowBordered]="true"
+  [rowStriped]="true"
   [columnBordered]="true"
   [emptyStatusPlaceholder]="'·'"
   [userAvatarPlacement]="'organization'"

packages/angular/dev/app.component.ts

@@ -183,7 +183,7 @@ function resolvePreferredTheme() {
       <srk-ranklist
         [data]="staticRanklist"
         [theme]="preferredTheme"
-        [stripedRows]="true"
+        [rowStriped]="true"
         [splitOrganization]="splitOrganization"
         [columnTitles]="useCustomColumnTitles ? demoColumnTitles : undefined"
         [statusCellPreset]="statusCellPreset"

packages/angular/src/lib/__tests__/ranklist-display-contract.spec.ts

@@ -21,8 +21,8 @@ import { RanklistComponent } from '../index';
   template: `
     <srk-ranklist
       [data]="data"
-      [borderedRows]="borderedRows"
-      [stripedRows]="stripedRows"
+      [rowBordered]="rowBordered"
+      [rowStriped]="rowStriped"
       [formatSrkAssetUrl]="formatSrkAssetUrl"
     />
   `,
@@ -41,8 +41,8 @@ class ContractHostComponent {
     problems: [],
     rows: [],
   };
-  borderedRows = false;
-  stripedRows = false;
+  rowBordered = false;
+  rowStriped = false;
   formatSrkAssetUrl?: (url: string, field: string) => string;
 }
 
@@ -62,8 +62,8 @@ async function renderHost(data: unknown, props: RanklistDisplayRenderProps = {})
   });
   Object.assign(componentRef.instance, {
     data,
-    borderedRows: !!props.borderedRows,
-    stripedRows: !!props.stripedRows,
+    rowBordered: !!props.rowBordered,
+    rowStriped: !!props.rowStriped,
     formatSrkAssetUrl: props.formatSrkAssetUrl,
   });
   appRef.attachView(componentRef.hostView);

packages/angular/src/lib/__tests__/ranklist-render-options.spec.ts

@@ -26,7 +26,6 @@ import { RanklistComponent } from '../index';
       [showDirtColumn]="showDirtColumn"
       [showSEColumn]="showSEColumn"
       [rowBordered]="rowBordered"
-      [borderedRows]="borderedRows"
       [columnBordered]="columnBordered"
       [emptyStatusPlaceholder]="emptyStatusPlaceholder"
       [userAvatarPlacement]="userAvatarPlacement"
@@ -43,7 +42,6 @@ class RenderOptionsHostComponent {
   showDirtColumn?: RanklistRenderOptionsProps['showDirtColumn'];
   showSEColumn?: RanklistRenderOptionsProps['showSEColumn'];
   rowBordered?: RanklistRenderOptionsProps['rowBordered'];
-  borderedRows?: RanklistRenderOptionsProps['borderedRows'];
   columnBordered?: RanklistRenderOptionsProps['columnBordered'];
   emptyStatusPlaceholder?: RanklistRenderOptionsProps['emptyStatusPlaceholder'];
   userAvatarPlacement?: RanklistRenderOptionsProps['userAvatarPlacement'];

packages/angular/src/lib/ranklist/ranklist.component.ts

@@ -74,9 +74,9 @@ import {
     <ng-template #ranklistTable>
       <div class="srk-common-table srk-main">
         <table
-          [class.srk-table-row-bordered]="borderedRows || rowBordered"
+          [class.srk-table-row-bordered]="rowBordered"
           [class.srk-table-column-bordered]="columnBordered"
-          [class.srk-table-row-striped]="stripedRows"
+          [class.srk-table-row-striped]="rowStriped"
         >
           <thead>
             <tr>
@@ -379,10 +379,9 @@ import {
 export class RanklistComponent {
   @Input({ required: true }) data!: StaticRanklist;
   @Input() theme: EnumTheme = EnumTheme.light;
-  @Input() borderedRows = false;
   @Input() rowBordered = false;
   @Input() columnBordered = false;
-  @Input() stripedRows = false;
+  @Input() rowStriped = false;
   @Input() formatSrkAssetUrl?: (url: string, field: string) => string;
   @Input() splitOrganization = false;
   @Input() columnTitles?: RanklistColumnTitles;

packages/react/README.md

@@ -45,7 +45,7 @@ function Board({ ranklist }) {
       <ProgressBar data={ranklist} enableTimeTravel onTimeTravel={(time) => console.log(time)} />
       <Ranklist
         data={staticRanklist}
-        stripedRows
+        rowStriped
         onUserClick={(payload) => {
           setActiveUser(payload);
           setActiveSolution(null);
@@ -88,6 +88,7 @@ Use `Modal` directly when you want custom modal content. `Ranklist` also accepts
 - `showDirtColumn`: appends a Dirt percentage column after problem columns.
 - `showSEColumn`: appends a contestant SE column after problem columns, placed after Dirt when both are enabled.
 - `rowBordered`: adds row separators controlled by CSS variables.
+- `rowStriped`: adds striped body rows.
 - `columnBordered`: adds column separators controlled by CSS variables.
 - `emptyStatusPlaceholder`: renders a custom string in no-submission status cells.
 - `userAvatarPlacement`: chooses whether the default user avatar renders in the user column or, when `splitOrganization` is enabled, in the organization column.
@@ -102,6 +103,7 @@ Use `Modal` directly when you want custom modal content. `Ranklist` also accepts
   statusCellPreset="compact"
   statusColorAsText
   rowBordered
+  rowStriped
   columnBordered
   emptyStatusPlaceholder="·"
   userAvatarPlacement="organization"

packages/react/dev/App.tsx

@@ -311,7 +311,7 @@ export default class App extends React.Component<Record<string, never>, AppState
         <Ranklist
           data={staticRanklist}
           theme={this.preferredTheme}
-          stripedRows
+          rowStriped
           onUserClick={this.handleUserClick}
           onSolutionClick={this.handleSolutionClick}
           splitOrganization={this.state.splitOrganization}

packages/react/src/Ranklist.tsx

@@ -62,12 +62,6 @@ export interface RanklistProps {
    */
   theme?: EnumTheme;
 
-  /**
-   * Enable border between rows in the table.
-   * @defaultValue false
-   */
-  borderedRows?: boolean;
-
   /**
    * Enable border between rows in the table.
    * @defaultValue false
@@ -84,7 +78,7 @@ export interface RanklistProps {
    * Enable striped rows style in the table.
    * @defaultValue false
    */
-  stripedRows?: boolean;
+  rowStriped?: boolean;
 
   formatSrkAssetUrl?: (url: string, field: string) => string;
   onUserClick?: (payload: UserClickPayload) => void | Promise<void>;
@@ -109,10 +103,9 @@ interface State {
 export class Ranklist extends React.Component<RanklistProps, State> {
   static defaultProps: Partial<RanklistProps> = {
     theme: EnumTheme.light,
-    borderedRows: false,
     rowBordered: false,
     columnBordered: false,
-    stripedRows: false,
+    rowStriped: false,
     splitOrganization: false,
     statusCellPreset: 'classic',
     statusColorAsText: false,
@@ -396,10 +389,9 @@ export class Ranklist extends React.Component<RanklistProps, State> {
     }
     const {
       data,
-      borderedRows,
       rowBordered,
       columnBordered,
-      stripedRows,
+      rowStriped,
       splitOrganization,
       statusCellPreset,
       statusColorAsText,
@@ -433,9 +425,9 @@ export class Ranklist extends React.Component<RanklistProps, State> {
         <div className="srk-common-table srk-main">
           <table
             className={classnames({
-              'srk-table-row-bordered': borderedRows || rowBordered,
+              'srk-table-row-bordered': rowBordered,
               'srk-table-column-bordered': columnBordered,
-              'srk-table-row-striped': stripedRows,
+              'srk-table-row-striped': rowStriped,
             })}
           >
             <thead>