diff --git a/packages/beeq/src/components.d.ts b/packages/beeq/src/components.d.ts index e43bf72eb..0ce0507dd 100644 --- a/packages/beeq/src/components.d.ts +++ b/packages/beeq/src/components.d.ts @@ -29,7 +29,7 @@ import { TSpinnerSize, TSpinnerTextPosition } from "./components/spinner/bq-spin import { TStatusType } from "./components/status/bq-status.types"; import { TStepsSize, TStepsType } from "./components/steps/bq-steps.types"; import { TStepItemStatus } from "./components/step-item/bq-step-item.types"; -import { TSwitchInnerLabel, TSwitchJustifyContent, TSwitchWritingMode } from "./components/switch/bq-switch.types"; +import { TSwitchInnerLabel, TSwitchJustifyContent, TSwitchOrientation } from "./components/switch/bq-switch.types"; import { TTabSize } from "./components/tab/bq-tab.types"; import { TTagBorderRadius, TTagColor, TTagSize, TTagVariant } from "./components/tag/bq-tag.types"; import { TTextareaAutoCapitalize, TTextareaWrap } from "./components/textarea/bq-textarea.types"; @@ -58,7 +58,7 @@ export { TSpinnerSize, TSpinnerTextPosition } from "./components/spinner/bq-spin export { TStatusType } from "./components/status/bq-status.types"; export { TStepsSize, TStepsType } from "./components/steps/bq-steps.types"; export { TStepItemStatus } from "./components/step-item/bq-step-item.types"; -export { TSwitchInnerLabel, TSwitchJustifyContent, TSwitchWritingMode } from "./components/switch/bq-switch.types"; +export { TSwitchInnerLabel, TSwitchJustifyContent, TSwitchOrientation } from "./components/switch/bq-switch.types"; export { TTabSize } from "./components/tab/bq-tab.types"; export { TTagBorderRadius, TTagColor, TTagSize, TTagVariant } from "./components/tag/bq-tag.types"; export { TTextareaAutoCapitalize, TTextareaWrap } from "./components/textarea/bq-textarea.types"; @@ -1183,6 +1183,10 @@ export namespace Components { * Name of the form control. Submitted with the form as part of a name/value pair */ "name": string; + /** + * This prop defines the CSS support orientation layout direction of the switch component. + */ + "orientation"?: TSwitchOrientation; /** * If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted */ @@ -1207,10 +1211,6 @@ export namespace Components { * The input control's value, submitted as a name/value pair with form data. */ "value"?: string; - /** - * Defines the writing mode of the switch. This prop determines the orientation in which the switch and its label are displayed. It can be set to either 'horizontal' or 'vertical'. - 'horizontal': The switch and its label are displayed in a horizontal layout. - 'vertical': The switch and its label are displayed in a vertical layout. Default is 'horizontal'. - */ - "writingMode"?: TSwitchWritingMode; } interface BqTab { /** @@ -3586,6 +3586,10 @@ declare namespace LocalJSX { * Handler to be called when the switch gets focus */ "onBqFocus"?: (event: BqSwitchCustomEvent) => void; + /** + * This prop defines the CSS support orientation layout direction of the switch component. + */ + "orientation"?: TSwitchOrientation; /** * If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted */ @@ -3598,10 +3602,6 @@ declare namespace LocalJSX { * The input control's value, submitted as a name/value pair with form data. */ "value"?: string; - /** - * Defines the writing mode of the switch. This prop determines the orientation in which the switch and its label are displayed. It can be set to either 'horizontal' or 'vertical'. - 'horizontal': The switch and its label are displayed in a horizontal layout. - 'vertical': The switch and its label are displayed in a vertical layout. Default is 'horizontal'. - */ - "writingMode"?: TSwitchWritingMode; } interface BqTab { /** diff --git a/packages/beeq/src/components/switch/_storybook/bq-switch.stories.tsx b/packages/beeq/src/components/switch/_storybook/bq-switch.stories.tsx index ab5608cfa..c8101d912 100644 --- a/packages/beeq/src/components/switch/_storybook/bq-switch.stories.tsx +++ b/packages/beeq/src/components/switch/_storybook/bq-switch.stories.tsx @@ -2,7 +2,7 @@ import type { Args, Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit-html'; import mdx from './bq-switch.mdx'; -import { SWITCH_INNER_LABEL, SWITCH_JUSTIFY_CONTENT, SWITCH_WRITING_MODE } from '../bq-switch.types'; +import { SWITCH_INNER_LABEL, SWITCH_JUSTIFY_CONTENT, SWITCH_ORIENTATION_MODE } from '../bq-switch.types'; const meta: Meta = { title: 'Components/Switch', @@ -19,7 +19,7 @@ const meta: Meta = { 'full-width': { control: 'boolean' }, 'inner-label': { control: 'inline-radio', options: [...SWITCH_INNER_LABEL] }, 'justify-content': { control: 'select', options: [...SWITCH_JUSTIFY_CONTENT] }, - 'writing-mode': { control: 'select', options: [...SWITCH_WRITING_MODE] }, + orientation: { control: 'select', options: [...SWITCH_ORIENTATION_MODE] }, name: { control: 'text' }, required: { control: 'boolean' }, 'reverse-order': { control: 'boolean' }, @@ -38,7 +38,7 @@ const meta: Meta = { 'full-width': false, 'inner-label': 'default', 'justify-content': 'start', - 'writing-mode': 'horizontal', + orientation: 'horizontal', name: 'bq-switch', required: false, 'reverse-order': false, @@ -59,7 +59,7 @@ const Template = (args: Args) => html` ?full-width=${args['full-width']} inner-label=${args['inner-label']} justify-content=${args['justify-content']} - writing-mode=${args['writing-mode']} + orientation=${args.orientation} name=${args.name} ?required=${args.required} ?reverse-order=${args['reverse-order']} @@ -74,9 +74,6 @@ const Template = (args: Args) => html` export const Default: Story = { render: Template, - args: { - 'writing-mode': 'vertical', - }, }; export const Checked: Story = { diff --git a/packages/beeq/src/components/switch/bq-switch.tsx b/packages/beeq/src/components/switch/bq-switch.tsx index c529bc10d..fa57f79c5 100644 --- a/packages/beeq/src/components/switch/bq-switch.tsx +++ b/packages/beeq/src/components/switch/bq-switch.tsx @@ -1,6 +1,6 @@ import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core'; -import { TSwitchInnerLabel, TSwitchJustifyContent, TSwitchWritingMode } from './bq-switch.types'; +import { TSwitchInnerLabel, TSwitchJustifyContent, TSwitchOrientation } from './bq-switch.types'; import { getTextContent, isNil } from '../../shared/utils'; /** @@ -76,18 +76,8 @@ export class BqSwitch { /** The input control's value, submitted as a name/value pair with form data. */ @Prop({ reflect: true }) value?: string; - /** - * Defines the writing mode of the switch. - * - * This prop determines the orientation in which the switch and its label are displayed. - * It can be set to either 'horizontal' or 'vertical'. - * - * - 'horizontal': The switch and its label are displayed in a horizontal layout. - * - 'vertical': The switch and its label are displayed in a vertical layout. - * - * Default is 'horizontal'. - */ - @Prop({ reflect: true }) writingMode?: TSwitchWritingMode = 'horizontal'; + /** This prop defines the CSS support orientation layout direction of the switch component. */ + @Prop({ reflect: true }) orientation?: TSwitchOrientation = 'horizontal'; // Prop lifecycle events // ======================= @@ -197,7 +187,7 @@ export class BqSwitch { render() { const transformValue = - this.writingMode === 'vertical' + this.orientation === 'vertical' ? 'translateY(calc(var(--bq-switch--width) - var(--bq-switch--dot-size) - 8px))' : 'translateX(calc(var(--bq-switch--width) - var(--bq-switch--dot-size) - 8px))'; diff --git a/packages/beeq/src/components/switch/bq-switch.types.ts b/packages/beeq/src/components/switch/bq-switch.types.ts index af2417b6a..2c2a539fd 100644 --- a/packages/beeq/src/components/switch/bq-switch.types.ts +++ b/packages/beeq/src/components/switch/bq-switch.types.ts @@ -19,5 +19,5 @@ export const SWITCH_JUSTIFY_CONTENT = [ ] as const; export type TSwitchJustifyContent = (typeof SWITCH_JUSTIFY_CONTENT)[number]; -export const SWITCH_WRITING_MODE = ['horizontal', 'vertical'] as const; -export type TSwitchWritingMode = (typeof SWITCH_WRITING_MODE)[number]; +export const SWITCH_ORIENTATION_MODE = ['horizontal', 'vertical'] as const; +export type TSwitchOrientation = (typeof SWITCH_ORIENTATION_MODE)[number]; diff --git a/packages/beeq/src/components/switch/readme.md b/packages/beeq/src/components/switch/readme.md index a75c7e3af..9e17f4a26 100644 --- a/packages/beeq/src/components/switch/readme.md +++ b/packages/beeq/src/components/switch/readme.md @@ -12,19 +12,19 @@ They should provide immediate results, giving users the freedom to control their ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `backgroundOnHover` | `background-on-hover` | If true, a background will be displayed on hover | `boolean` | `false` | -| `checked` | `checked` | It indicates whether if the switch is `ON` by default (when the page loads) | `boolean` | `false` | -| `disabled` | `disabled` | If true, the switch control will be disabled and no interaction will be allowed | `boolean` | `false` | -| `fullWidth` | `full-width` | If true, the component will take the full width space available on the parent container | `boolean` | `false` | -| `innerLabel` | `inner-label` | It indicates how to to display the on/off marks inside the control, with icons or none (default) | `"default" \| "icon"` | `'default'` | -| `justifyContent` | `justify-content` | It defines how to distribute the space between and around the control and the label text (https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | `"center" \| "end" \| "flex-end" \| "flex-start" \| "inherit" \| "initial" \| "left" \| "normal" \| "right" \| "space-around" \| "space-between" \| "space-evenly" \| "start" \| "stretch"` | `'start'` | -| `name` _(required)_ | `name` | Name of the form control. Submitted with the form as part of a name/value pair | `string` | `undefined` | -| `required` | `required` | If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted | `boolean` | `false` | -| `reverseOrder` | `reverse-order` | If true, the order of the control and the label text will be changed | `boolean` | `false` | -| `value` | `value` | The input control's value, submitted as a name/value pair with form data. | `string` | `undefined` | -| `writingMode` | `writing-mode` | Defines the writing mode of the switch. This prop determines the orientation in which the switch and its label are displayed. It can be set to either 'horizontal' or 'vertical'. - 'horizontal': The switch and its label are displayed in a horizontal layout. - 'vertical': The switch and its label are displayed in a vertical layout. Default is 'horizontal'. | `"horizontal" \| "vertical"` | `'horizontal'` | +| Property | Attribute | Description | Type | Default | +| ------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | +| `backgroundOnHover` | `background-on-hover` | If true, a background will be displayed on hover | `boolean` | `false` | +| `checked` | `checked` | It indicates whether if the switch is `ON` by default (when the page loads) | `boolean` | `false` | +| `disabled` | `disabled` | If true, the switch control will be disabled and no interaction will be allowed | `boolean` | `false` | +| `fullWidth` | `full-width` | If true, the component will take the full width space available on the parent container | `boolean` | `false` | +| `innerLabel` | `inner-label` | It indicates how to to display the on/off marks inside the control, with icons or none (default) | `"default" \| "icon"` | `'default'` | +| `justifyContent` | `justify-content` | It defines how to distribute the space between and around the control and the label text (https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | `"center" \| "end" \| "flex-end" \| "flex-start" \| "inherit" \| "initial" \| "left" \| "normal" \| "right" \| "space-around" \| "space-between" \| "space-evenly" \| "start" \| "stretch"` | `'start'` | +| `name` _(required)_ | `name` | Name of the form control. Submitted with the form as part of a name/value pair | `string` | `undefined` | +| `orientation` | `orientation` | This prop defines the CSS support orientation layout direction of the switch component. | `"horizontal" \| "vertical"` | `'horizontal'` | +| `required` | `required` | If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted | `boolean` | `false` | +| `reverseOrder` | `reverse-order` | If true, the order of the control and the label text will be changed | `boolean` | `false` | +| `value` | `value` | The input control's value, submitted as a name/value pair with form data. | `string` | `undefined` | ## Events