fix(range): use flex by default

ovh · Aug 24, 2023 · 0b043ae · 0b043ae
1 parent ad0875f
commit 0b043ae
Show file tree

Hide file tree

Showing 19 changed files with 71 additions and 71 deletions.
diff --git a/packages-new/components/range/documentation/specifications/spec.md b/packages-new/components/range/documentation/specifications/spec.md
@@ -6,20 +6,20 @@
 ## Interfaces
 
 ### OdsRangeAttributes
-|name | Type | Required | Default | Description|
-|---|---|:---:|---|---|
-|**`color`** | `OdsThemeColorIntent` |  |  | Range color theme|
-|**`disabled`** | _boolean_ |  |  | Indicate if the range is entirely disabled.It means no interaction is possible (hover, click, focus, etc)|
-|**`error`** | _boolean_ |  |  | If the range is in error or not|
-|**`errorStateControl`** | `OdsErrorStateControl` |  |  | Check range error state|
-|**`flex`** | _boolean_ |  |  | Flex unit for range width|
-|**`forbiddenValues`** | `OdsFormForbiddenValues` | ✴️ |  | The range forbidden values|
-|**`formControl`** | `OdsFormControl` |  |  | The form control for range|
-|**`id`** | _string_ |  |  | The range id|
-|**`max`** | _number_ |  |  | The range maximum value|
-|**`min`** | _number_ |  |  | The range minimum value|
-|**`step`** | _number_ |  |  | The range step value|
-|**`value`** | `OdsRangeValue` | ✴️ |  | The range value|
+| name                    | Type | Required | Default | Description                                                                                               |
+|-------------------------|---|:---:|---|-----------------------------------------------------------------------------------------------------------|
+| **`color`**             | `OdsThemeColorIntent` |  |  | Range color theme                                                                                         |
+| **`disabled`**          | _boolean_ |  |  | Indicate if the range is entirely disabled.It means no interaction is possible (hover, click, focus, etc) |
+| **`error`**             | _boolean_ |  |  | If the range is in error or not                                                                           |
+| **`errorStateControl`** | `OdsErrorStateControl` |  |  | Check range error state                                                                                   |
+| **`inline`**            | _boolean_ |  |  | Inline unit for range width                                                                               |
+| **`forbiddenValues`**   | `OdsFormForbiddenValues` | ✴️ |  | The range forbidden values                                                                                |
+| **`formControl`**       | `OdsFormControl` |  |  | The form control for range                                                                                |
+| **`id`**                | _string_ |  |  | The range id                                                                                              |
+| **`max`**               | _number_ |  |  | The range maximum value                                                                                   |
+| **`min`**               | _number_ |  |  | The range minimum value                                                                                   |
+| **`step`**              | _number_ |  |  | The range step value                                                                                      |
+| **`value`**             | `OdsRangeValue` | ✴️ |  | The range value                                                                                           |
 
 ### OdsRangeBehavior
 |name | Type | Required | Default | Description|

diff --git a/...mponents/range/documentation/specifications/specifications-range-properties.mdx b/...mponents/range/documentation/specifications/specifications-range-properties.mdx
@@ -2,7 +2,7 @@
 |-- ------------------- | ------------------------------------------- | ------------- | -------------------------------------------------------- |
 | `[color]`             | **_OdsThemeColor_**                         | `default`     | main color<br />_See design components principles_       |
 | `[disabled]`          | `boolean`                                   | `false`       | disabled state<br />_See design components principles_   |
-| `[flex]`              | `boolean`                                   | `false`       | full width or not                                        |
+| `[inline]`            | `boolean`                                   | `false`       | full width or not                                        |
 | `[max]`               | `number`                                    | `0`           | The maximum value that the slider can have               |
 | `[min]`               | `number`                                    | `0`           | The minimum value that the slider can have               |
 | `[step]`              | `number`                                    | `1`           | The values at which the range can be snapped             |

diff --git a/...ew/components/range/documentation/specifications/specifications-range-tests.mdx b/...ew/components/range/documentation/specifications/specifications-range-tests.mdx
@@ -6,6 +6,6 @@
     - should not be disabled by default
     - should be not clickable if disabled
     - should not emit event if disabled
-**flex**
+**inline**
     - should be a `number` or `void`
     - should have size to `100%` if `void`
