Menu
v0.10.1

Components / behavioral

SortIndicator

Shows a collection column's current sort direction.

Generated from @oods/foundry 0.10.1

Categories
behavioral
Contexts
list
Readiness
react-and-vue

Playground

This component's contract doesn't list typed props, so the playground shows its documented example.

Documented example SortIndicator : mount, The component owns its indicator state and emits {field,direction,active}; the consumer owns record sorting. Tri-state cycle is none/ascending/descending/none; binary mode cycles ascending/descending. Authored state prop changes resynchronise the indicator..

The render follows the page's theme switch: light, dark or high contrast. Both frameworks render the same example.

The real SortIndicator, live
React
Vue

Events it emits: change. Use either render above, and each event shows here with the framework that sent it.

    Code

    The documented example. HTML is the markup the React component renders for it, which @oods/component-styles styles.

    import { SortIndicator } from '@oods/components-react';
import '@oods/component-styles/css';

export function Example() {
  return (
    <SortIndicator
      sortField="name"
      sortActive={false}
    />
  );
}

    Props, slots and events

    Contract version 1.1.0. Types are from the React declarations in @oods/components-react.

    PropTypeRequiredDocumented example
    label string | undefined no
    sortField string | undefined no name
    sortDirection string | undefined no
    sortActive boolean | undefined no false
    triStateSort boolean | undefined no
    sortableFields readonly string[] | undefined no
    defaultSortField string | undefined no
    defaultSortDirection string | undefined no

    Slots

    none

    Events

    change

    States

    none, ascending, descending

    Accessibility

    Role
    button
    How it gets its name
    aria-label on button

    Keyboard

    KeyWhat it does
    TabFocus the sort control
    EnterCycle sort state
    Cycle sort state

    Obligations in the contract

    • A labelled native button inside a scoped column header exposes aria-sort
    • Tab reaches the button; Enter and Space cycle the state

    The component owns its indicator state and emits {field,direction,active}; the consumer owns record sorting. Tri-state cycle is none/ascending/descending/none; binary mode cycles ascending/descending. Authored state prop changes resynchronise the indicator.

    Tokens

    The token roles this component reads.

    • button.background
    • button.text
    • focus.outer

    Readiness

    The evidence recorded for this component, with its label.

    react-and-vue: catalog_list gives this label when the React and Vue components have complete readiness evidence, but the sweep's generated apps don't use the component in both.

    EvidenceReactVue
    stateimplemented-evidence-completeimplemented-evidence-complete
    versioned contractpassedpassed
    target implementationpassedpassed
    package exportpassedpassed
    public declarationpassedpassed
    dependency closurepassedpassed
    framework scenariopassedpassed
    accessibilityverifiedverified
    interactionverifiedverified
    visual themesverifiedverified

    Use your own

    You can replace this component with your own React or Vue component. Map it, and generated code imports yours at the exact version you name. A contract report, run in a real browser, lists what your component met, what it didn't, and what wasn't checked.

    The component_map call, with the parts in angle brackets yours to fill:

    {
  "action": "create",
  "apply": true,
  "externalSystem": "<your design system>",
  "externalComponent": "<YourSortIndicator>",
  "oodsTraits": [
    "Sortable"
  ],
  "substitution": {
    "component": "SortIndicator",
    "react": {
      "package": "<your-package>/react",
      "version": "<exact version>",
      "export": "<YourSortIndicator>"
    },
    "vue": {
      "package": "<your-package>/vue",
      "version": "<exact version>",
      "export": "<YourSortIndicator>"
    }
  }
}

    How this page was made

    Generated at build from the published data, each source with the hash of what was read. The page's manifest.

    • Contract: @oods/component-contracts@0.10.1 componentContracts.SortIndicator sha256:2fc9e42cd200…
    • Documented example: @oods/component-contracts@0.10.1 sharedScenarios SortIndicator sha256:9c3aebc9bd97…
    • Catalog entry (catalog_list): generated/0.10.1/system/catalog.json SortIndicator sha256:339d5af57871…
    • React readiness: @oods/components-react@0.10.1 readiness SortIndicator sha256:4c614a3d26ae…
    • Vue readiness: @oods/components-vue@0.10.1 readiness SortIndicator sha256:4c612b1cbd04…
    • Prop types: generated/0.10.1/components/prop-types.json SortIndicator sha256:718be04e11a1…