feat(core/date-dropdown): changed breakpoints and documentation,

siemens · Oct 11, 2023 · d81c188 · d81c188
1 parent 5e63606
commit d81c188
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 68 deletions.
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -2293,7 +2293,12 @@
       "overview": "",
       "usage": {},
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "since",
+          "text": "2.1.0"
+        }
+      ],
       "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [
@@ -2342,7 +2347,7 @@
           "mutable": false,
           "attr": "custom-range-allowed",
           "reflectToAttr": false,
-          "docs": "Controls whether the user is allowed to pick custom date ranges in the component.\nWhen set to 'true', the user can select a custom date range using the date picker.\nWhen set to 'false', only predefined time date range are available for selection.",
+          "docs": "Controls whether the user is allowed to pick custom date ranges in the component.\nWhen set to 'true', the user can select a custom date range using the date picker.\nWhen set to 'false', only predefined time date ranges are available for selection.",
           "docsTags": [
             {
               "name": "default",
@@ -2398,12 +2403,7 @@
           "attr": "from",
           "reflectToAttr": false,
           "docs": "Picker date. If the picker is in range mode this property is the start date.\nIf set to `null` no default start date will be pre-selected.\n\nFormat is based on `format`",
-          "docsTags": [
-            {
-              "name": "since",
-              "text": "1.1.0"
-            }
-          ],
+          "docsTags": [],
           "default": "null",
           "values": [
             {
@@ -2442,12 +2442,7 @@
           "attr": "max-date",
           "reflectToAttr": false,
           "docs": "The latest date that can be selected by the date picker.\nIf not set there will be no restriction.",
-          "docsTags": [
-            {
-              "name": "since",
-              "text": "1.1.0"
-            }
-          ],
+          "docsTags": [],
           "values": [
             {
               "type": "string"
@@ -2463,12 +2458,7 @@
           "attr": "min-date",
           "reflectToAttr": false,
           "docs": "The earliest date that can be selected by the date picker.\nIf not set there will be no restriction.",
-          "docsTags": [
-            {
-              "name": "since",
-              "text": "1.1.0"
-            }
-          ],
+          "docsTags": [],
           "values": [
             {
               "type": "string"
@@ -2501,12 +2491,7 @@
           "attr": "to",
           "reflectToAttr": false,
           "docs": "Picker date. If the picker is in range mode this property is the end date.\nIf the picker is not in range mode leave this value `null`\n\nFormat is based on `format`",
-          "docsTags": [
-            {
-              "name": "since",
-              "text": "1.1.0"
-            }
-          ],
+          "docsTags": [],
           "default": "null",
           "values": [
             {

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -474,9 +474,12 @@ export namespace Components {
          */
         "itemName": string;
     }
+    /**
+     * @since 2.1.0
+     */
     interface IxDateDropdown {
         /**
-          * Controls whether the user is allowed to pick custom date ranges in the component. When set to 'true', the user can select a custom date range using the date picker. When set to 'false', only predefined time date range are available for selection.
+          * Controls whether the user is allowed to pick custom date ranges in the component. When set to 'true', the user can select a custom date range using the date picker. When set to 'false', only predefined time date ranges are available for selection.
           * @default ''
          */
         "customRangeAllowed": boolean;
@@ -490,7 +493,6 @@ export namespace Components {
         "format": string;
         /**
           * Picker date. If the picker is in range mode this property is the start date. If set to `null` no default start date will be pre-selected.  Format is based on `format`
-          * @since 1.1.0
          */
         "from": string | null;
         /**
@@ -505,12 +507,10 @@ export namespace Components {
         "initialSelectedDateRangeName": string;
         /**
           * The latest date that can be selected by the date picker. If not set there will be no restriction.
-          * @since 1.1.0
          */
         "maxDate": string;
         /**
           * The earliest date that can be selected by the date picker. If not set there will be no restriction.
-          * @since 1.1.0
          */
         "minDate": string;
         /**
@@ -519,7 +519,6 @@ export namespace Components {
         "range": boolean;
         /**
           * Picker date. If the picker is in range mode this property is the end date. If the picker is not in range mode leave this value `null`  Format is based on `format`
-          * @since 1.1.0
          */
         "to": string | null;
     }
@@ -2549,6 +2548,9 @@ declare global {
         prototype: HTMLIxCssGridItemElement;
         new (): HTMLIxCssGridItemElement;
     };
+    /**
+     * @since 2.1.0
+     */
     interface HTMLIxDateDropdownElement extends Components.IxDateDropdown, HTMLStencilElement {
     }
     var HTMLIxDateDropdownElement: {
@@ -3621,9 +3623,12 @@ declare namespace LocalJSX {
          */
         "itemName"?: string;
     }
+    /**
+     * @since 2.1.0
+     */
     interface IxDateDropdown {
         /**
-          * Controls whether the user is allowed to pick custom date ranges in the component. When set to 'true', the user can select a custom date range using the date picker. When set to 'false', only predefined time date range are available for selection.
+          * Controls whether the user is allowed to pick custom date ranges in the component. When set to 'true', the user can select a custom date range using the date picker. When set to 'false', only predefined time date ranges are available for selection.
           * @default ''
          */
         "customRangeAllowed"?: boolean;
@@ -3637,7 +3642,6 @@ declare namespace LocalJSX {
         "format"?: string;
         /**
           * Picker date. If the picker is in range mode this property is the start date. If set to `null` no default start date will be pre-selected.  Format is based on `format`
-          * @since 1.1.0
          */
         "from"?: string | null;
         /**
@@ -3647,12 +3651,10 @@ declare namespace LocalJSX {
         "initialSelectedDateRangeName"?: string;
         /**
           * The latest date that can be selected by the date picker. If not set there will be no restriction.
-          * @since 1.1.0
          */
         "maxDate"?: string;
         /**
           * The earliest date that can be selected by the date picker. If not set there will be no restriction.
-          * @since 1.1.0
          */
         "minDate"?: string;
         /**
@@ -3667,7 +3669,6 @@ declare namespace LocalJSX {
         "range"?: boolean;
         /**
           * Picker date. If the picker is in range mode this property is the end date. If the picker is not in range mode leave this value `null`  Format is based on `format`
-          * @since 1.1.0
          */
         "to"?: string | null;
     }
@@ -5660,6 +5661,9 @@ declare module "@stencil/core" {
             "ix-content-header": LocalJSX.IxContentHeader & JSXBase.HTMLAttributes<HTMLIxContentHeaderElement>;
             "ix-css-grid": LocalJSX.IxCssGrid & JSXBase.HTMLAttributes<HTMLIxCssGridElement>;
             "ix-css-grid-item": LocalJSX.IxCssGridItem & JSXBase.HTMLAttributes<HTMLIxCssGridItemElement>;
+            /**
+             * @since 2.1.0
+             */
             "ix-date-dropdown": LocalJSX.IxDateDropdown & JSXBase.HTMLAttributes<HTMLIxDateDropdownElement>;
             "ix-date-picker": LocalJSX.IxDatePicker & JSXBase.HTMLAttributes<HTMLIxDatePickerElement>;
             "ix-date-time-card": LocalJSX.IxDateTimeCard & JSXBase.HTMLAttributes<HTMLIxDateTimeCardElement>;

diff --git a/packages/core/src/components/date-dropdown/date-dropdown.scss b/packages/core/src/components/date-dropdown/date-dropdown.scss
@@ -12,15 +12,13 @@
 :host {
   @include ix-component;
   display: block;
-
-  @media screen and (max-width: 500px) {
+  @media (max-width: 48em) {
     .min-width {
       width: min-content;
     }
   }
 
-  @media screen and (min-width: 500px) {
-
+  @media (min-width: 48em) {
     .border-right {
       border-right: var(--theme-x-weak-bdr-2);
     }

diff --git a/packages/core/src/components/date-dropdown/date-dropdown.tsx b/packages/core/src/components/date-dropdown/date-dropdown.tsx
@@ -33,6 +33,9 @@ export type DateRangeChangeEvent = {
   to: string;
 };
 
+/**
+ * @since 2.1.0
+ */
 @Component({
   tag: 'ix-date-dropdown',
   styleUrl: 'date-dropdown.scss',
@@ -55,8 +58,6 @@ export class DateDropdown {
    * If set to `null` no default start date will be pre-selected.
    *
    * Format is based on `format`
-   *
-   * @since 1.1.0
    */
   @Prop() from: string | null = null;
 
@@ -65,24 +66,18 @@ export class DateDropdown {
    * If the picker is not in range mode leave this value `null`
    *
    * Format is based on `format`
-   *
-   * @since 1.1.0
    */
   @Prop() to: string | null = null;
 
   /**
    * The earliest date that can be selected by the date picker.
    * If not set there will be no restriction.
-   *
-   * @since 1.1.0
    */
   @Prop() minDate: string;
 
   /**
    * The latest date that can be selected by the date picker.
    * If not set there will be no restriction.
-   *
-   * @since 1.1.0
    */
   @Prop() maxDate: string;
 
@@ -96,7 +91,7 @@ export class DateDropdown {
   /**
    * Controls whether the user is allowed to pick custom date ranges in the component.
    * When set to 'true', the user can select a custom date range using the date picker.
-   * When set to 'false', only predefined time date range are available for selection.
+   * When set to 'false', only predefined time date ranges are available for selection.
    * @default ''
    */
   @Prop() public customRangeAllowed: boolean = true;

diff --git a/packages/core/src/index.html b/packages/core/src/index.html
@@ -7,30 +7,29 @@
 <!DOCTYPE html>
 <html dir="ltr" lang="en">
 <head>
-    <meta charset="utf-8"/>
-    <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
-    />
-    <title>Stencil Component Starter</title>
+  <meta charset="utf-8"/>
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+  />
+  <title>Stencil Component Starter</title>
 
-    <script type="module" src="/build/siemens-ix.esm.js"></script>
-    <script nomodule src="/build/siemens-ix.js"></script>
+  <script type="module" src="/build/siemens-ix.esm.js"></script>
+  <script nomodule src="/build/siemens-ix.js"></script>
 
-    <link rel="stylesheet" href="/build/siemens-ix.css"/>
-    <link
-            rel="stylesheet"
-            href="/build/ix-brand-theme/dist/ix-brand-theme/ix-brand-theme.css"
-    />
-    <script type="module">
-        import {defineCustomElements} from '/build/ix-brand-theme/loader/index.es2017.js';
+  <link rel="stylesheet" href="/build/siemens-ix.css"/>
+  <link
+    rel="stylesheet"
+    href="/build/ix-brand-theme/dist/ix-brand-theme/ix-brand-theme.css"
+  />
+  <script type="module">
+    import {defineCustomElements} from '/build/ix-brand-theme/loader/index.es2017.js';
 
-        defineCustomElements();
-    </script>
+    defineCustomElements();
+  </script>
 </head>
 
 <body style="margin: 0px; height: 100vh">
-<my-component/>
-<ix-date-dropdown></ix-date-dropdown>
+  <my-component/>
 </body>
 </html>