feat(stack-view): remove undocumented experimental edit mode

This feature is undocumented, experimental, and likely incomplete. Since there are no plans to complete or document it, I am removing it. BREAKING CHANGE: The undocumented, experimental stack view edit mode has been removed. Adopting this change should require no changes in your app unless you are using the removed undocumented feature. If so, you will need find another solution.
vmware-clarity · Dec 19, 2022 · aab7d82 · aab7d82
1 parent 5f37608
commit aab7d82
Show file tree

Hide file tree

Showing 12 changed files with 13 additions and 278 deletions.
diff --git a/.storybook/stories/stack-view/stack-block.stories.ts b/.storybook/stories/stack-view/stack-block.stories.ts
@@ -17,7 +17,6 @@ const defaultStory: Story = args => ({
       <clr-stack-block
         ${args.clrSbExpandable === undefined ? '' : '[clrSbExpandable]="clrSbExpandable"'}
         [clrSbExpanded]="clrSbExpanded"
-        [clrSbNotifyChange]="clrSbNotifyChange"
         [clrStackViewLevel]="clrStackViewLevel"
         (clrSbExpandedChange)="clrSbExpandedChange($event)"
       >
@@ -37,8 +36,6 @@ const defaultParameters: Parameters = {
   title: 'Stack View/Stack Block',
   component: ClrStackBlock,
   argTypes: {
-    // inputs
-    clrSbNotifyChange: { control: { disable: true }, table: { disable: true } }, // experimental
     // outputs
     clrSbExpandedChange: { control: { disable: true }, table: { disable: true } },
     // methods

diff --git a/.storybook/stories/stack-view/stack-view-with-lazy-loaded-blocks.stories.ts b/.storybook/stories/stack-view/stack-view-with-lazy-loaded-blocks.stories.ts
@@ -58,8 +58,6 @@ const defaultParameters: Parameters = {
   title: 'Stack View/Stack View with lazy-loaded blocks',
   component: ClrStackView,
   argTypes: {
-    // outputs
-    clrStackSave: { control: { disable: true }, table: { disable: true } }, // experimental
     // story helpers
     elementsBlockService: { control: { disable: true }, table: { disable: true } },
   },

diff --git a/.storybook/stories/stack-view/stack-view.stories.ts b/.storybook/stories/stack-view/stack-view.stories.ts
@@ -33,8 +33,6 @@ const defaultParameters: Parameters = {
   title: 'Stack View/Stack View',
   component: ClrStackView,
   argTypes: {
-    // outputs
-    clrStackSave: { control: { disable: true }, table: { disable: true } }, // experimental
     // story helpers
     openIndices: { control: { disable: true }, table: { disable: true } },
     createArray: { control: { disable: true }, table: { disable: true } },

diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md
@@ -263,11 +263,11 @@ export class ClrAccordionModule {
     // Warning: (ae-forgotten-export) The symbol "i3_28" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i4_19" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i5_16" needs to be exported by the entry point index.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i6_11" needs to be exported by the entry point index.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i7_10" needs to be exported by the entry point index.d.ts
+    // Warning: (ae-forgotten-export) The symbol "i6_10" needs to be exported by the entry point index.d.ts
+    // Warning: (ae-forgotten-export) The symbol "i7_9" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrAccordionModule, [typeof i1_47.ClrAccordion, typeof i2_36.ClrAccordionPanel, typeof i3_28.ClrAccordionTitle, typeof i4_19.ClrAccordionDescription, typeof i5_16.ClrAccordionContent, typeof i6_11.AccordionOompaLoompa, typeof i7_10.AccordionWillyWonka], [typeof i6.CommonModule, typeof i3_2.ClrIconModule], [typeof i1_47.ClrAccordion, typeof i2_36.ClrAccordionPanel, typeof i3_28.ClrAccordionTitle, typeof i4_19.ClrAccordionDescription, typeof i5_16.ClrAccordionContent, typeof i6_11.AccordionOompaLoompa, typeof i7_10.AccordionWillyWonka]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrAccordionModule, [typeof i1_47.ClrAccordion, typeof i2_36.ClrAccordionPanel, typeof i3_28.ClrAccordionTitle, typeof i4_19.ClrAccordionDescription, typeof i5_16.ClrAccordionContent, typeof i6_10.AccordionOompaLoompa, typeof i7_9.AccordionWillyWonka], [typeof i6.CommonModule, typeof i3_2.ClrIconModule], [typeof i1_47.ClrAccordion, typeof i2_36.ClrAccordionPanel, typeof i3_28.ClrAccordionTitle, typeof i4_19.ClrAccordionDescription, typeof i5_16.ClrAccordionContent, typeof i6_10.AccordionOompaLoompa, typeof i7_9.AccordionWillyWonka]>;
 }
 
 // @public (undocumented)
@@ -3741,44 +3741,10 @@ export class ClrStackHeader {
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrStackHeader, never>;
 }
 
-// Warning: (ae-forgotten-export) The symbol "StackControl" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export class ClrStackInput extends StackControl {
-    constructor(stackView: ClrStackView);
-    // (undocumented)
-    stackView: ClrStackView;
-    // (undocumented)
-    type: string;
-    // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<ClrStackInput, "clr-stack-input", never, { "model": "clrModel"; "type": "type"; }, { "modelChange": "clrModelChange"; }, never, never, false, never>;
-    // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<ClrStackInput, never>;
-}
-
-// @public (undocumented)
-export class ClrStackSelect extends StackControl {
-    constructor(stackView: ClrStackView);
-    // (undocumented)
-    stackView: ClrStackView;
-    // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<ClrStackSelect, "clr-stack-select", never, { "model": "clrModel"; }, { "modelChange": "clrModelChange"; }, never, ["*"], false, never>;
-    // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<ClrStackSelect, never>;
-}
-
 // @public (undocumented)
 export class ClrStackView {
-    editable: boolean;
-    // (undocumented)
-    get editing(): boolean;
-    set editing(value: boolean);
     // (undocumented)
-    editingChange: EventEmitter<boolean>;
-    // (undocumented)
-    save: EventEmitter<void>;
-    // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<ClrStackView, "clr-stack-view", never, {}, { "save": "clrStackSave"; }, never, ["clr-stack-header", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrStackView, "clr-stack-view", never, {}, {}, never, ["clr-stack-header", "*"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrStackView, never>;
 }
@@ -3816,11 +3782,9 @@ export class ClrStackViewModule {
     // Warning: (ae-forgotten-export) The symbol "i3_16" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i4_10" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i5_9" needs to be exported by the entry point index.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i6_8" needs to be exported by the entry point index.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i7_7" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrStackViewModule, [typeof i1_30.ClrStackView, typeof i2_22.ClrStackHeader, typeof i3_16.ClrStackBlock, typeof i4_10.ClrStackContentInput, typeof i5_9.ClrStackViewLabel, typeof i5_9.ClrStackViewCustomTags, typeof i6_8.ClrStackInput, typeof i7_7.ClrStackSelect], [typeof i6.CommonModule, typeof i40.FormsModule, typeof i3_2.ClrIconModule, typeof i44.ClrExpandableAnimationModule], [typeof i1_30.ClrStackView, typeof i2_22.ClrStackHeader, typeof i3_16.ClrStackBlock, typeof i4_10.ClrStackContentInput, typeof i5_9.ClrStackViewLabel, typeof i5_9.ClrStackViewCustomTags, typeof i6_8.ClrStackInput, typeof i7_7.ClrStackSelect]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrStackViewModule, [typeof i1_30.ClrStackView, typeof i2_22.ClrStackHeader, typeof i3_16.ClrStackBlock, typeof i4_10.ClrStackContentInput, typeof i5_9.ClrStackViewLabel, typeof i5_9.ClrStackViewCustomTags], [typeof i6.CommonModule, typeof i40.FormsModule, typeof i3_2.ClrIconModule, typeof i44.ClrExpandableAnimationModule], [typeof i1_30.ClrStackView, typeof i2_22.ClrStackHeader, typeof i3_16.ClrStackBlock, typeof i4_10.ClrStackContentInput, typeof i5_9.ClrStackViewLabel, typeof i5_9.ClrStackViewCustomTags]>;
 }
 
 // @public (undocumented)
@@ -4075,12 +4039,12 @@ export class ClrTabsModule {
     // Warning: (ae-forgotten-export) The symbol "i3_21" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i4_14" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i5_12" needs to be exported by the entry point index.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i6_9" needs to be exported by the entry point index.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i7_8" needs to be exported by the entry point index.d.ts
+    // Warning: (ae-forgotten-export) The symbol "i6_8" needs to be exported by the entry point index.d.ts
+    // Warning: (ae-forgotten-export) The symbol "i7_7" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i11_4" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrTabsModule, [typeof i1_40.ClrTabContent, typeof i2_29.ClrTab, typeof i3_21.ClrTabs, typeof i4_14.ClrTabOverflowContent, typeof i5_12.ClrTabLink, typeof i6_9.TabsWillyWonka, typeof i7_8.ActiveOompaLoompa], [typeof i6.CommonModule, typeof i6_2.ClrConditionalModule, typeof i3_2.ClrIconModule, typeof i11_4.ClrTemplateRefModule, typeof i48.ClrKeyFocusModule], [typeof i1_40.ClrTabContent, typeof i2_29.ClrTab, typeof i3_21.ClrTabs, typeof i4_14.ClrTabOverflowContent, typeof i5_12.ClrTabLink, typeof i6_9.TabsWillyWonka, typeof i7_8.ActiveOompaLoompa, typeof i6_2.ClrConditionalModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrTabsModule, [typeof i1_40.ClrTabContent, typeof i2_29.ClrTab, typeof i3_21.ClrTabs, typeof i4_14.ClrTabOverflowContent, typeof i5_12.ClrTabLink, typeof i6_8.TabsWillyWonka, typeof i7_7.ActiveOompaLoompa], [typeof i6.CommonModule, typeof i6_2.ClrConditionalModule, typeof i3_2.ClrIconModule, typeof i11_4.ClrTemplateRefModule, typeof i48.ClrKeyFocusModule], [typeof i1_40.ClrTabContent, typeof i2_29.ClrTab, typeof i3_21.ClrTabs, typeof i4_14.ClrTabOverflowContent, typeof i5_12.ClrTabLink, typeof i6_8.TabsWillyWonka, typeof i7_7.ActiveOompaLoompa, typeof i6_2.ClrConditionalModule]>;
 }
 
 // @public (undocumented)
@@ -4670,15 +4634,15 @@ export class ClrWizardModule {
     // Warning: (ae-forgotten-export) The symbol "i3_26" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i4_17" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i5_14" needs to be exported by the entry point index.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i6_10" needs to be exported by the entry point index.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i7_9" needs to be exported by the entry point index.d.ts
+    // Warning: (ae-forgotten-export) The symbol "i6_9" needs to be exported by the entry point index.d.ts
+    // Warning: (ae-forgotten-export) The symbol "i7_8" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i8_7" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i9_6" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i10_5" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i11_5" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrWizardModule, [typeof i1_45.ClrWizard, typeof i2_34.ClrWizardPage, typeof i3_26.ClrWizardStepnav, typeof i4_17.ClrWizardStepnavItem, typeof i5_14.ClrWizardButton, typeof i6_10.ClrWizardHeaderAction, typeof i7_9.ClrWizardCustomTags, typeof i8_7.ClrWizardPageTitle, typeof i9_6.ClrWizardPageNavTitle, typeof i10_5.ClrWizardPageButtons, typeof i11_5.ClrWizardPageHeaderActions], [typeof i6.CommonModule, typeof i4_12.ClrModalModule, typeof i1_2.ClrAlertModule], [typeof i1_45.ClrWizard, typeof i2_34.ClrWizardPage, typeof i3_26.ClrWizardStepnav, typeof i4_17.ClrWizardStepnavItem, typeof i5_14.ClrWizardButton, typeof i6_10.ClrWizardHeaderAction, typeof i7_9.ClrWizardCustomTags, typeof i8_7.ClrWizardPageTitle, typeof i9_6.ClrWizardPageNavTitle, typeof i10_5.ClrWizardPageButtons, typeof i11_5.ClrWizardPageHeaderActions]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrWizardModule, [typeof i1_45.ClrWizard, typeof i2_34.ClrWizardPage, typeof i3_26.ClrWizardStepnav, typeof i4_17.ClrWizardStepnavItem, typeof i5_14.ClrWizardButton, typeof i6_9.ClrWizardHeaderAction, typeof i7_8.ClrWizardCustomTags, typeof i8_7.ClrWizardPageTitle, typeof i9_6.ClrWizardPageNavTitle, typeof i10_5.ClrWizardPageButtons, typeof i11_5.ClrWizardPageHeaderActions], [typeof i6.CommonModule, typeof i4_12.ClrModalModule, typeof i1_2.ClrAlertModule], [typeof i1_45.ClrWizard, typeof i2_34.ClrWizardPage, typeof i3_26.ClrWizardStepnav, typeof i4_17.ClrWizardStepnavItem, typeof i5_14.ClrWizardButton, typeof i6_9.ClrWizardHeaderAction, typeof i7_8.ClrWizardCustomTags, typeof i8_7.ClrWizardPageTitle, typeof i9_6.ClrWizardPageNavTitle, typeof i10_5.ClrWizardPageButtons, typeof i11_5.ClrWizardPageHeaderActions]>;
 }
 
 // @public

diff --git a/projects/angular/src/data/stack-view/_stack-view.clarity.scss b/projects/angular/src/data/stack-view/_stack-view.clarity.scss
@@ -4,8 +4,6 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-$styledInputs: 'input[type=text], input[type=password], input[type=number], input[type=email], input[type=url], input[type=tel], input[type=date], input[type=time], input[type=datetime-local]';
-
 @mixin lastElementBottomBorder($use-custom-props: true) {
   border-bottom: none;
   $fallbackShadow: 0 $clr_baselineRem_1px 0 $clr-stack-view-border-box-color;
@@ -300,70 +298,6 @@ $styledInputs: 'input[type=text], input[type=password], input[type=number], inpu
       }
     }
 
-    /*
-      Styles specific to inputs used in a stack view
-    */
-    #{$styledInputs},
-    .select {
-      display: inline-block;
-      vertical-align: top;
-      margin-right: $clr_baselineRem_0_5;
-      // We need to account for the border at the bottom of inputs
-      // Or the stack view blocks all move 1px when going in edit mode.
-      // Inputs are 24px high but 25px total when you include the border.
-      margin-bottom: -1 + $clr-global-borderwidth;
-    }
-
-    // Fix for Firefox and IE, which are throwing line-height for inputs in the air,
-    // like they just don't care.
-    // Yes, hard-coding the height isn't great. Haven't found anything better cross-browser.
-    #{$styledInputs},
-    .select select {
-      height: $clr_baselineRem_1;
-    }
-
-    // TODO: Clean up if not being used
-    .stack-block-expandable > .stack-block-content {
-      #{$styledInputs} {
-        transition: background-size 0.2s ease, border-bottom-color 0.2s ease-in-out;
-      }
-      .select {
-        select {
-          transition: border-bottom-color 0.2s ease-in-out;
-        }
-        &::after {
-          transition: color 0.2s ease-in-out;
-        }
-      }
-    }
-    // TODO: Clean up if not being used
-    .stack-block-expanded > .stack-block-content {
-      #{$styledInputs} {
-        @include css-var(
-          border-bottom-color,
-          clr-color-neutral-600,
-          $clr-color-neutral-600,
-          $clr-use-custom-properties
-        );
-        @include input-border-bottom-animation($clr-color-action-600, clr-color-action-600, $clr-use-custom-properties);
-      }
-
-      .select {
-        select {
-          @include css-var(
-            border-bottom-color,
-            clr-color-neutral-600,
-            $clr-color-neutral-600,
-            $clr-use-custom-properties
-          );
-        }
-
-        &::after {
-          @include css-var(color, clr-color-neutral-600, $clr-color-neutral-600, $clr-use-custom-properties);
-        }
-      }
-    }
-
     /*
       Styles specific to stack views used in a modal
     */

diff --git a/projects/angular/src/data/stack-view/index.ts b/projects/angular/src/data/stack-view/index.ts
@@ -7,8 +7,6 @@
 export * from './stack-view';
 export * from './stack-header';
 export * from './stack-block';
-export * from './stack-input';
-export * from './stack-select';
 export * from './stack-view.module';
 export * from './stack-view-custom-tags';
 export * from './stack-content-input';
diff --git a/projects/angular/src/data/stack-view/stack-control.ts b/projects/angular/src/data/stack-view/stack-control.ts
diff --git a/projects/angular/src/data/stack-view/stack-header.ts b/projects/angular/src/data/stack-view/stack-header.ts
@@ -16,16 +16,6 @@ import { ClrStackView } from './stack-view';
 
       <span class="stack-actions">
         <ng-content select=".stack-action"></ng-content>
-        <!-- Undocumented experimental feature: inline editing. -->
-        <button
-          *ngIf="stackView.editable"
-          class="stack-action btn btn-sm btn-link"
-          (click)="stackView.editing = !stackView.editing"
-          type="button"
-        >
-          Edit
-        </button>
-        <!-- End of undocumented experimental feature. -->
       </span>
     </div>
   `,

diff --git a/projects/angular/src/data/stack-view/stack-input.ts b/projects/angular/src/data/stack-view/stack-input.ts
diff --git a/projects/angular/src/data/stack-view/stack-select.ts b/projects/angular/src/data/stack-view/stack-select.ts
diff --git a/projects/angular/src/data/stack-view/stack-view.module.ts b/projects/angular/src/data/stack-view/stack-view.module.ts
@@ -14,8 +14,6 @@ import { ClrExpandableAnimationModule } from '../../utils/animations/expandable-
 import { ClrStackBlock } from './stack-block';
 import { ClrStackContentInput } from './stack-content-input';
 import { ClrStackHeader } from './stack-header';
-import { ClrStackInput } from './stack-input';
-import { ClrStackSelect } from './stack-select';
 import { ClrStackView } from './stack-view';
 import { ClrStackViewCustomTags, ClrStackViewLabel } from './stack-view-custom-tags';
 
@@ -26,14 +24,6 @@ export const CLR_STACK_VIEW_DIRECTIVES: Type<any>[] = [
   ClrStackContentInput,
   ClrStackViewLabel,
   ClrStackViewCustomTags,
-  /**
-   * Undocumented experimental feature: inline editing.
-   */
-  ClrStackInput,
-  ClrStackSelect,
-  /**
-   * End of undocumented experimental feature.
-   */
 ];
 
 @NgModule({