diff --git a/packages-new/components/range/src/components/osds-range/constants/default-attributes.ts b/packages-new/components/range/src/components/osds-range/constants/default-attributes.ts
@@ -6,13 +6,13 @@ const DEFAULT_ATTRIBUTE: OdsRangeAttribute = Object.freeze({
   disabled: false,
   error: undefined,
   errorStateControl: undefined,
-  flex: false,
+  forbiddenValues: [],
+  formControl: undefined,
+  inline: false,
   max: 100,
   min: 0,
   step: 1,
   value: '',
-  forbiddenValues: [],
-  formControl: undefined
 });
 
 export {

diff --git a/packages-new/components/range/src/components/osds-range/interfaces/attributes.ts b/packages-new/components/range/src/components/osds-range/interfaces/attributes.ts
@@ -21,9 +21,9 @@ interface OdsRangeAttribute {
    */
   errorStateControl?: OdsErrorStateControl;
   /**
-   * Flex unit for range width
+   * inline unit for range width
    */
-  flex?: boolean;
+  inline?: boolean;
   /**
    * The range id
    */

diff --git a/packages-new/components/range/src/components/osds-range/interfaces/events.ts b/packages-new/components/range/src/components/osds-range/interfaces/events.ts
@@ -1,6 +1,6 @@
 import type { OdsValidityState } from '@ovhcloud/ods-common-core';
-import { OdsRangeValue } from './value';
-import { EventEmitter } from '@stencil/core';
+import type { OdsRangeValue } from './value';
+import type { EventEmitter } from '@stencil/core';
 
 interface OdsRangeValueChangeEventDetail {
   validity: OdsValidityState;

diff --git a/packages-new/components/range/src/components/osds-range/osds-range.e2e.screenshot.ts b/packages-new/components/range/src/components/osds-range/osds-range.e2e.screenshot.ts
@@ -14,7 +14,7 @@ describe('e2e:osds-range', () => {
     disabled: false,
     error: undefined,
     errorStateControl: undefined,
-    flex: false,
+    inline: false,
     max: 100,
     min: 0,
     step: 1,

diff --git a/packages-new/components/range/src/components/osds-range/osds-range.e2e.ts b/packages-new/components/range/src/components/osds-range/osds-range.e2e.ts
@@ -16,7 +16,7 @@ describe('e2e:osds-range', () => {
     disabled: false,
     error: undefined,
     errorStateControl: undefined,
-    flex: false,
+    inline: false,
     max: 100,
     min: 0,
     step: 1,

diff --git a/packages-new/components/range/src/components/osds-range/osds-range.scss b/packages-new/components/range/src/components/osds-range/osds-range.scss
@@ -7,10 +7,18 @@
 @import '~@ovhcloud/ods-theming/ods-theme';
 
 :host {
-  display: inline-flex;
   flex-flow: column;
-  width: var(--width);
   position: relative;
+
+  @include osds-range-on-selected-host() {
+    width: 100%;
+    display: flex;
+  }
+}
+
+:host([inline]) {
+  display: inline-flex;
+  width: var(--width);
 }
 
 [disabled] {
@@ -24,13 +32,6 @@
   }
 }
 
-[flex] {
-  @include osds-range-on-selected-host() {
-    width: 100%;
-    display: flex;
-  }
-}
-
 :host(.dual-range) {
   .range-input,
   .range-input_dual {

diff --git a/packages-new/components/range/src/components/osds-range/osds-range.spec.ts b/packages-new/components/range/src/components/osds-range/osds-range.spec.ts
@@ -2,20 +2,20 @@ jest.mock('./core/controller'); // keep jest.mock before any
 
 import type { SpecPage } from '@stencil/core/testing';
 import type { OdsRangeAttribute } from './interfaces/attributes';
+import type { OdsRangeValueChangeEventDetail } from './interfaces/events';
 import { newSpecPage } from '@stencil/core/testing';
 import { OdsFormControl, OdsCreateDefaultValidityState } from '@ovhcloud/ods-common-core';
 import {
   OdsCreateAttributes,
   OdsMockNativeMethod,
   OdsMockPropertyDescriptor,
-  OdsStringAttributes2Str,
+  odsStringAttributes2Str,
   OdsUnitTestAttributeType,
   odsUnitTestAttribute,
   odsComponentAttributes2StringAttributes
 } from '@ovhcloud/ods-common-testing';
 import { OdsThemeColorIntent, OdsThemeColorIntentList } from '@ovhcloud/ods-theming';
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
-import { OdsRangeValueChangeEventDetail } from './interfaces/events';
 import { OdsRangeController } from './core/controller';
 import { OsdsRange } from './osds-range';
 
@@ -33,7 +33,7 @@ describe('spec:osds-range', () => {
     disabled: false,
     error: undefined,
     errorStateControl: undefined,
-    flex: false,
+    inline: false,
     max: 100,
     min: 0,
     step: 1,
@@ -43,7 +43,7 @@ describe('spec:osds-range', () => {
   };
 
 
-  async function setup({ attributes = {} }: { attributes?: Partial<OdsRangeAttribute> }) {
+  async function setup({ attributes = {} }: { attributes?: Partial<OdsRangeAttribute> } = {}) {
     const stringAttributes = odsComponentAttributes2StringAttributes<OdsRangeAttribute>({ ...baseAttribute, ...attributes }, DEFAULT_ATTRIBUTE);
 
     // mock setCustomValidity method that does not exist when stencil mock HTMLInputElement
@@ -105,13 +105,13 @@ describe('spec:osds-range', () => {
         ...config,
       });
     });
-    describe('flex', () => {
-      odsUnitTestAttribute<OdsRangeAttribute, 'flex'>({
-        name: 'flex',
-        defaultValue: DEFAULT_ATTRIBUTE.flex,
+    describe('inline', () => {
+      odsUnitTestAttribute<OdsRangeAttribute, 'inline'>({
+        name: 'inline',
+        defaultValue: DEFAULT_ATTRIBUTE.inline,
         newValue: false,
         value: true,
-        setup: (value) => setup({ attributes: { ['flex']: value } }),
+        setup: (value) => setup({ attributes: { ['inline']: value } }),
         ...config,
       });
     });

diff --git a/packages-new/components/range/src/components/osds-range/osds-range.tsx b/packages-new/components/range/src/components/osds-range/osds-range.tsx
@@ -37,8 +37,8 @@ export class OsdsRange implements OdsRangeAttribute, OdsRangeEvent {
   /** @see OdsRangeAttributes.disabled */
   @Prop({ reflect: true }) public disabled?: boolean = DEFAULT_ATTRIBUTE.disabled;
 
-  /** @see OdsRangeAttributes.flex */
-  @Prop({ reflect: true }) public flex?: boolean = DEFAULT_ATTRIBUTE.flex;
+  /** @see OdsRangeAttributes.inline */
+  @Prop({ reflect: true }) public inline?: boolean = DEFAULT_ATTRIBUTE.inline;
 
   /** @see OdsRangeAttributes.max */
   @Prop({ reflect: true }) public max?: number = DEFAULT_ATTRIBUTE.max;

diff --git a/packages-new/components/range/src/components/osds-range/public-api.ts b/packages-new/components/range/src/components/osds-range/public-api.ts
@@ -1,2 +1,3 @@
 export type { OdsRangeAttribute } from './interfaces/attributes'
+export type { OdsRangeEvent } from './interfaces/events'
 export { OsdsRange } from './osds-range'
diff --git a/packages-new/components/range/src/docs/osds-range/properties/usage.flex.mdx b/packages-new/components/range/src/docs/osds-range/properties/usage.flex.mdx
diff --git a/packages-new/components/range/src/docs/osds-range/properties/usage.inline.mdx b/packages-new/components/range/src/docs/osds-range/properties/usage.inline.mdx
@@ -0,0 +1,7 @@
+<div class="container">
+  <osds-range inline></osds-range>
+</div>
+
+```html
+<osds-range inline>Default</osds-range>
+```
diff --git a/packages-new/components/range/src/docs/osds-range/usage.mdx b/packages-new/components/range/src/docs/osds-range/usage.mdx
@@ -1,4 +1,4 @@
-import FlexProperty from './properties/usage.flex.mdx';
+import InlineProperty from './properties/usage.inline.mdx';
 import DualProperty from './properties/usage.dual.mdx';
 import DisabledProperty from './properties/usage.disabled.mdx';
 import ColorProperty from './properties/usage.color.mdx';

diff --git a/packages-new/components/range/src/global.dev.ts b/packages-new/components/range/src/global.dev.ts
@@ -4,8 +4,8 @@
 // ###
 
 import type { OdsInputValueChangeEventDetail } from '@ovhcloud/ods-component-input';
-import type { OdsValidityState, OdsFormControl, OdsErrorStateControl } from '@ovhcloud/ods-common-core';
-import { OdsLogger } from '@ovhcloud/ods-common-core';
+import type { OdsValidityState } from '@ovhcloud/ods-common-core';
+import { OdsLogger, OdsFormControl, OdsErrorStateControl } from '@ovhcloud/ods-common-core';
 import { OsdsRange } from './components/osds-range/osds-range';
 import './components';
 import './global';

diff --git a/packages-new/components/range/src/index.html b/packages-new/components/range/src/index.html
@@ -26,18 +26,16 @@
 <osds-range max="100"  color="success"></osds-range>
 <osds-range max="100"  color="info"></osds-range>
 
-<p>Flex</p>
-<osds-range></osds-range>
-<p></p>
-<osds-range flex></osds-range>
+<p>Inline</p>
+<osds-range inline></osds-range>
 
 <p>Disabled</p>
 <osds-range disabled>Default</osds-range>
 
 
 <p>Validation (<i>forbidden: 4, { min: 7, max: 20 }</i>)</p>
 <article id="example-1">
-  <osds-range id="range-1" min="0" max="60" step="2" value="3" flex color="primary">
+  <osds-range id="range-1" min="0" max="60" step="2" value="3" color="primary">
   </osds-range>
   <span class="error-msg forbidden-value">Forbidden value</span>
   <span class="error-msg value-missing">Value required please</span>
@@ -48,7 +46,7 @@
 <p>Validation with multi (<i>forbidden: {min: 50, max: 55}</i>)</p>
 
 <article id="example-2">
-  <osds-range id="range-valid-multi" min="0" max="60" step="2" flex color="primary">
+  <osds-range id="range-valid-multi" min="0" max="60" step="2" color="primary">
   </osds-range>
   <span class="error-msg forbidden-value">Forbidden value</span>
   <span class="error-msg value-missing">Value required please</span>
@@ -57,22 +55,22 @@
 </article>
 
 <p>Multi</p>
-<osds-range id="range-2" min="0" max="60" step="2" flex color="primary"></osds-range>
+<osds-range id="range-2" min="0" max="60" step="2" color="primary"></osds-range>
 <p></p>
-<osds-range id="range-3" min="0" max="60" step="2" flex color="primary"></osds-range>
+<osds-range id="range-3" min="0" max="60" step="2" color="primary"></osds-range>
 <p></p>
-<osds-range id="range-4" min="0" max="60" step="2" flex color="primary" disabled></osds-range>
+<osds-range id="range-4" min="0" max="60" step="2" color="primary" disabled></osds-range>
 
 <p>Bounds</p>
-<osds-range id="range-5" min="0" max="60" step="2" flex color="primary">
+<osds-range id="range-5" min="0" max="60" step="2" color="primary">
   <div slot="start-bound">start</div>
 </osds-range>
 <p></p>
-<osds-range id="range-6" min="0" max="60" step="2" flex color="primary">
+<osds-range id="range-6" min="0" max="60" step="2" color="primary">
   <div slot="end-bound">end</div>
 </osds-range>
 <p></p>
-<osds-range id="range-7" min="0" max="60" step="2" flex color="primary">
+<osds-range id="range-7" min="0" max="60" step="2" color="primary">
   <div slot="start-bound">start</div>
   <div slot="end-bound">end</div>
 </osds-range>

diff --git a/packages/guide/tile/range-tile/guide-range-tile.web.stories.group.ts b/packages/guide/tile/range-tile/guide-range-tile.web.stories.group.ts
@@ -9,7 +9,7 @@ import {
   OdsFormControl,
   OdsValidityState
 } from '@ovhcloud/ods-core';
-import { OdsRangeValueChangeEventDetail } from '@ovhcloud/ods-component-range/';
+import { OdsRangeValueChangeEventDetail } from '@ovhcloud/ods-component-range';
 import { OdsInputValueChangeEventDetail } from '@ovhcloud/ods-component-input';
 
 export const RadioGroupTemplate = (args: any) => html`

diff --git a/packages/tools/storybook/stories/components/range/range.web-components.stories.ts b/packages/tools/storybook/stories/components/range/range.web-components.stories.ts
@@ -50,7 +50,7 @@ const storyParams = {
     category: 'Misc',
     defaultValue: false
   },
-  flex: {
+  inline: {
     category: 'Misc',
     defaultValue: false
   },
@@ -74,8 +74,8 @@ export default {
 
 // A range example
 const TemplateDefault = (args: any) => {
-  if (args.flex === 0) {
-    delete args.flex;
+  if (args.inline === 0) {
+    delete args.inline;
   }
   return html`
     <div class='range-container'>