Page MenuHomePhabricator

[Spike] Investigate OOUI layouts for PIRS
Closed, ResolvedPublicSpike

Description

Background information

As a developer I want to explore the possible layouts that can be used for PIRS form so that I may use these layouts in future development.

Questions

  • Based on exploration designs what layout would best support the PIRS form?

The exploration design mock up presents a list or card-like ui design. To achieve a similar look with OOUI we can employ the Stack and Panel layout https://www.mediawiki.org/wiki/OOUI/Layouts/Stacks_and_Panels. By definition, a stack contains a set of one or more panels (stacked) on top of each other. Each panel could be programmatically hidden or shown to progress a user through a form workflow.

  • Are there any special considerations for the layout based on design explorations?

Yes, while prototyping a tab panel OOUI layout (without infusion), I noticed a FOUC each time a tab was pressed and the next tab rendered. This was remedied by infusing the tabs. Is this the preferred way to handle the FOUC issue? https://en.wikipedia.org/wiki/Flash_of_unstyled_content#:~:text=A%20flash%20of%20unstyled%20content,before%20all%20information%20is%20retrieved.

  • What types of form elements are used in the exploration (toggles, checkboxes, buttons, etc)?

As far as OOUI is concerned we would need to make sure we are aware of any toggles because toggles are not natively available in OOUI there is additional code needed to make a Checkbox UI element appear as a toggle.

Also to ensure that the version of Codex being used during design explorations is also compatible with the version running in production.

Event Timeline

eigyan updated the task description. (Show Details)
eigyan updated the task description. (Show Details)

Sample TabPanel Creation

public function execute( $par ) {

		$request = $this->getRequest();
		$config = $this->getPirsConfig();
		$this->getOutput()->enableOOUI();
		$user = $this->getUser();

		$this->getOutput()->setPageTitle(
			$this->msg( 'pirs-title' )
		);

		$main = new IndexLayout( [
			'infusable' => true,
			'expanded' => false,
			'framed' => false,
			'id' => 'pirs-tabs'
		] );

		$foo = new OOUI\HtmlSnippet( 'STEP1');
		$foo2 = new OOUI\HtmlSnippet( 'STEP2');
		$foo3 = new OOUI\HtmlSnippet( 'STEP3');

		$where = $this->getRequest()->getText('tab');


		$tabs = [];
		$tabs[] = $this->createTab('STEP1','S1',$foo);
		$tabs[] = $this->createTab('STEP2','S2',$foo2);
		$tabs[] = $this->createTab('STEP3','S3',$foo3);
		$main->addTabPanels( $tabs );
		$main->setTabPanel($where);

		$this->getOutput()->addHTML($main);

	}

	private function createTab( string $name, string $label, \OOUI\HtmlSnippet $content ): TabPanelLayout {
		return new TabPanelLayout(
			$name,
			[
				'id' => $name,
				'classes'=>['incidentreporting-tabs'],
				'label' => $label,
				'expanded' => false,
//				'tabItemConfig' => [
//					'href' => $this->getFullTitle()->getLinkURL( [ 'tab' => $name ] )
//				],
				'content' => $content
			]
		);
	}