apply PR feedback

SchwarzIT · Aug 8, 2024 · 2bc7d62 · 2bc7d62
1 parent 61a3707
commit 2bc7d62
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/...src/components/examples/GridPlayground/EditGridElementDialog/EditGridElementDialog.ct.tsx b/...src/components/examples/GridPlayground/EditGridElementDialog/EditGridElementDialog.ct.tsx
@@ -29,12 +29,12 @@ test("should behave correctly", async ({ mount, makeAxeBuilder, page }) => {
  await expect(page).toHaveScreenshot("default.png");
  await expect(dialog).toBeVisible();
 
- const columnCountStepper = dialog.getByLabel("Default column count");
+ const columnCountStepper = dialog.getByLabel("Default number of columns");
  await expect(columnCountStepper).toBeFocused();
  await expect(columnCountStepper).toHaveAttribute("min", "1");
  await expect(columnCountStepper).toHaveAttribute("max", "20");
 
- const smBreakpointStepper = dialog.getByLabel("Column count for breakpoint sm");
+ const smBreakpointStepper = dialog.getByLabel("Number of columns for breakpoint sm");
  await expect(smBreakpointStepper).toBeDisabled();
 
  // ACT
@@ -64,7 +64,7 @@ test("should behave correctly", async ({ mount, makeAxeBuilder, page }) => {
  await dialog.getByLabel("MD breakpoint").check();
 
  // ASSERT
- await expect(dialog.getByLabel("Column count for breakpoint md")).toHaveValue("4");
+ await expect(dialog.getByLabel("Number of columns for breakpoint md")).toHaveValue("4");
 
  // ACT
  await dialog.getByRole("button", { name: "Apply" }).click();

diff --git a/...yx/src/components/examples/GridPlayground/EditGridElementDialog/EditGridElementDialog.vue b/...yx/src/components/examples/GridPlayground/EditGridElementDialog/EditGridElementDialog.vue
@@ -70,8 +70,8 @@ const handleCheckboxChange = (isChecked: boolean, breakpoint: OnyxBreakpoint) =>
 
  <OnyxStepper
  v-model="state.columnCount"
- label="Default column count"
- placeholder="Default column count"
+ label="Default number of columns"
+ placeholder="Default number of columns"
  v-bind="STEPPER_VALIDATIONS"
  autofocus
  required
@@ -80,7 +80,7 @@ const handleCheckboxChange = (isChecked: boolean, breakpoint: OnyxBreakpoint) =>
 
  <div class="dialog__body">
  <p class="dialog__description onyx-text--small">
- The breakpoint configs follow a "grater or equal than" logic. Example: For default column
+ The breakpoint configs follow a "greater or equal than" logic. Example: For default column
  4 and breakpoint "md" with 8 columns, the component will span 4 columns for breakpoints
  smaller than md and 8 columns for md and larger.
  </p>
@@ -101,7 +101,7 @@ const handleCheckboxChange = (isChecked: boolean, breakpoint: OnyxBreakpoint) =>
  />
  <OnyxStepper
  v-model="state.breakpoints[breakpoint]"
- :label="`Column count for breakpoint ${breakpoint}`"
+ :label="`Number of columns for breakpoint ${breakpoint}`"
  v-bind="STEPPER_VALIDATIONS"
  hide-label
  :disabled="!state.columnCount"

diff --git a/packages/sit-onyx/src/components/examples/GridPlayground/GridPlayground.ct.tsx b/packages/sit-onyx/src/components/examples/GridPlayground/GridPlayground.ct.tsx
@@ -39,7 +39,7 @@ test("should add/edit grid elements", async ({ mount, page }) => {
 
  // ASSERT
  const dialog = page.getByRole("dialog", { name: "Column configuration" });
- const columnCountStepper = dialog.getByLabel("Default column count");
+ const columnCountStepper = dialog.getByLabel("Default number of columns");
  await expect(dialog).toBeVisible();
 
  // ACT

diff --git a/packages/sit-onyx/src/components/examples/GridPlayground/GridPlayground.vue b/packages/sit-onyx/src/components/examples/GridPlayground/GridPlayground.vue
@@ -91,7 +91,7 @@ const maxColumnsOptions: SelectOption[] = [
 
 const currentBreakpoint = computed(() => {
  const breakpoint = Object.entries(ONYX_BREAKPOINTS).reduce((prev, [name, width]) => {
- if (viewportSize.width.value >= width) return name;
+ if (viewportSize.width.value >= width) return name.toUpperCase();
  return prev;
  }, "2xs");
 
@@ -128,14 +128,14 @@ const currentBreakpoint = computed(() => {
  <div class="playground__options">
  <OnyxRadioGroup
  v-model="gridSettings.maxWidth"
- headline="Max content width"
+ label="Max content width"
  :options="maxWidthOptions"
  direction="horizontal"
  />
 
  <OnyxRadioGroup
  v-model="gridSettings.alignment"
- headline="Alignment"
+ label="Alignment"
  :options="alignmentOptions"
  direction="horizontal"
  :disabled="gridSettings.maxWidth === 'none'"
@@ -144,7 +144,7 @@ const currentBreakpoint = computed(() => {
  <OnyxRadioGroup
  v-if="viewportSize.width.value >= ONYX_BREAKPOINTS.xl"
  v-model="gridSettings.maxColumns"
- headline="Max columns"
+ label="Max columns"
  :options="maxColumnsOptions"
  direction="horizontal"
  />